jqm widget 开发

最新推荐文章于 2025-12-02 21:41:05 发布

原创最新推荐文章于 2025-12-02 21:41:05 发布 · 221 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ui #ViewUI

jQuery mobile 专栏收录该内容

6 篇文章

订阅专栏

本文详细阐述了jQuery Mobile Widget的开发过程，包括基本代码段、生命周期、与jQuery Mobile的结合方式，以及如何利用jQuery UI的widget factory进行封装。通过案例分析，读者可以更好地理解如何创建自定义小部件。

之前对 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