jqm widget 开发

 

之前对 dojo 的 widget 开发很熟悉，jqm 的 widget 开发有些相似，感觉就是把每个小部件封装一下，有面向对象的意思，所有的 小部件 都遵循一套相似的生命周期，方便 整体框架 调用和控制。

 

jqm widget 开发的基本代码段：

 

(function( $, undefined ) {

    $.widget( "mobile.testWidget", $.mobile.widget, {
        options: {
            initSelector: ":jqmData(role='testWidget')"
        },
        _create: function() {
            
            alert(11111);
            console.dir({x : this});

        }
    });

    //auto self-init widgets
    $.mobile.document.bind( "pagecreate create", function( e ) {
        $.mobile.testWidget.prototype.enhanceWithin( e.target );
    });

})( jQuery );

 

注意：插件代码（上述代码段）要在 jqm 库之后引入

 

jqm widget 开发的详细内容：

jqm 中使用的是 jQuery UI 的 widget factory ,所以要了解 jqm widget 的一些细节的话要对 jQuery UI 的 widget factory 了解，也可以结合 jqm 源码了解一下 widget 的 生命周期、变量环境、与 jqm 的结合 等方面的内容。

 

[参考文章]

The Making of a jQuery Mobile Widget – the “Tab Bar” 

Creating jQuery Mobile Plugins

How to write a custom widget for jQuery Mobile

jQuery UI widget Factory