@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

jQueryMobileのダイアログの閉じるボタンのテキスト変更


左上に閉じるボタンがありますよね。
でもこれって小さいので、テキストをつけたり、アイコンを変更したいなぁと思うじゃないですか。思いません?思いますよね。
色々がんばって見たのですが、簡単には出来ない。
公式のドキュメント(jQuery Mobile Docs - Dialogs)には、次のように書いてあるのですが。

Setting the close button text

Just like the page plugin, you can set a dialog's close button text through an option or data attribute. The option can be configured for all dialogs by binding to the mobileinit event and setting the $.mobile.dialog.prototype.options.closeBtnText property to a string of your choosing, or you can place the data attribute data-close-btn-text to configure the text from your markup.

$(document).bind('mobileinit', function() {})の中で$.mobile.dialog.prototype.options.closeBtnTextにテキストを設定するか、data-close-btn-text属性を設定しないよ。って書いてあるので、試してみたけれどダメでした。
それではと、jquery.mobile-1.1.1.jsを確認してみると・・・(4110行目あたり)

$.widget( "mobile.dialog", $.mobile.widget, {
	options: {
		closeBtnText 	: "Close",
		overlayTheme	: "a",
		initSelector	: ":jqmData(role='dialog')"
	},
	_create: function() {
		var self = this,
			$el = this.element,
			headerCloseButton = $( "<a href='#' data-" + $.mobile.ns + "icon='delete' data-" + $.mobile.ns + "iconpos='notext'>"+ this.options.closeBtnText + "</a>" ),
			dialogWrap = $("<div/>", {
					"role" : "dialog",
					"class" : "ui-dialog-contain ui-corner-all ui-overlay-shadow"
				});

		$el.addClass( "ui-dialog ui-overlay-" + this.options.overlayTheme );
        // 省略
	}
};

data-icon='delete'とdata-iconpos='notext'がベタ書きしてありますね・・・。ひどいと思います!
本来であれば、pagebeforeshowイベントのところでゴニョるのでしょうけれども、無理矢理に jquery.mobile.jsを修正することで対応してみました。

//			headerCloseButton = $( "<a href='#' data-" + $.mobile.ns + "icon='delete' data-" + $.mobile.ns + "iconpos='notext'>"+ this.options.closeBtnText + "</a>" ),
            // テキストを表示するように修正したよ
			headerCloseButton = $( "<a href='#' data-" + $.mobile.ns + "icon='delete'>"+ this.options.closeBtnText + "</a>" ),