小部件工厂

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

示例

默认功能

这个演示文档使用小部件工厂(jquery.ui.widget.js)显示了一个简单的自定义小部件。

这三个盒子以不同的方式初始化。点击它们以改变它们的背景色。观察源码以看到它如何起作用,它有大量的注释。

<!doctype html>
<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.11.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.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" the widget name
    $.widget( "custom.colorize", {
      // 默认选项
      options: {
        red: 255,
        green: 0,
        blue: 0,
        // callbacks
        change: null,
        random: null
      },
      // 构造器
      _create: function() {
        this.element
          // 添加样式类以实现主题化
          .addClass( "custom-colorize" )
          // 防止双击选中文本
          .disableSelection();
        this.changer = $( "<button>", {
          text: "change",
          "class": "custom-colorize-changer"
        })
        .appendTo( this.element )
        .button();
        // 在changer按钮上把点击事件绑定到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绑定的事件自动删除
      // revert other modifications here
      _destroy: function() {
        // remove generated elements
        this.changer.remove();
        this.element
          .removeClass( "custom-colorize" )
          .enableSelection()
          .css( "background-color", "transparent" );
      },
      // 调用_setOptions,带着正在改变的所有选项
      // 当选项改变时总是刷新
      _setOptions: function() {
        // _super and _superApply handle keeping the right this-context
        this._superApply( arguments );
        this._refresh();
      },
      // _setOption is called for each individual option that is changing
      _setOption: function( key, value ) {
        // prevent invalid color values
        if ( /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 first
      if ( $( ":custom-colorize" ).colorize( "option", "disabled" ) ) {
        $( ":custom-colorize" ).colorize( "enable" );
      } else {
        $( ":custom-colorize" ).colorize( "disable" );
      }
    });
    // click to set options after initialization
    $( "#green" ).click( function() {
      $( ":custom-colorize" ).colorize( "option", {
        red: 64,
        green: 250,
        blue: 8
      });
    });
  });
  </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="green">Go green</button>
</div>
</body>
</html>

想要了对小部件工厂了解更多?请阅读这个API文档

如果你喜欢这篇文章,敬请给站长打赏↑

除特别注明外,本站所有文章均为本站站长原译,转载请注明出处。