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