首页 » jQuery UI » jQuery UI 实例
网站地图

部件库（Widget Factory）

jQuery UI 实例 - 部件库（Widget Factory）

使用与所有 jQuery UI 小部件相同的抽象化来创建有状态的 jQuery 插件。

如需了解更多有关部件库（Widget Factory）的细节，请查看 API 文档 部件库（Widget Factory）。

默认功能

该演示展示了一个简单的使用部件库（jquery.ui.widget.js）创建的自定义的小部件。

三个区块是以不同的方式初始化的。点击改变他们的背景颜色。查看源码及注释理解工作原理。

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>jQuery UI 部件库（Widget Factory） - 默认功能</title>
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  7.   <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  8.   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  9.   <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  10.   <style>
  11.   .custom-colorize {
  12.     font-size: 20px;
  13.     position: relative;
  14.     width: 75px;
  15.     height: 75px;
  16.   }
  17.   .custom-colorize-changer {
  18.     font-size: 10px;
  19.     position: absolute;
  20.     right: 0;
  21.     bottom: 0;
  22.   }
  23.   </style>
  24.   <script>
  25.   $(function() {
  26.     // 部件定义，其中 "custom" 是命名空间，"colorize" 是部件名称
  27.     $.widget( "custom.colorize", {
  28.       // 默认选项
  29.       options: {
  30.         red: 255,
  31.         green: 0,
  32.         blue: 0,
  33.  
  34.         // 回调
  35.         change: null,
  36.         random: null
  37.       },
  38.  
  39.       // 构造函数
  40.       _create: function() {
  41.         this.element
  42.           // 添加一个主题化的 class
  43.           .addClass( "custom-colorize" )
  44.           // 防止双击来选择文本
  45.           .disableSelection();
  46.  
  47.         this.changer = $( "<button>", {
  48.           text: "改变",
  49.           "class": "custom-colorize-changer"
  50.         })
  51.         .appendTo( this.element )
  52.         .button();
  53.  
  54.         // 绑定 changer 按钮上的 click 事件到 random 方法
  55.         this._on( this.changer, {
  56.           // 当小部件被禁用时，_on 不会调用 random
  57.           click: "random"
  58.         });
  59.         this._refresh();
  60.       },
  61.  
  62.       // 当创建及之后改变选项时调用
  63.       _refresh: function() {
  64.         this.element.css( "background-color", "rgb(" +
  65.           this.options.red +"," +
  66.           this.options.green + "," +
  67.           this.options.blue + ")"
  68.         );
  69.  
  70.         // 触发一个回调/事件
  71.         this._trigger( "change" );
  72.       },
  73.  
  74.       // 一个改变颜色为随机值的公共方法
  75.       // 可通过 .colorize( "random" ) 直接调用
  76.       random: function( event ) {
  77.         var colors = {
  78.           red: Math.floor( Math.random() * 256 ),
  79.           green: Math.floor( Math.random() * 256 ),
  80.           blue: Math.floor( Math.random() * 256 )
  81.         };
  82.  
  83.         // 触发一个事件，检查是否已取消
  84.         if ( this._trigger( "random", event, colors ) !== false ) {
  85.           this.option( colors );
  86.         }
  87.       },
  88.  
  89.       // 自动移除通过  _on 绑定的事件
  90.       // 在这里重置其他的修改
  91.       _destroy: function() {
  92.         // 移除生成的元素
  93.         this.changer.remove();
  94.  
  95.         this.element
  96.           .removeClass( "custom-colorize" )
  97.           .enableSelection()
  98.           .css( "background-color", "transparent" );
  99.       },
  100.  
  101.       // _setOptions 是通过一个带有所有改变的选项的哈希来调用的
  102.       // 当改变选项时总是刷新
  103.       _setOptions: function() {
  104.         // _super 和 _superApply
  105.         this._superApply( arguments );
  106.         this._refresh();
  107.       },
  108.  
  109.       // _setOption 是为每个独立的改变的选项调用的
  110.       _setOption: function( key, value ) {
  111.         // 防止无效的颜色值
  112.         if ( /red|green|blue/.test(key) && (value < 0 || value > 255) ) {
  113.           return;
  114.         }
  115.         this._super( key, value );
  116.       }
  117.     });
  118.  
  119.     // 通过默认选项进行初始化
  120.     $( "#my-widget1" ).colorize();
  121.  
  122.     // 通过两个自定义的选项进行初始化
  123.     $( "#my-widget2" ).colorize({
  124.       red: 60,
  125.       blue: 60
  126.     });
  127.  
  128.     // 通过自定义的 green 值和一个只允许颜色足够绿的随机的回调进行初始化
  129.     $( "#my-widget3" ).colorize( {
  130.       green: 128,
  131.       random: function( event, ui ) {
  132.         return ui.green > 128;
  133.       }
  134.     });
  135.  
  136.     // 点击切换 enabled/disabled
  137.     $( "#disable" ).click(function() {
  138.       // 为每个小部件使用自定义的选择器来找到所有的实例
  139.       // 所有的实例一起切换，所以我们可以从第一个开始检查状态
  140.       if ( $( ":custom-colorize" ).colorize( "option", "disabled" ) ) {
  141.         $( ":custom-colorize" ).colorize( "enable" );
  142.       } else {
  143.         $( ":custom-colorize" ).colorize( "disable" );
  144.       }
  145.     });
  146.  
  147.     // 在初始化后，点击设置选项
  148.     $( "#black" ).click( function() {
  149.       $( ":custom-colorize" ).colorize( "option", {
  150.         red: 0,
  151.         green: 0,
  152.         blue: 0
  153.       });
  154.     });
  155.   });
  156.   </script>
  157. </head>
  158. <body>
  159.  
  160. <div>
  161.   <div id="my-widget1">改变颜色</div>
  162.   <div id="my-widget2">改变颜色</div>
  163.   <div id="my-widget3">改变颜色</div>
  164.   <button id="disable">切换 disabled 选项</button>
  165.   <button id="black">改为黑色</button>
  166. </div>
  167.  
  168.  
  169. </body>
  170. </html>