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> ```