$.widget 关于jquery 插件的用法
齐鸿光
以下是从官网copy过来。 基本上jquery插件都是这个样子。记录下来参考。<html lang="en"><head><meta charset="utf-8" /><title>jQuery UI Widget - Default functionality</title><link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /><script src="http://code.jquery.com/jquery-1.9.1.js"></script><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><link rel="stylesheet" href="/resources/demos/style.css" /><style>.custom-colorize {font-size: 20px;position: relative;width: 75px;height: 75px;}.custom-colorize-changer {font-size: 10px;position: absolute;right: 0;bottom: 0;}</style><script>$(function() {// the widget definition, where "custom" is the namespace,// "colorize" the widget name$.widget( "custom.colorize", {// default optionsoptions: {red: 255,green: 0,blue: 0,// callbackschange: null,random: null},// the constructor_create: function() {this.element// add a class for theming.addClass( "custom-colorize" )// prevent double click to select text.disableSelection();this.changer = $( "<button>", {text: "change","class": "custom-colorize-changer"}).appendTo( this.element ).button();// bind click events on the changer button to the random methodthis._on( this.changer, {// _on won't call random when widget is disabledclick: "random"});this._refresh();},// called when created, and later when changing options_refresh: function() {this.element.css( "background-color", "rgb(" +this.options.red +"," +this.options.green + "," +this.options.blue + ")");// trigger a callback/eventthis._trigger( "change" );},// a public method to change the color to a random value// can be called directly via .colorize( "random" )random: function( event ) {var colors = {red: Math.floor( Math.random() * 256 ),green: Math.floor( Math.random() * 256 ),blue: Math.floor( Math.random() * 256 )};// trigger an event, check if it's canceledif ( this._trigger( "random", event, colors ) !== false ) {this.option( colors );}},// events bound via _on are removed automatically// revert other modifications here_destroy: function() {// remove generated elementsthis.changer.remove();this.element.removeClass( "custom-colorize" ).enableSelection().css( "background-color", "transparent" );},// _setOptions is called with a hash of all options that are changing// always refresh when changing options_setOptions: function() {// _super and _superApply handle keeping the right this-contextthis._superApply( arguments );this._refresh();},// _setOption is called for each individual option that is changing_setOption: function( key, value ) {// prevent invalid color valuesif ( /red|green|blue/.test(key) && (value < 0 || value > 255) ) {return;}this._super( key, value );}});// initialize with default options$( "#my-widget1" ).colorize();// initialize with two customized options$( "#my-widget2" ).colorize({red: 60,blue: 60});// initialize with custom green value// and a random callback to allow only colors with enough green$( "#my-widget3" ).colorize( {green: 128,random: function( event, ui ) {return ui.green > 128;}});// click to toggle enabled/disabled$( "#disable" ).click(function() {// use the custom selector created for each widget to find all instances// all instances are toggled together, so we can check the state from the firstif ( $( ":custom-colorize" ).colorize( "option", "disabled" ) ) {$( ":custom-colorize" ).colorize( "enable" );} else {$( ":custom-colorize" ).colorize( "disable" );}});// click to set options after initalization$( "#black" ).click( function() {$( ":custom-colorize" ).colorize( "option", {red: 0,green: 0,blue: 0});});});</script></head><body><div><div id="my-widget1">color me</div><div id="my-widget2">color me</div><div id="my-widget3">color me</div><button id="disable">Toggle disabled option</button><button id="black">Go black</button></div></body></html>
类似资料：