jQuery Mobile插件开发一

jQuery Mobile插件开发1

最近的项目使用jQuery Mobile开发别克手机官网HTML5版。

其中涉及到车型展示准备使用幻灯片切换效果，但是目前还没有比较适合扩展性又比较好的现成插件，所以准备自己开发一个。

准备开发jQuery Mobile插件之前先上网google了一下有没有step by step的教程。。

比较悲哀的是目前还没有比较完毕的中文教程，幸运的是俺英文还不错，发现了一个英文版的。猛点此处查看

学习此文章之后，对比jQuery Mobile的widget插件发现开发插件的大概模版如下：

注意1：此模版开发的插件名称为“widgetName”

注意2：jQuery Mobile中的toobar、navbar、button等控件均采用widget插件方式开发，所以仔细阅读这些控件的代码可以方便的学习插件开发步骤。

 

(function($, undefined) {
    $.widget("mobile.widgetName", $.mobile.widget, {
        options: {
        //此处用来放置插件初始化相关信息
        },

        _create: function() {
            /**这是最重要的一个方法
             * 当调用XXX.widgetName()时jQuery Mobile会自动调用此方法。
             * 此方法也是插件的主方法用来实现插件内容的
            */
        },
        /*此处开始可以写一些插件对外开放的方法，一般习惯下不带下划线开头的方法为公有方法供
        * 开发人员调用，带下划线的方法为私有方法仅供插件内部使用。
        * 正常情况下，可以开放refresh方法供刷新控件使用，enable、disable方法供显示，隐藏控件使用。
        */
        refresh: function() {

        },

        enable: function() {
                   },

        disable: function() {
                  }

    });

    //auto self-init widgets
    //下面的代码表示在jQuery Mobile页面触发pagecreate事件以及create事件时会自动调用widget()方法。
    $(document).bind("pagecreate create", function(e) {
        $.mobile.gauge.prototype.enhanceWithin(e.target);
    });

})(jQuery);