diff --git a/docs/api/data-attributes.html b/docs/api/data-attributes.html index 75a7dc09..67b441d7 100644 --- a/docs/api/data-attributes.html +++ b/docs/api/data-attributes.html @@ -109,12 +109,37 @@ swatch letter (a-z) - Sets all collapsibles in set - +

Dialog

+

Container with data-role="page" or "dialog" linked to with data-rel="dialog" on the anchor.

+ + + + + + + + + + + + + + + + - + + + + + + + + +
data-close-btn-textstring (text for the close button, dialog only)
data-dom-cachetrue | false
data-idstring (unique id for the page)
data-fullscreentrue | false (used in conjunction with fixed toolbars)
data-overlay-themeswatch letter (a-z) - overlay themeswatch letter (a-z) - overlay theme when the page is opened in a dialog
data-themeswatch letter (a-z)
data-titlestring (title used when page is shown)
@@ -280,7 +305,7 @@

Page

-

Container with data-role="page" or "dialog"

+

Container with data-role="page"

@@ -407,7 +432,6 @@
  • Configuring defaults
  • Events
  • Methods & Utilities
    • -
  • Responsive layout
  • Data attribute reference
  • Theme framework
    • diff --git a/docs/forms/selects/index.html b/docs/forms/selects/index.html index 7ae82e53..894bd61a 100644 --- a/docs/forms/selects/index.html +++ b/docs/forms/selects/index.html @@ -583,18 +583,85 @@ $.mobile.selectmenu.prototype.options.hidePlaceholderMenuItems = false; -

    Styling with data attributes

    +

    Theming selects

    You can specify any jQuery Mobile button data- attribute on a select element, too. In this example, we're setting the theme, icon and inline properties:

    -
    - +

    The data-overlay-theme attribute can be added a select element to set the color of the overlay layer that the dialog-based custom select menus and the outer border of the smaller custom menus. By default, the content block colors for swatch A will be used for the overlays.

    + +
    + + +
    + +
    + + +
    +

    Calling the select menu plugin

    The select menu plugin will auto initialize on any page that contains a select menu, no need for a data-role attribute in the markup. However, you can directly call the select menu plugin on any selector, just like any normal jQuery plugin:

    diff --git a/docs/pages/dialog-overlay.html b/docs/pages/dialog-overlay.html new file mode 100644 index 00000000..41bff2f9 --- /dev/null +++ b/docs/pages/dialog-overlay.html @@ -0,0 +1,37 @@ + + + + + + jQuery Mobile Framework - Dialog Example + + + + + + + + + +
    +
    +

    Dialog

    +
    + +
    +

    Custom overlay

    +

    This dialog adds data-overlay-theme="e" to the page container to set the overlay swatch color.

    + I like it +
    + +
    +
    + + + +
    +
    + + + + \ No newline at end of file diff --git a/docs/pages/page-dialogs.html b/docs/pages/page-dialogs.html index 4a5118b1..e3dfc396 100755 --- a/docs/pages/page-dialogs.html +++ b/docs/pages/page-dialogs.html @@ -60,21 +60,29 @@

    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.

    Styling & theming

    -

    Dialogs can be styled with different themes, just like any page. Here is a different dialog design:

    +

    Dialogs can be styled with different theme swatches, just like any page by adding data-theme attributes to the header, content, or footer containers. Here is an example of a different dialog design:

    An alternate color scheme + +

    Dialogs appear float above an overlay layer. This overlay adopts the swatch A content color by default, but the data-overlay-theme attribute can be added to the page wrapper to set the overlay to any swatch letter. Here is an example of a dialog with the overlay set to swatch e:

    + Custom overlay swatch

    And dialogs can be can used more like a control sheet to offer multiple buttons by removing the header:

    Share photos... -

    For the sake of readability, dialogs have a default max-width of 500 pixels (plus 15px padding on each side). To override this, use the following CSS in your theme:

    +

    Dialog width and margins

    +

    For the sake of readability, dialogs have a default max-width of 500 pixels (plus 15px padding on each side). There is also a 10% top margin to give dialogs larger top margin on larger screens, but collapse to a small margin on smartphones. To override these styles, add the following CSS override rule to your stylesheet and tweak as needed:

    - -.ui-dialog .ui-header, -.ui-dialog .ui-content, -.ui-dialog .ui-footer { max-width: 100%; } - +
    +.ui-dialog .ui-header, 
