阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      jQuery UI 实例 – 部件库(Widget Factory)

      jQuery UI 实例 - 部件库(Widget Factory)

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

      如需了解更多有关部件库(Widget Factory)的细节,请查看 API 文档部件库(Widget Factory)(/edu/jqueryui/api-jQuery-widget.html)。

      默认功能

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

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

      jQuery UI 部件库(Widget Factory) - 默认功能

      .custom-colorize { font-size: 20px; position: relative; width: 75px; height: 75px; } .custom-colorize-changer { font-size: 10px; position: absolute; right: 0; bottom: 0; } $(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
        });
      });
      

      });

      改变颜色

      改变颜色

      改变颜色

      切换 disabled 选项 改为黑色

      [查看演示(/try/tryit.php?filename=jqueryui-example-widget)

      目录
      目录