jQuery UI 实例 - 部件库（Widget Factory） · W3School jQuery UI 教程

# jQuery UI 实例 - 部件库（Widget Factory）使用与所有 jQuery UI 小部件相同的抽象化来创建有状态的 jQuery 插件。如需了解更多有关部件库（Widget Factory）的细节，请查看 API 文档 [部件库（Widget Factory）](api-jQuery-widget.html)。 ## 默认功能该演示展示了一个简单的使用部件库（jquery.ui.widget.js）创建的自定义的小部件。三个区块是以不同的方式初始化的。点击改变他们的背景颜色。查看源码及注释理解工作原理。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 部件库（Widget Factory） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/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() { // 部件定义，其中 "custom" 是命名空间，"colorize" 是部件名称 $.widget( "custom.colorize", { // 默认选项 options: { red: 255, green: 0, blue: 0, // 回调 change: null, random: null }, // 构造函数 _create: function() { this.element // 添加一个主题化的 class .addClass( "custom-colorize" ) // 防止双击来选择文本 .disableSelection(); this.changer = $( "<button>", { text: "改变", "class": "custom-colorize-changer" }) .appendTo( this.element ) .button(); // 绑定 changer 按钮上的 click 事件到 random 方法 this._on( this.changer, { // 当小部件被禁用时，_on 不会调用 random click: "random" }); this._refresh(); }, // 当创建及之后改变选项时调用 _refresh: function() { this.element.css( "background-color", "rgb(" + this.options.red +"," + this.options.green + "," + this.options.blue + ")" ); // 触发一个回调/事件 this._trigger( "change" ); }, // 一个改变颜色为随机值的公共方法 // 可通过 .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 ) }; // 触发一个事件，检查是否已取消 if ( this._trigger( "random", event, colors ) !== false ) { this.option( colors ); } }, // 自动移除通过 _on 绑定的事件 // 在这里重置其他的修改 _destroy: function() { // 移除生成的元素 this.changer.remove(); this.element .removeClass( "custom-colorize" ) .enableSelection() .css( "background-color", "transparent" ); }, // _setOptions 是通过一个带有所有改变的选项的哈希来调用的 // 当改变选项时总是刷新 _setOptions: function() { // _super 和 _superApply this._superApply( arguments ); this._refresh(); }, // _setOption 是为每个独立的改变的选项调用的 _setOption: function( key, value ) { // 防止无效的颜色值 if ( /red|green|blue/.test(key) && (value < 0 || value > 255) ) { return; } this._super( key, value ); } }); // 通过默认选项进行初始化 $( "#my-widget1" ).colorize(); // 通过两个自定义的选项进行初始化 $( "#my-widget2" ).colorize({ red: 60, blue: 60 }); // 通过自定义的 green 值和一个只允许颜色足够绿的随机的回调进行初始化 $( "#my-widget3" ).colorize( { green: 128, random: function( event, ui ) { return ui.green > 128; } }); // 点击切换 enabled/disabled $( "#disable" ).click(function() { // 为每个小部件使用自定义的选择器来找到所有的实例 // 所有的实例一起切换，所以我们可以从第一个开始检查状态 if ( $( ":custom-colorize" ).colorize( "option", "disabled" ) ) { $( ":custom-colorize" ).colorize( "enable" ); } else { $( ":custom-colorize" ).colorize( "disable" ); } }); // 在初始化后，点击设置选项 $( "#black" ).click( function() { $( ":custom-colorize" ).colorize( "option", { red: 0, green: 0, blue: 0 }); }); }); </script> </head> <body> <div> <div id="my-widget1">改变颜色</div> <div id="my-widget2">改变颜色</div> <div id="my-widget3">改变颜色</div> <button id="disable">切换 disabled 选项</button> <button id="black">改为黑色</button> </div> </body> </html> ```