まめしみ

やったことを淡々と書く

Archive for 10月 24th, 2011

jQueryMobile(1.0rc2)でkeepNativeが復活


 

以前書いた「jQueryMobile(1.0b2)のスタイルを無効化する」でkeepNativeが使えなくなった話をしましたが「1.0rc2」で復活してるようです。

 

「1.0b2」から何度かバージョンが上がって「1.0rc2」がリリースされました。Change logをさら〜っと見てたらこんなの見つけました!

Allow users to define keepnative on page elements – Change allows for more flexibility

 

commit log探ってポイントを抜粋してみました。

 

定義してるとこ

$.widget( "mobile.page", $.mobile.widget, {
	options: {
		theme: "c",
		domCache: false,
		keepNativeDefault: ":jqmData(role='none'), :jqmData(role='nojs')"
	},

	_create: function() {

		this._trigger( "beforecreate" );

		this.element
			.attr( "tabindex", "0" )
			.addClass( "ui-page ui-body-" + this.options.theme );
	},

	keepNativeSelector: function() {
		var options = this.options,
			keepNativeDefined = options.keepNative && $.trim(options.keepNative);

		if( keepNativeDefined && options.keepNative !== options.keepNativeDefault ){
			return [options.keepNative, options.keepNativeDefault].join(", ");
		}

		return options.keepNativeDefault;
	}
});

 

実際に使ってるとこ

(function( $, undefined ) {

$.widget( "mobile.widget", {
	// decorate the parent _createWidget to trigger `widgetinit` for users
	// who wish to do post post `widgetcreate` alterations/additions
	//
	// TODO create a pull request for jquery ui to trigger this event
	// in the original _createWidget
	_createWidget: function() {
		$.Widget.prototype._createWidget.apply( this, arguments );
		this._trigger( 'init' );
	},

	_getCreateOptions: function() {

		var elem = this.element,
			options = {};

		$.each( this.options, function( option ) {

			var value = elem.jqmData( option.replace( /[A-Z]/g, function( c ) {
							return "-" + c.toLowerCase();
						})
					);

			if ( value !== undefined ) {
				options[ option ] = value;
			}
		});

		return options;
	},

	enhanceWithin: function( target ) {
		// TODO remove dependency on the page widget for the keepNative.
		// Currently the keepNative value is defined on the page prototype so
		// the method is as well
		var page = $(target).data( "page" ),
			keepNative = page && page.keepNativeSelector();

		$( this.options.initSelector, target ).not( keepNative || "" )[ this.widgetName ]();
	}
});

 

enhanceWithinで各widgetの初期化が実行されます。その時点でkeepNativeで指定したセレクタは除外してます。
enhanceWithinが呼ばれないwidget(listviewなど)には意味が無いです。
data-role=”listview”指定してる時点で無効にする事はないので問題ないでしょう。

 

試したところ1.0b2以前のようにclass指定での一括除外もできました。
※この記述はjQueryMobileの読み込みより先に

$(document).bind("mobileinit", function(){
  $.mobile.page.prototype.options.keepNative = ".data-role-none, .data-role-none *";
});

TODOに今のとこ同じだからprototypeで定義するよ!的なこと書いてあるのでまた変更されるかもしれませんが、、、