+.ui-dialog .ui-content, 
+.ui-dialog .ui-footer { 
+	max-width: 500px; 
+	margin: 10% auto 15px auto; 
+}
+
     + diff --git a/docs/toolbars/docs-headers.html b/docs/toolbars/docs-headers.html index b20eebb3..c9ef4764 100644 --- a/docs/toolbars/docs-headers.html +++ b/docs/toolbars/docs-headers.html @@ -169,7 +169,7 @@
  • Navbars
  • Fixed positioning
  • Fullscreen positioning
    • -
  • Persistent footer nav bar
    • +
  • Persistent footer navbar
  • Theming toolbars
    • diff --git a/experiments/scrollview/scrollview.js b/experiments/scrollview/scrollview.js index f033c784..cac968ed 100644 --- a/experiments/scrollview/scrollview.js +++ b/experiments/scrollview/scrollview.js @@ -1,8 +1,8 @@ function ResizePageContentHeight(page) { var $page = $(page), $content = $page.children( ".ui-content" ), - hh = $page.children( ".ui-header" ).outerHeight() : 0, - fh = $page.children( ".ui-footer" ).outerHeight() : 0, + hh = $page.children( ".ui-header" ).outerHeight() || 0, + fh = $page.children( ".ui-footer" ).outerHeight() || 0, pt = parseFloat($content.css( "padding-top" )), pb = parseFloat($content.css( "padding-bottom" )), wh = window.innerHeight; diff --git a/js/jquery.mobile.forms.select.custom.js b/js/jquery.mobile.forms.select.custom.js index 2bccb6ab..7ca8ed14 100644 --- a/js/jquery.mobile.forms.select.custom.js +++ b/js/jquery.mobile.forms.select.custom.js @@ -24,7 +24,7 @@ "
    "+ "" ).appendTo( $.mobile.pageContainer ).page(), - listbox = $("
    ", { "class": "ui-selectmenu ui-selectmenu-hidden ui-overlay-shadow ui-corner-all ui-overlay-" + widget.options.overlayTheme + " " + $.mobile.defaultDialogTransition } ).insertAfter(screen), + listbox = $("
    ", { "class": "ui-selectmenu ui-selectmenu-hidden ui-overlay-shadow ui-corner-all ui-body-" + widget.options.overlayTheme + " " + $.mobile.defaultDialogTransition } ).insertAfter(screen), list = $( "
    data-close-btn-text
    ", { + id: avg.point, + "data-pathname": avg.pathname + }); + + $table.append( ""); + $table.append( "" ); + $table.append( "" ); + } + + // TODO assume time ordering in the data set + var $heading = $table.find("thead > tr > th:contains(" + avg.day + ")"); + + if( !$heading.length ) { + $heading = $("" ); + + $("#tables").append($table); + }); + + $("#tables table").visualize({ type: "line", width: 400, height: 400 }).appendTo("#graphs"); + }); + }); +})(jQuery); \ No newline at end of file
    " + avg.point + " " + avg.pathname + "
    ", { + text: avg.day, + scope: "column" + }); + + $table.find("thead > tr").append($heading); + } + + var $rowHeading = $table.find("tbody > tr > th:contains(" + avg.point + ")" ), + $row = $table.find( "tbody > tr" ); + + if( !$rowHeading.length ) { + $rowHeading = $("", { + text: avg.point, + scope: "row" + }); + + $row.append( $rowHeading ); + } + + $row.append( "" + avg.avg_value + "