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)

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了