Jquery iconMatic - inserimento automatico icone

Stampa Stampa | Categoria Altre news di questa categoria | Categoria download Categoria: Tech News >> Jquery

iconMatic

Questo plugin per jquery serve per stilizzare automaticamente tutti i collegamenti in maniera veloce e completamente personalizzabile, prendendo spunto da http://cool-javascripts.com/jquery/add-icons-to-your-links-automatically-using-jquery-css.html abbiamo creato uno strumento perfettamente integrato con uno dei framework javascript più utilizzati

Questa estenzione può essere semplicemente inizializzata con poche righe di codice

// seleziona tutti gli anchors (tag a) presenti nel tag selezionato assegnandogli la classe di default
$("SELECTORE DI JQUERY").iconMatic();

Sotto la lista delle opzioni disponibili

Prorpietà Valore di Default Descrizione
types ['pdf', 'doc', 'txt', 'rtf', 'zip', 'email', 'external','exe', 'img', 'ppt', 'wav', 'js', 'php', 'css'] I vari tipi di estensione che il plugin ricerca all'interno del tag selzionato.
NB: gli elementi 'external' e 'email' hanno delle regole di assegnazioni particolari, il primo ricerca i link che rimandano a domini esterni e il secondo i link in cui sia specificato "mailto:"
class {pdf:'pdf', doc:'doc', txt: 'txt', rtf: 'txt', zip:'zip', email:'email', external:'external', exe:'exe', img: 'img', ppt: 'ppt', wav: 'wav', js: 'code', php: 'code', css: 'css'} Nome della classe che iconMatic associa al relativo tipo di estensione. Relazione → tipo di file : 'classe'
exclude '' Elemento da escludere, il plugin non prenderà in considerazione link che hanno questo selettore, il selettore è uguale a quelli utilizzati in jQuery ('.test' → class, '#test' → id ...)
css '' Se specificato caricherà direttamente il css per la stilizzazione delle classi senza bisogno di inserire nel
inlineCss '' Regola css associata direttamente all'elemento corrispondente, il formato da specificare è lo stesso che si usa per la proprietà .css(options) di jQuery.
ES. inlineCss: {pdf: {'background-color':'#ff9900', 'font-weight':'bolder','color':'#0055ff'}, doc :{'background-color':'#99ff33', 'font-weight':'bolder','color':'#5500bb'}},

Demo

Demo 1: l'esempio più semplice di utilizzo di iconMatic

iconMatic.doc iconMatic.pdf iconMatic.zip Contattaci Esimple

1
2
3
 
$(document).ready(function() {
	$("#iconMatic_1").iconMatic();
})

Demo 2: caricamento del css direttamente da iconMatic

iconMatic.doc iconMatic.pdf iconMatic.zip Contattaci Esimple

1
2
3
4
5
 
$(document).ready(function() {
	$("#iconMatic_2").iconMatic({
		css: "iconMatic.css"
	});
})

Demo 3: specifica delle estensioni da ricercare e delle classi da associare ad ognuna

iconMatic.doc iconMatic.pdf iconMatic.zip Contattaci Esimple

1
2
3
4
5
6
7
 
$(document).ready(function() {
	$("#iconMatic_3").iconMatic({
		types: ['pdf', 'doc'],
		class: {pdf: 'newPdf', doc: 'newDoc'},
		css: "iconMatic.css"
	});
})

Demo 4: esclusione di uno specifico elemento

iconMatic.doc iconMatic.pdf iconMatic.zip Contattaci Esimple

1
2
3
4
5
6
 
$(document).ready(function() {
	$("#iconMatic_4").iconMatic({
		exclude: '#exclude',
		css: "iconMatic.css"
	});
})

Demo 5: associazione di uno stile css direttamente all'elemento specificato

iconMatic.doc iconMatic.pdf iconMatic.zip Contattaci Esimple

1
2
3
4
5
6
7
8
9
10
 
$(document).ready(function() {
	$("#iconMatic_5").iconMatic({
		inlineCss: {
                pdf: {'background-color':'#ff9900',
		'font-weight':'bolder','color':'#0055ff'}, 
                doc :{'background-color':'#99ff33',
		'font-weight':'bolder','color':'#5500bb'}},
		css: "iconMatic.css"
	});
})

Downloads

 
 Attached Files

Inserita il: 22/03/2010

Le News di Esimple

Benvenuti nella sezione News di Esimple Studios, in questo spazio potrai trovare notizie, rassegna stampa e articoli tecnici aggiornati

Cerca nelle News

Categorie

Seleziona la categoria :

Ads

photo 1

Links

[ Indietro ] | [ Home ]