jQueryUI widget原理

来源：互联网发布：淘宝上比较好的书店编辑：程序博客网时间：2024/06/06 02:33

_createWidget: function( options, element ) {
        element = $( element || this.defaultElement || this )[ 0 ];
        this.element = $( element );
        this.uuid = uuid++;
        this.eventNamespace = "." + this.widgetName + this.uuid;
        ......
        this._create();
        this._trigger( "create", null, this._getCreateEventData() );
        this._init();
},

destroy: function() {
this._destroy();
}

编写jquery ui widget时默认需要实现_create,_init,_destroy等方法，以'_'开头的方法是组件的私有方法，其他的为公共方法

示例：

(function ($, undefined) {
  $.widget("spy.fuck", {
    options: {},
 
    /***
     * 创建元素时使用
     * @private
     */
    _create: function () {
      console.log('_create');
      console.log(this);
      console.log(this.element); //jQuery对象
 
      this.element.css('background', 'red');
    },
 
    /**
     * 初始化
     * @private
     */
    _init: function () {
      console.log('_init');
 
    },
 
    /**
     * 销毁
     * @private
     */
    _destroy: function () {
 
      console.log('_destroy');
      this.element.css('background', 'blue');
    },
 
    say: function () {
      console.log('say method');
      alert('fuck');
    }
  })
 
})(jQuery);

HTML

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
  <title>jQuery UI 插件原理</title>
</head>
<body>

<div id="fuck" style="height: 30px"></div>

<script type="text/javascript" src="../../jquery-1.10.2.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>

<script type="text/javascript" src="index.js"></script>
<script type="text/javascript">

  $('#fuck').fuck();

</script>
</body>
</html>

阅读全文

0 0