Websourcing.fr » Actualités, Web, Logiciels et Fun

[Webdesign] Un plugin JQuery pour créer des boutons à la Gmail

Tags: Javascript, JQuery, Webdesign, Webworker
Posté dans Billets, Webworker par Lionel Roux le 24 fév 2009

Il y a quelques jours je vous montrais comment créer des boutons à la Gmail sans image.

Un développeur slovène vient de créer un plugin pour JQuery qui permet de créer de tels boutons encore plus facilement.

		$(document).ready( function () {
			 // this is unfortunately needed due to a race condition in safari
			$("span").css({
				 'padding' : '3px 20px',
				 'font-size' : '12px',
			});

			$("span.makeMeAbutton").styledButton({

				'orientation' : 'alone', // one of {alone, left, center, right} default is alone

				// action can be specified as a single function to be fired on any click event
				'action' : {
							'on' :function () {
								alert( "You've turned on the button" );
							},
							'off' : function () {
								alert( "You've turned it off" );
							}
						},

				'display' : 'block', // main element's display css, default is inline-block

				'toggle' : true, // is the button togglable, default is false

				'role' : 'checkbox', // one of {button, checkbox, select}, default is button. Checkbox/select change some other defaults

				'checked' : true, // display as a checked checkbox or not, default is false

				// checkbox values, default are on and off
				'checkboxValue' : {
									'on' : "custom on!",
									'off' : "custom off!"
								},

				'defaultValue' : "foobar", // default value for select, doubles as default for checkboxValue.on if checkbox, default is empty

				'name' : 'checkfield', // name to use for hidden input field for checkbox and select so form can submit values

				// enable a dropdown menu, default is none
				'dropdown' : {
						'element' : 'ul' // what nested element to use as dropdown, default is ul
						}

				'clear' : false // in firefox 2 the buttons have to be floated to work properly, set this to true to have them display in a new line

				'border' : 2 // use this if you're using a nonstandard border thicknes
			});
		} );

Les boutons sont utilisables sur n’importe quel élément.

Le script a été testé sur plusieurs navigateurs dont:

• Opera 9.6x
• Firefox 3
• Firefox 2
• Safari 3
• Safari 2
• Internet Explorer 8 beta
• Internet Explorer 7
• Internet Explorer 6
• Chrome

Je ne l’ai pas essayé personnellement mais n’hésitez à venir faire des commentaires si vous le faites.

Tout savoir sur le script JQuery