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

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

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

默认功能

该演示展示了一个简单的使用部件库（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>改变颜色</div>
  <div>改变颜色</div>
  <div>改变颜色</div>
  <button>切换 disabled 选项</button>
  <button>改为黑色</button>
</div>
 
 
</body>
</html>