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