From 2a380cef998f7d7376efbfa77322203a0100b5fa Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 13 Dec 2011 12:45:55 +0200 Subject: [PATCH 1/2] Add two new options: 1) iconpos for close button- defaults to notext. 2) includeCloseBtn- defaults to true. At moment there is a closeBtnText option, but text will never be shown since iconpos is always notext! Currently anyone who doesn't want the default close icon button is stuck or must do some catching and hiding of the element. Not so intuitive. Default close button is not always wanted. Also, the window.hisory.back() is always wanted. Now users can do whatever they want. --- js/jquery.mobile.dialog.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/js/jquery.mobile.dialog.js b/js/jquery.mobile.dialog.js index 165be0d9379..c58b56b1c32 100644 --- a/js/jquery.mobile.dialog.js +++ b/js/jquery.mobile.dialog.js @@ -9,11 +9,13 @@ $.widget( "mobile.dialog", $.mobile.widget, { closeBtnText : "Close", overlayTheme : "a", initSelector : ":jqmData(role='dialog')" + iconpos : "notext", + includeCloseBtn : true }, _create: function() { var self = this, $el = this.element, - headerCloseButton = $( ""+ this.options.closeBtnText + "" ); + headerCloseButton = $( ""+ this.options.closeBtnText + "" ); $el.addClass( "ui-overlay-" + this.options.overlayTheme ); @@ -23,7 +25,7 @@ $.widget( "mobile.dialog", $.mobile.widget, { .addClass( "ui-dialog" ) .find( ":jqmData(role='header')" ) .addClass( "ui-corner-top ui-overlay-shadow" ) - .prepend( headerCloseButton ) + .prepend( this.options.includeCloseBtn ? headerCloseButton : "" ) .end() .find( ":jqmData(role='content'),:jqmData(role='footer')" ) .addClass( "ui-overlay-shadow" ) From f121418a977187b5ffb365656dee1e1422e32aab Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 13 Dec 2011 14:48:36 +0200 Subject: [PATCH 2/2] Document new dialog options. data-include-close-btn and data-iconpos and include examples. --- docs/api/data-attributes.html | 8 ++++++++ docs/pages/page-dialogs.html | 19 +++++++++++++++---- 2 files changed, 23 insertions(+), 4 deletions(-) diff --git a/docs/api/data-attributes.html b/docs/api/data-attributes.html index 9ed5ab0fc1d..4d6c15e53c2 100644 --- a/docs/api/data-attributes.html +++ b/docs/api/data-attributes.html @@ -141,6 +141,14 @@

Dialog

data-title string (title used when page is shown) + + data-include-close-btn + true | false + + + data-iconpos + left | right | top | bottom | notext | none +

Content

diff --git a/docs/pages/page-dialogs.html b/docs/pages/page-dialogs.html index 73138f3bd54..d1ebfdc726f 100755 --- a/docs/pages/page-dialogs.html +++ b/docs/pages/page-dialogs.html @@ -52,10 +52,21 @@

Transitions

Closing dialogs

When any link is clicked within in a dialog, the framework will automatically close the dialog and transition to the requested page, just as if the dialog were a normal page. To create a "cancel" button in a dialog, just link to the page that triggered the dialog to open and add the data-rel="back" attribute to your link. This pattern of linking to the previous page is also usable in non-JS devices as well.

For JavaScript-generated links, you can simply set the href attribute to "#" and use the data-rel="back" attribute. You can also call the dialog's close() method to programmatically close dialogs, for example: $('.ui-dialog').dialog('close').

- -

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.

- + +

The close button

+

By default dialogs are automatically given an icon only close button if the dialog has a header. Clicking this button triggers the dialogs close function and is identical to clicking the browsers back button. If you prefer to not have the close button or prefer to create your own there is a data attribute data-include-close-btn that configures if the button should be automatically added.

+ + + <div data-role="page" id="popup" data-include-close-btn="false"> + + +

Setting the close button text and icon position

+

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. Additionally you can configure the icon position using the data-iconpos attribute. By default the iconpos attribute is set to "notext" and the button text will not be visible. Setting the iconpos to "none" will create a text only button.

+ + + <div data-role="page" id="popup" data-iconpos="left" data-close-btn-text="Nevermind"> + +

History & Back button behavior

Since dialogs are typically used to support actions within a page, the framework does not include dialogs in the hash state history tracking. This means that dialogs will not appear in your browsing history chronology when the Back button is clicked. For example, if you are on a page, click a link to open a dialog, close the dialog, then navigate to another page, if you were to click the browser's Back button at that point you will navigate back to the first page, not the dialog.