Jquery iconMatic - automatic icon

Stampa Print | Categoria Other of this category | Categoria download Category: Tech News >> Jquery

iconMatic

This plugin for jQuery is to stylize automatically all the links quickly and completely customizable, taking a cue from http://cool-javascripts.com/jquery/add-icons-to-your-links-automatically-using-jquery-css.html we created a fully integrated instrument with one of the most used javascript framework

Extension

This can simply be initialized with a few lines of code

// select all anchors (Tag a) in the selected tag by assigning the default class 
$("SELECTORE DI JQUERY").iconMatic();

Below the list of available options

Prorpietà Valore di Default Descrizione
types ['pdf', 'doc', 'txt', 'rtf', 'zip', 'email', 'external','exe', 'img', 'ppt', 'wav', 'js', 'php', 'css'] The various types of extensions that the plugin search the tags dialedis.
Note: elements 'external' and 'email' rules have special assignments, the first searches for links to external domains and the second link in which is specified "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'} Name of the class iconMatic associated with its extension type. Report → file type: 'class'
exclude '' Element to be excluded, the plugin will not consider links that have this switch, the switch is the same as those used in jQuery ('.test' → class, '#test' → id ...)
css '' If specified directly load the css classes for styling without the need for the
inlineCss '' Directly associated to the corresponding CSS rule, specify the format is the same that you use for the property. Css (options) of jQuery.
ES. inlineCss: {pdf: {'background-color':'#ff9900', 'font-weight':'bolder','color':'#0055ff'}, doc :{'background-color':'#99ff33', 'font-weight':'bolder','color':'#5500bb'}},

Demo

Demo 1: The simplest example of using iconMatic

iconMatic.doc iconMatic.pdf iconMatic.zip Contattaci Esimple

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

Demo 2: loading the css directly from 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: specification of extensions to search and classes to be associated with each

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: Association of a CSS style directly to the specified element

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

Posted on: 22/03/2010

Esimple's News

Welcome to Esimple's News. In this section you can find news, press releases and updated technical articles.

News Search

Categories

Select a category :

Ads

photo 1

Links

[ Back ] | [ Home ]