From ce34ece2571bb48716f1e1496998bd745fbac594 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Sun, 20 Feb 2011 12:12:01 -0500 Subject: [PATCH 01/51] namespaced data- attrs to $.mobile.ns (defaults to "jq-") throughout the JS --- js/jquery.mobile.buttonMarkup.js | 10 +-- js/jquery.mobile.collapsible.js | 4 +- js/jquery.mobile.core.js | 111 ++++++++++++++++++++++++ js/jquery.mobile.dialog.js | 10 +-- js/jquery.mobile.fixHeaderFooter.js | 8 +- js/jquery.mobile.forms.checkboxradio.js | 8 +- js/jquery.mobile.forms.select.js | 16 ++-- js/jquery.mobile.forms.textinput.js | 6 +- js/jquery.mobile.listview.filter.js | 4 +- js/jquery.mobile.listview.js | 2 +- js/jquery.mobile.navbar.js | 2 +- js/jquery.mobile.navigation.js | 10 +-- js/jquery.mobile.page.js | 24 ++--- 13 files changed, 163 insertions(+), 52 deletions(-) diff --git a/js/jquery.mobile.buttonMarkup.js b/js/jquery.mobile.buttonMarkup.js index a17de316..b5283089 100644 --- a/js/jquery.mobile.buttonMarkup.js +++ b/js/jquery.mobile.buttonMarkup.js @@ -63,7 +63,7 @@ $.fn.buttonMarkup = function( options ){ } el - .attr( "data-theme", o.theme ) + .attr( "data-" + $.mobile.ns + "theme", o.theme ) .addClass( buttonClass ); var wrap = ("" + @@ -84,19 +84,19 @@ $.fn.buttonMarkup.defaults = { var attachEvents = function() { $(".ui-btn:not(.ui-disabled)").live({ "touchstart mousedown": function() { - var theme = $(this).attr( "data-theme" ); + var theme = $(this).attr( "data-" + $.mobile.ns + "theme" ); $(this).removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-down-" + theme ); }, "touchmove touchend mouseup": function() { - var theme = $(this).attr( "data-theme" ); + var theme = $(this).attr( "data-" + $.mobile.ns + "theme" ); $(this).removeClass( "ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme ); }, "mouseover focus": function() { - var theme = $(this).attr( "data-theme" ); + var theme = $(this).attr( "data-" + $.mobile.ns + "theme" ); $(this).removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-hover-" + theme ); }, "mouseout blur": function() { - var theme = $(this).attr( "data-theme" ); + var theme = $(this).attr( "data-" + $.mobile.ns + "theme" ); $(this).removeClass( "ui-btn-hover-" + theme ).addClass( "ui-btn-up-" + theme ); } }); diff --git a/js/jquery.mobile.collapsible.js b/js/jquery.mobile.collapsible.js index e5305789..440dd830 100644 --- a/js/jquery.mobile.collapsible.js +++ b/js/jquery.mobile.collapsible.js @@ -21,7 +21,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, { collapsibleContain = $el.addClass('ui-collapsible-contain'), collapsibleHeading = $el.find(o.heading).eq(0), collapsibleContent = collapsibleContain.wrapInner('
').find('.ui-collapsible-content'), - collapsibleParent = $el.closest('[data-role="collapsible-set"]').addClass('ui-collapsible-set'); + collapsibleParent = $el.closest( "[data-" + $.mobile.ns + "role='collapsible-set']" ).addClass('ui-collapsible-set'); //replace collapsibleHeading if it's a legend if(collapsibleHeading.is('legend')){ @@ -121,7 +121,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, { .not( "> .ui-collapsible-contain .ui-collapsible-contain" ) .trigger( "collapse" ); }) - var set = collapsibleParent.find('[data-role=collapsible]') + var set = collapsibleParent.find( "[data-" + $.mobile.ns + "role=collapsible]" ) set.first() .find('a:eq(0)') diff --git a/js/jquery.mobile.core.js b/js/jquery.mobile.core.js index a26fec7e..e699478d 100644 --- a/js/jquery.mobile.core.js +++ b/js/jquery.mobile.core.js @@ -8,8 +8,12 @@ */ (function( $, window, undefined ) { + //jQuery.mobile configurable options $.extend( $.mobile, { + + //namespace used framework-wide for data-attrs, widget naming, and CSS classes + ns: "jq-", //define the url parameter used for referencing widget-generated sub-pages. //Translates to to example.html&ui-page=subpageIdentifier @@ -89,8 +93,79 @@ TAB: 9, UP: 38, WINDOWS: 91 // COMMAND + } + }); + + + //trigger mobileinit event - useful hook for configuring $.mobile settings before they're used + $( window.document ).trigger( "mobileinit" ); + + + //support conditions + //if device support condition(s) aren't met, leave things as they are -> a basic, usable experience, + //otherwise, proceed with the enhancements + if ( !$.mobile.gradeA() ) { + return; + } + + //extend data() to treat namespaced data-attrs the same as non-namespaced ones + var jqd = $.fn.data; + + $.fn.data = function( prop, value ){ + if( !value && !this.attr( "[data-" + prop + "]" ) && this.attr( "[data-" $.mobile.ns + prop + "]" ) ){ + prop = $.mobile.ns + prop; + return jqd.call( this, prop ); + } + }; + + //define vars for interal use + var $window = $(window), + $html = $( "html" ), + $head = $( "head" ), + + //loading div which appears during Ajax requests + //will not appear if $.mobile.loadingMessage is false + $loader = $.mobile.loadingMessage ? + $( "
" + + "" + + "

" + $.mobile.loadingMessage + "

" + + "
" ) + : undefined; + + + //add mobile, initial load "rendering" classes to docEl + $html.addClass( "ui-mobile ui-mobile-rendering" ); + + + //define & prepend meta viewport tag, if content is defined + $.mobile.metaViewportContent ? $( "", { name: "viewport", content: $.mobile.metaViewportContent}).prependTo( $head ) : undefined; + + + //expose some core utilities + $.extend($.mobile, { + + // turn on/off page loading message. + pageLoading: function ( done ) { + if ( done ) { + $html.removeClass( "ui-loading" ); + } else { + if( $.mobile.loadingMessage ){ + var activeBtn =$( "." + $.mobile.activeBtnClass ).first(); + + $loader + .appendTo( $.mobile.pageContainer ) + //position at y center (if scrollTop supported), above the activeBtn (if defined), or just 100px from top + .css( { + top: $.support.scrollTop && $(window).scrollTop() + $(window).height() / 2 || + activeBtn.length && activeBtn.offset().top || 100 + } ); + } + + $html.addClass( "ui-loading" ); + } }, + //scroll page vertically: scroll to 0 to hide iOS address bar, or pass a Y value silentScroll: function( ypos ) { ypos = ypos || 0; // prevent scrollstart and scrollstop events @@ -104,6 +179,42 @@ setTimeout(function() { $.event.special.scrollstart.enabled = true; }, 150 ); + }, + + // find and enhance the pages in the dom and transition to the first page. + initializePage: function(){ + //find present pages + var $pages = $( "[data-" + $.mobile.ns + "role='page']" ); + + //add dialogs, set data-url attrs + $pages.add( "[data-" + $.mobile.ns + "role='dialog']" ).each(function(){ + $(this).attr( "data-" + $.mobile.ns + "url", $(this).attr( "id" )); + }); + + //define first page in dom case one backs out to the directory root (not always the first page visited, but defined as fallback) + $.mobile.firstPage = $pages.first(); + + //define page container + $.mobile.pageContainer = $pages.first().parent().addClass( "ui-mobile-viewport" ); + + //cue page loading message + $.mobile.pageLoading(); + + // if hashchange listening is disabled or there's no hash deeplink, change to the first page in the DOM + if( !$.mobile.hashListeningEnabled || !$.mobile.path.stripHash( location.hash ) ){ + $.mobile.changePage( $.mobile.firstPage, false, true, false, true ); + } + // otherwise, trigger a hashchange to load a deeplink + else { + $window.trigger( "hashchange", [ true ] ); + } } }); + + //dom-ready inits + $($.mobile.initializePage); + + //window load event + //hide iOS browser chrome on load + $window.load( $.mobile.silentScroll ); })( jQuery, this ); diff --git a/js/jquery.mobile.dialog.js b/js/jquery.mobile.dialog.js index 46f0b635..a1c9b6da 100644 --- a/js/jquery.mobile.dialog.js +++ b/js/jquery.mobile.dialog.js @@ -16,14 +16,14 @@ $.widget( "mobile.dialog", $.mobile.widget, { //add ARIA role .attr("role","dialog") .addClass('ui-page ui-dialog ui-body-a') - .find('[data-role=header]') + .find( "[data-" + $.mobile.ns + "role=header]" ) .addClass('ui-corner-top ui-overlay-shadow') - .prepend( 'Close' ) + .prepend( "Close" ) .end() .find('.ui-content:not([class*="ui-body-"])') .addClass('ui-body-c') .end() - .find('.ui-content,[data-role=footer]') + .find( ".ui-content,[data-" + $.mobile.ns + "role='footer']" ) .last() .addClass('ui-corner-bottom ui-overlay-shadow'); @@ -44,8 +44,8 @@ $.widget( "mobile.dialog", $.mobile.widget, { if( $targetel.length && !$targetel.data("transition") ){ $targetel - .attr("data-transition", $.mobile.urlHistory.getActive().transition ) - .attr("data-direction", "reverse"); + .attr("data-" + $.mobile.ns + "transition", $.mobile.urlHistory.getActive().transition ) + .attr("data-" + $.mobile.ns + "direction", "reverse"); } }); diff --git a/js/jquery.mobile.fixHeaderFooter.js b/js/jquery.mobile.fixHeaderFooter.js index 8273509a..e1ac3fe9 100644 --- a/js/jquery.mobile.fixHeaderFooter.js +++ b/js/jquery.mobile.fixHeaderFooter.js @@ -12,8 +12,8 @@ $.fn.fixHeaderFooter = function(options){ var $this = $(this); if( $this.data('fullscreen') ){ $this.addClass('ui-page-fullscreen'); } - $this.find('.ui-header[data-position="fixed"]').addClass('ui-header-fixed ui-fixed-inline fade'); //should be slidedown - $this.find('.ui-footer[data-position="fixed"]').addClass('ui-footer-fixed ui-fixed-inline fade'); //should be slideup + $this.find ".ui-header[data-" + $.mobile.ns + "position='fixed']" ).addClass('ui-header-fixed ui-fixed-inline fade'); //should be slidedown + $this.find( ".ui-footer[data-" + $.mobile.ns + "position='fixed']" ).addClass('ui-footer-fixed ui-fixed-inline fade'); //should be slideup }); }; @@ -104,12 +104,12 @@ $.fixedToolbars = (function(){ //before page is shown, check for duplicate footer $('.ui-page').live('pagebeforeshow', function(event, ui){ var page = $(event.target), - footer = page.find('[data-role="footer"]:not(.ui-sticky-footer)'), + footer = page.find( "[data-" + $.mobile.ns + "role='footer']:not(.ui-sticky-footer)" ), id = footer.data('id'); stickyFooter = null; if (id) { - stickyFooter = $('.ui-footer[data-id="' + id + '"].ui-sticky-footer'); + stickyFooter = $( ".ui-footer[data-" + $.mobile.ns + "id='" + id + "'].ui-sticky-footer" ); if (stickyFooter.length == 0) { // No sticky footer exists for this data-id. We'll use this // footer as the sticky footer for the group and then create diff --git a/js/jquery.mobile.forms.checkboxradio.js b/js/jquery.mobile.forms.checkboxradio.js index 18d14d98..a2ae9f3d 100644 --- a/js/jquery.mobile.forms.checkboxradio.js +++ b/js/jquery.mobile.forms.checkboxradio.js @@ -12,7 +12,7 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, { _create: function(){ var self = this, input = this.element, - label = input.closest("form,fieldset,[data-role='page']").find("label[for='" + input.attr( "id" ) + "']"), + label = input.closest("form,fieldset,[data-" + $.mobile.ns + "role='page']").find("label[for='" + input.attr( "id" ) + "']"), inputtype = input.attr( "type" ), checkedicon = "ui-icon-" + inputtype + "-on", uncheckedicon = "ui-icon-" + inputtype + "-off"; @@ -27,7 +27,7 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, { label .buttonMarkup({ theme: this.options.theme, - icon: this.element.parents( "[data-type='horizontal']" ).length ? undefined : uncheckedicon, + icon: this.element.parents( "[data-" + $.mobile.ns + "type='horizontal']" ).length ? undefined : uncheckedicon, shadow: false }); @@ -110,7 +110,7 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, { //returns either a set of radios with the same name attribute, or a single checkbox _getInputSet: function(){ - return this.element.closest( "form,fieldset,[data-role='page']" ) + return this.element.closest( "form,fieldset,[data-" + $.mobile.ns + "role='page']" ) .find( "input[name='"+ this.element.attr( "name" ) +"'][type='"+ this.element.attr( "type" ) +"']" ); }, @@ -126,7 +126,7 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, { refresh: function( ){ var input = this.element, - label = input.closest("form,fieldset,[data-role='page']").find("label[for='" + input.attr( "id" ) + "']"), + label = input.closest("form,fieldset,[data-" + $.mobile.ns + "role='page']").find("label[for='" + input.attr( "id" ) + "']"), inputtype = input.attr( "type" ), icon = label.find( ".ui-icon" ), checkedicon = "ui-icon-" + inputtype + "-on", diff --git a/js/jquery.mobile.forms.select.js b/js/jquery.mobile.forms.select.js index 508d1d2f..f54b7ad8 100644 --- a/js/jquery.mobile.forms.select.js +++ b/js/jquery.mobile.forms.select.js @@ -77,11 +77,11 @@ $.widget( "mobile.selectmenu", $.mobile.widget, { //button theme theme = /ui-btn-up-([a-z])/.exec( button.attr("class") )[1], - menuPage = $( "
" + - "
" + + menuPage = $( "
" + + "
" + "
" + label.text() + "
"+ "
"+ - "
"+ + "
"+ "
" ) .appendTo( $.mobile.pageContainer ) .page(), @@ -101,7 +101,7 @@ $.widget( "mobile.selectmenu", $.mobile.widget, { "id": menuId, "role": "listbox", "aria-labelledby": buttonId, - "data-theme": theme + "data-" + $.mobile.ns + "theme": theme }) .appendTo( listbox ), @@ -116,8 +116,8 @@ $.widget( "mobile.selectmenu", $.mobile.widget, { .appendTo( header ), headerClose = $( "", { - "data-iconpos": "notext", - "data-icon": "delete", + "data-" + $.mobile.ns + "iconpos": "notext", + "data-" + $.mobile.ns + "icon": "delete", "text": o.closeText, "href": "#", "class": "ui-btn-left" @@ -307,7 +307,7 @@ $.widget( "mobile.selectmenu", $.mobile.widget, { // has this optgroup already been built yet? if( $.inArray(optLabel, optgroups) === -1 ){ - lis.push( "
  • "+ optLabel +"
  • " ); + lis.push( "
  • "+ optLabel +"
  • " ); optgroups.push( optLabel ); } } @@ -326,7 +326,7 @@ $.widget( "mobile.selectmenu", $.mobile.widget, { extraAttrs.push( "aria-disabled='true'" ); } - lis.push( "
  • "+ anchor +"
  • " ) + lis.push( "
  • "+ anchor +"
  • " ) }); self.list.html( lis.join(" ") ); diff --git a/js/jquery.mobile.forms.textinput.js b/js/jquery.mobile.forms.textinput.js index 371894dc..254777e7 100644 --- a/js/jquery.mobile.forms.textinput.js +++ b/js/jquery.mobile.forms.textinput.js @@ -31,7 +31,7 @@ $.widget( "mobile.textinput", $.mobile.widget, { var focusedEl = input; //"search" input widget - if( input.is('[type="search"],[data-type="search"]') ){ + if( input.is( "[type='search'],[data-" + $.mobile.ns + "type='search']" ) ){ focusedEl = input.wrap('').parent(); var clearbtn = $('
    clear text') .tap(function( e ){ @@ -87,11 +87,11 @@ $.widget( "mobile.textinput", $.mobile.widget, { }, disable: function(){ - ( this.element.attr("disabled",true).is('[type="search"],[data-type="search"]') ? this.element.parent() : this.element ).addClass("ui-disabled"); + ( this.element.attr("disabled",true).is( "[type='search'],[data-" + $.mobile.ns + "type='search']" ) ? this.element.parent() : this.element ).addClass("ui-disabled"); }, enable: function(){ - ( this.element.attr("disabled", false).is('[type="search"],[data-type="search"]') ? this.element.parent() : this.element ).removeClass("ui-disabled"); + ( this.element.attr("disabled", false).is( "[type='search'],[data-" + $.mobile.ns + "type='search']" ) ? this.element.parent() : this.element ).removeClass("ui-disabled"); } }); })( jQuery ); diff --git a/js/jquery.mobile.listview.filter.js b/js/jquery.mobile.listview.filter.js index 5b419b75..56ed6999 100644 --- a/js/jquery.mobile.listview.filter.js +++ b/js/jquery.mobile.listview.filter.js @@ -8,7 +8,7 @@ $.mobile.listview.prototype.options.filter = false; -$( "[data-role='listview']" ).live( "listviewcreate", function() { +$( "[data-" + $.mobile.ns + "role='listview']" ).live( "listviewcreate", function() { var list = $( this ), listview = list.data( "listview" ); if ( !listview.options.filter ) { @@ -19,7 +19,7 @@ $( "[data-role='listview']" ).live( "listviewcreate", function() { search = $( "", { placeholder: "Filter results...", - "data-type": "search" + "data-" + $.mobile.ns + "type": "search" }) .bind( "keyup change", function() { var val = this.value.toLowerCase(), diff --git a/js/jquery.mobile.listview.js b/js/jquery.mobile.listview.js index 0ceb6fd5..c5dacf1a 100644 --- a/js/jquery.mobile.listview.js +++ b/js/jquery.mobile.listview.js @@ -299,7 +299,7 @@ $.widget( "mobile.listview", $.mobile.widget, { parentId = parentPage.data( "url" ), o = this.options, self = this, - persistentFooterID = parentPage.find( "[data-role='footer']" ).data( "id" ); + persistentFooterID = parentPage.find( "[data-" + $.mobile.ns + "role='footer']" ).data( "id" ); $( parentList.find( "ul, ol" ).toArray().reverse() ).each(function( i ) { var list = $( this ), diff --git a/js/jquery.mobile.navbar.js b/js/jquery.mobile.navbar.js index 13f0da8d..c2a3a458 100755 --- a/js/jquery.mobile.navbar.js +++ b/js/jquery.mobile.navbar.js @@ -13,7 +13,7 @@ $.widget( "mobile.navbar", $.mobile.widget, { _create: function(){ var $navbar = this.element, $navbtns = $navbar.find("a"), - iconpos = $navbtns.filter('[data-icon]').length ? this.options.iconpos : undefined; + iconpos = $navbtns.filter( "[data-" + $.mobile.ns + "icon]").length ? this.options.iconpos : undefined; $navbar .addClass('ui-navbar') diff --git a/js/jquery.mobile.navigation.js b/js/jquery.mobile.navigation.js index 2d1630a3..d1a055ad 100644 --- a/js/jquery.mobile.navigation.js +++ b/js/jquery.mobile.navigation.js @@ -364,7 +364,7 @@ //support deep-links to generated sub-pages if( url.indexOf( "&" + $.mobile.subPageUrlKey ) > -1 ){ - to = $( "[data-url='" + url + "']" ); + to = $( "[data-" + $.mobile.ns + "url='" + url + "']" ); } if( from ){ @@ -473,7 +473,7 @@ if ( nextPageRole || to.data('role') === 'dialog' ) { url = urlHistory.getActive().url + dialogHashKey; if(nextPageRole){ - to.attr( "data-role", nextPageRole ); + to.attr( "data-" + $.mobile.ns + "role", nextPageRole ); nextPageRole = null; } } @@ -484,11 +484,11 @@ //if url is a string if( url ){ - to = $( "[data-url='" + url + "']" ); + to = $( "[data-" + $.mobile.ns + "url='" + url + "']" ); fileUrl = path.getFilePath(url); } else{ //find base url of element, if avail - var toID = to.attr('data-url'), + var toID = to.attr('data-" + $.mobile.ns + "url'), toIDfileurl = path.getFilePath(toID); if(toID !== toIDfileurl){ @@ -527,7 +527,7 @@ redirectLoc, // TODO handle dialogs again pageElemRegex = /.*(<[^>]*\bdata-role=["']?page["']?[^>]*>).*/, - dataUrlRegex = /\bdata-url=["']?([^"'>]*)["']?/; + dataUrlRegex = new RegExp("\bdata-" + $.mobile.ns + "url=[\"']?([^\"'>]*)[\"']?"); // data-url must be provided for the base tag so resource requests can be directed to the // correct url. loading into a temprorary element makes these requests immediately diff --git a/js/jquery.mobile.page.js b/js/jquery.mobile.page.js index a0caaa68..b98f5eeb 100644 --- a/js/jquery.mobile.page.js +++ b/js/jquery.mobile.page.js @@ -32,7 +32,7 @@ $.widget( "mobile.page", $.mobile.widget, { var $elem = this.element, o = this.options; - this.keepNative = "[data-role='none'], [data-role='nojs']" + (o.keepNative ? ", " + o.keepNative : ""); + this.keepNative = "[data-" + $.mobile.ns + "role='none'], [data-" + $.mobile.ns + "role='nojs']" + (o.keepNative ? ", " + o.keepNative : ""); if ( this._trigger( "beforeCreate" ) === false ) { return; @@ -41,21 +41,21 @@ $.widget( "mobile.page", $.mobile.widget, { //some of the form elements currently rely on the presence of ui-page and ui-content // classes so we'll handle page and content roles outside of the main role processing // loop below. - $elem.find( "[data-role='page'], [data-role='content']" ).andSelf().each(function() { - $(this).addClass( "ui-" + $(this).data( "role" ) ); + $elem.find( "[data-" + $.mobile.ns + "role='page'], [data-" + $.mobile.ns + "role='content']" ).andSelf().each(function() { + $(this).addClass( "ui-" + $.mobile.ns + $(this).data( "role" ) ); }); - $elem.find( "[data-role='nojs']" ).addClass( "ui-nojs" ); + $elem.find( "[data-" + $.mobile.ns + "role='nojs']" ).addClass( "ui-nojs" ); // pre-find data els - var $dataEls = $elem.find( "[data-role]" ).andSelf().each(function() { + var $dataEls = $elem.find( "[data-" + $.mobile.ns + "role]" ).andSelf().each(function() { var $this = $( this ), role = $this.data( "role" ), theme = $this.data( "theme" ); //apply theming and markup modifications to page,header,content,footer if ( role === "header" || role === "footer" ) { - $this.addClass( "ui-bar-" + (theme || $this.parent('[data-role=page]').data( "theme" ) || "a") ); + $this.addClass( "ui-bar-" + (theme || $this.parent( "[data-" + $.mobile.ns + "role='page']" ).data( "theme" ) || "a") ); // add ARIA role $this.attr( "role", role === "header" ? "banner" : "contentinfo" ); @@ -79,7 +79,7 @@ $.widget( "mobile.page", $.mobile.widget, { $elem.data( "url" ) !== $.mobile.path.stripHash( location.hash ) && !leftbtn && $this.data( "backbtn" ) !== false ) { - $( ""+ o.backBtnText +"" ).prependTo( $this ); + $( ""+ o.backBtnText +"" ).prependTo( $this ); } //page title @@ -121,13 +121,13 @@ $.widget( "mobile.page", $.mobile.widget, { this._enhanceControls(); //links in bars, or those with data-role become buttons - $elem.find( "[data-role='button'], .ui-bar > a, .ui-header > a, .ui-footer > a" ) + $elem.find( "[data-" + $.mobile.ns + "role='button'], .ui-bar > a, .ui-header > a, .ui-footer > a" ) .not( ".ui-btn" ) .not(this.keepNative) .buttonMarkup(); $elem - .find("[data-role='controlgroup']") + .find("[data-" + $.mobile.ns + "role='controlgroup']") .controlgroup(); //links within content areas @@ -150,7 +150,7 @@ $.widget( "mobile.page", $.mobile.widget, { if ( o.degradeInputs[ type ] ) { $( this ).replaceWith( $( "
    " ).html( $(this).clone() ).html() - .replace( /type="([a-zA-Z]+)"/, "type="+ optType +" data-type='$1'" ) ); + .replace( /type="([a-zA-Z]+)"/, "type="+ optType +" data-" + $.mobile.ns + "type='$1'" ) ); } }); @@ -192,11 +192,11 @@ $.widget( "mobile.page", $.mobile.widget, { nonNativeControls .filter( "input, select" ) - .filter( "[data-role='slider'], [data-type='range']" ) + .filter( "[data-" + $.mobile.ns + "role='slider'], [data-" + $.mobile.ns + "type='range']" ) .slider(); nonNativeControls - .filter( "select:not([data-role='slider'])" ) + .filter( "select:not([data-" + $.mobile.ns + "role='slider'])" ) .selectmenu(); } }); From 2e7ee89ec397c115c8350a36d7d10a95531c6bb4 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Sun, 20 Feb 2011 13:43:02 -0500 Subject: [PATCH 02/51] updated attr lookups to use namespace --- js/jquery.mobile.fixHeaderFooter.js | 2 +- js/jquery.mobile.forms.select.js | 8 +++--- js/jquery.mobile.listview.filter.js | 4 +-- js/jquery.mobile.navigation.js | 42 ++++++++--------------------- 4 files changed, 18 insertions(+), 38 deletions(-) diff --git a/js/jquery.mobile.fixHeaderFooter.js b/js/jquery.mobile.fixHeaderFooter.js index e1ac3fe9..d82dd63f 100644 --- a/js/jquery.mobile.fixHeaderFooter.js +++ b/js/jquery.mobile.fixHeaderFooter.js @@ -12,7 +12,7 @@ $.fn.fixHeaderFooter = function(options){ var $this = $(this); if( $this.data('fullscreen') ){ $this.addClass('ui-page-fullscreen'); } - $this.find ".ui-header[data-" + $.mobile.ns + "position='fixed']" ).addClass('ui-header-fixed ui-fixed-inline fade'); //should be slidedown + $this.find( ".ui-header[data-" + $.mobile.ns + "position='fixed']" ).addClass('ui-header-fixed ui-fixed-inline fade'); //should be slidedown $this.find( ".ui-footer[data-" + $.mobile.ns + "position='fixed']" ).addClass('ui-footer-fixed ui-fixed-inline fade'); //should be slideup }); }; diff --git a/js/jquery.mobile.forms.select.js b/js/jquery.mobile.forms.select.js index f54b7ad8..0c1af717 100644 --- a/js/jquery.mobile.forms.select.js +++ b/js/jquery.mobile.forms.select.js @@ -100,9 +100,9 @@ $.widget( "mobile.selectmenu", $.mobile.widget, { "class": "ui-selectmenu-list", "id": menuId, "role": "listbox", - "aria-labelledby": buttonId, - "data-" + $.mobile.ns + "theme": theme + "aria-labelledby": buttonId }) + .attr( "data-" + $.mobile.ns + "theme", theme ) .appendTo( listbox ), header = $( "
    ", { @@ -116,12 +116,12 @@ $.widget( "mobile.selectmenu", $.mobile.widget, { .appendTo( header ), headerClose = $( "", { - "data-" + $.mobile.ns + "iconpos": "notext", - "data-" + $.mobile.ns + "icon": "delete", "text": o.closeText, "href": "#", "class": "ui-btn-left" }) + .attr( "data-" + $.mobile.ns + "iconpos", "notext" ) + .attr( "data-" + $.mobile.ns + "icon", "delete" ) .appendTo( header ) .buttonMarkup(), diff --git a/js/jquery.mobile.listview.filter.js b/js/jquery.mobile.listview.filter.js index 56ed6999..be385eeb 100644 --- a/js/jquery.mobile.listview.filter.js +++ b/js/jquery.mobile.listview.filter.js @@ -18,9 +18,9 @@ $( "[data-" + $.mobile.ns + "role='listview']" ).live( "listviewcreate", functio var wrapper = $( "
    ", { "class": "ui-listview-filter ui-bar-c", "role": "search" } ), search = $( "", { - placeholder: "Filter results...", - "data-" + $.mobile.ns + "type": "search" + placeholder: "Filter results..." }) + .attr( "data-" + $.mobile.ns + "type", "search" ) .bind( "keyup change", function() { var val = this.value.toLowerCase(), listItems = list.children(); diff --git a/js/jquery.mobile.navigation.js b/js/jquery.mobile.navigation.js index d1a055ad..778d5b09 100644 --- a/js/jquery.mobile.navigation.js +++ b/js/jquery.mobile.navigation.js @@ -178,7 +178,7 @@ //set the generated BASE element's href attribute to a new page's base path set: function( href ){ - base.element.attr('href', docBase + path.get( href ).replace(/^\//, "")); + base.element.attr('href', docBase + path.get( href )); }, //set the generated BASE element's href attribute to a new page's base path @@ -225,7 +225,6 @@ else{ // defer execution for consistency between webkit/non webkit setTimeout(callback, 0); - return $(this); } }; @@ -288,25 +287,20 @@ // guess if it came from the history menu if( fromHashChange ){ - // determine new page index - var newActiveIndex; - // check if url is in history and if it's ahead or behind current page $.each( urlHistory.stack, function( i ){ //if the url is in the stack, it's a forward or a back if( this.url === url ){ + urlIndex = i; //define back and forward by whether url is older or newer than current page back = i < urlHistory.activeIndex; //forward set to opposite of back forward = !back; //reset activeIndex to this one - newActiveIndex = i; + urlHistory.activeIndex = i; } }); - // save new page index - urlHistory.activeIndex = newActiveIndex !== undefined ? newActiveIndex : urlHistory.activeIndex; - //if it's a back, use reverse animation if( back ){ reverse = true; @@ -488,7 +482,7 @@ fileUrl = path.getFilePath(url); } else{ //find base url of element, if avail - var toID = to.attr('data-" + $.mobile.ns + "url'), + var toID = to.attr( "data-" + $.mobile.ns + "url" ), toIDfileurl = path.getFilePath(toID); if(toID !== toIDfileurl){ @@ -519,14 +513,13 @@ url: fileUrl, type: type, data: data, - dataType: "html", success: function( html ) { //pre-parse html to check for a data-url, //use it as the new fileUrl, base path, etc var all = $("
    "), redirectLoc, // TODO handle dialogs again - pageElemRegex = /.*(<[^>]*\bdata-role=["']?page["']?[^>]*>).*/, + pageElemRegex = new RegExp(".*(<[^>]*\bdata-" + $.mobile.ns + "role=[\"']?page[\"']?[^>]*>).*"), dataUrlRegex = new RegExp("\bdata-" + $.mobile.ns + "url=[\"']?([^\"'>]*)[\"']?"); // data-url must be provided for the base tag so resource requests can be directed to the @@ -549,7 +542,7 @@ //workaround to allow scripts to execute when included in page divs all.get(0).innerHTML = html; - to = all.find('[data-role="page"], [data-role="dialog"]').first(); + to = all.find( "[data-" + $.mobile.ns + "role='page'], [data-" + $.mobile.ns + "role='dialog']" ).first(); //rewrite src and href attrs to use a base url if( !$.support.dynamicBaseTag ){ @@ -569,7 +562,7 @@ //append to page and enhance to - .attr( "data-url", fileUrl ) + .attr( "data-" + $.mobile.ns + "url", fileUrl ) .appendTo( $.mobile.pageContainer ); enhancePage(); @@ -656,24 +649,11 @@ hasTarget = $this.is( "[target]" ), //if data-ajax attr is set to false, use the default behavior of a link - hasAjaxDisabled = $this.is( "[data-ajax='false']" ); + hasAjaxDisabled = $this.is( "[data-" + $.mobile.ns + "ajax='false']" ); //if there's a data-rel=back attr, go back in history - if( $this.is( "[data-rel='back']" ) ){ - var currentIndex = $.mobile.urlHistory.activeIndex, backToIndex; - - // for each history entry that is not the current page (currentIndex - 1) - for(var i = currentIndex - 1; i >= 0; i--){ - backToIndex = i; - - // break when we've found the first page that isn't a dialog - if($.mobile.urlHistory.stack[i].url.indexOf(dialogHashKey) < 0 ){ - break; - } - } - - //use the difference between closest non dialog index and the current index - window.history.go(backToIndex - currentIndex); + if( $this.is( "[data-" + $.mobile.ns + "rel='back']" ) ){ + window.history.back(); return false; } @@ -711,7 +691,7 @@ $this.data( "back" ); //this may need to be more specific as we use data-rel more - nextPageRole = $this.attr( "data-rel" ); + nextPageRole = $this.attr( "data-" + $.mobile.ns + "rel" ); //if it's a relative href, prefix href with base url if( path.isRelative( url ) ){ From c7fe0480165806d24253ff3e88a853b547568d80 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Sun, 20 Feb 2011 13:43:18 -0500 Subject: [PATCH 03/51] updated to use namespaced data attrs --- experiments/themeswitcher/jquery.mobile.themeswitcher.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/experiments/themeswitcher/jquery.mobile.themeswitcher.js b/experiments/themeswitcher/jquery.mobile.themeswitcher.js index 594cf680..79e71c49 100644 --- a/experiments/themeswitcher/jquery.mobile.themeswitcher.js +++ b/experiments/themeswitcher/jquery.mobile.themeswitcher.js @@ -5,18 +5,18 @@ var themesDir = 'http://jquerymobile.com/test/themes/', themes = ['default','valencia'], currentPage = $.mobile.activePage, - menuPage = $( '
    ' + - '
    ' + + menuPage = $( '
    ' + + '
    ' + '
    Switch Theme:
    '+ '
    '+ - '
      '+ + '
        '+ '
        ' ) .appendTo( $.mobile.pageContainer ), menu = menuPage.find('ul'); //menu items $.each(themes, function( i ){ - $('
      • ' + themes[ i ].charAt(0).toUpperCase() + themes[ i ].substr(1) + '
      • ') + $('
      • ' + themes[ i ].charAt(0).toUpperCase() + themes[ i ].substr(1) + '
      • ') .click(function(){ addTheme( themes[i] ); return false; From cee4c617ba458b720a8c6013fa900798ba4c5fc2 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Sun, 20 Feb 2011 13:45:56 -0500 Subject: [PATCH 04/51] first pass at extending data() to either return a) if no arguments, return non-namespaced versions of any namespaced properties in the data hash, or b) if getting a data property, try getting the namespaced version if the first is undefined. If it's defined, return that instead --- js/jquery.mobile.core.js | 35 ++++++++++++++++++++++++++++++----- 1 file changed, 30 insertions(+), 5 deletions(-) diff --git a/js/jquery.mobile.core.js b/js/jquery.mobile.core.js index e699478d..3f70ae2b 100644 --- a/js/jquery.mobile.core.js +++ b/js/jquery.mobile.core.js @@ -12,7 +12,7 @@ //jQuery.mobile configurable options $.extend( $.mobile, { - //namespace used framework-wide for data-attrs, widget naming, and CSS classes + //namespace used framework-wide for data-attrs ns: "jq-", //define the url parameter used for referencing widget-generated sub-pages. @@ -112,11 +112,36 @@ var jqd = $.fn.data; $.fn.data = function( prop, value ){ - if( !value && !this.attr( "[data-" + prop + "]" ) && this.attr( "[data-" $.mobile.ns + prop + "]" ) ){ - prop = $.mobile.ns + prop; - return jqd.call( this, prop ); - } + var pu = prop === undefined, + vu = value === undefined; + + if( pu || vu ){ + var ret, + nsret; + //if no args are passed, a data hash is expected. Remap non-namespaced props + if( pu ){ + ret = jqd.call( this ); + $.each( ret, function( i ){ + var nsIndex = i.indexOf( $.mobile.ns ); + if( nsIndex == 0 ){ + ret[ i.substr( $.mobile.ns.length ) ] = ret[ i ]; + } + }); + } + //if it's a prop get, try namepaced version if prop is undefined + else if( vu ){ + ret = jqd.call( this, prop ); + if( ret === undefined ){ + nsret = jqd.call( this, $.mobile.ns + prop ); + if( nsret !== undefined ){ + ret = nsret; + } + } + } + return ret; + } }; + //define vars for interal use var $window = $(window), From d183cc591f21cd826fea9706222db464d3623b43 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Sun, 20 Feb 2011 13:46:23 -0500 Subject: [PATCH 05/51] applied data-jq- namespacing to all data attributes in docs --- docs/_assets/js/_viewsource.js | 10 +- docs/_assets/js/jqm-docs.js | 2 +- docs/about/accessibility.html | 8 +- docs/about/features.html | 8 +- docs/about/index.html | 12 +- docs/about/intro.html | 8 +- docs/about/platforms.html | 8 +- docs/api/events.html | 8 +- docs/api/globalconfig.html | 10 +- docs/api/index.html | 12 +- docs/api/mediahelpers.html | 8 +- docs/api/methods.html | 8 +- docs/api/themes.html | 114 ++++++------ docs/buttons/api-buttons.html | 8 +- docs/buttons/buttons-grouped.html | 48 ++--- docs/buttons/buttons-icons.html | 212 +++++++++++------------ docs/buttons/buttons-inline.html | 22 +-- docs/buttons/buttons-themes.html | 90 +++++----- docs/buttons/buttons-types.html | 12 +- docs/buttons/index.html | 10 +- docs/content/api-content.html | 6 +- docs/content/content-collapsible.html | 48 ++--- docs/content/content-grids.html | 22 +-- docs/content/content-html.html | 8 +- docs/content/content-themes.html | 32 ++-- docs/content/index.html | 10 +- docs/forms/api-forms.html | 8 +- docs/forms/docs-forms.html | 10 +- docs/forms/forms-all.html | 48 ++--- docs/forms/forms-checkboxes.html | 28 +-- docs/forms/forms-radiobuttons.html | 28 +-- docs/forms/forms-sample-response.php | 8 +- docs/forms/forms-sample.html | 12 +- docs/forms/forms-search.html | 16 +- docs/forms/forms-selects.html | 40 ++--- docs/forms/forms-slider.html | 16 +- docs/forms/forms-switch.html | 14 +- docs/forms/forms-text.html | 28 +-- docs/forms/forms-themes.html | 98 +++++------ docs/forms/index.html | 14 +- docs/forms/plugin-eventsmethods.html | 8 +- docs/index.html | 12 +- docs/lists/api-lists.html | 6 +- docs/lists/docs-lists.html | 34 ++-- docs/lists/index.html | 10 +- docs/lists/lists-count.html | 10 +- docs/lists/lists-divider.html | 36 ++-- docs/lists/lists-formatting.html | 18 +- docs/lists/lists-icons.html | 10 +- docs/lists/lists-inset.html | 22 +-- docs/lists/lists-nested.html | 10 +- docs/lists/lists-ol.html | 10 +- docs/lists/lists-performance.html | 10 +- docs/lists/lists-readonly.html | 10 +- docs/lists/lists-search.html | 10 +- docs/lists/lists-split-purchase.html | 10 +- docs/lists/lists-split.html | 32 ++-- docs/lists/lists-themes.html | 78 ++++----- docs/lists/lists-thumbnails.html | 10 +- docs/lists/lists-ul.html | 10 +- docs/pages/api-pages.html | 6 +- docs/pages/dialog-alt.html | 10 +- docs/pages/dialog-buttons.html | 14 +- docs/pages/dialog-success.html | 8 +- docs/pages/dialog.html | 10 +- docs/pages/docs-dialogs.html | 24 +-- docs/pages/docs-link-scenarios.html | 20 +-- docs/pages/docs-links-urltest/index.html | 6 +- docs/pages/docs-links.html | 8 +- docs/pages/docs-navmodel.html | 20 +-- docs/pages/docs-pages.html | 40 ++--- docs/pages/docs-transitions.html | 22 +-- docs/pages/index.html | 10 +- docs/pages/link-formats.html | 24 +-- docs/pages/multipage-template.html | 30 ++-- docs/pages/page-template.html | 8 +- docs/pages/pages-themes.html | 86 ++++----- docs/pages/transition-success.html | 8 +- docs/toolbars/api-bars.html | 6 +- docs/toolbars/bars-fixed.html | 16 +- docs/toolbars/bars-fullscreen.html | 10 +- docs/toolbars/bars-themes.html | 96 +++++----- docs/toolbars/docs-bars.html | 10 +- docs/toolbars/docs-footers.html | 48 ++--- docs/toolbars/docs-headers.html | 42 ++--- docs/toolbars/docs-navbar.html | 82 ++++----- docs/toolbars/footer-persist-a.html | 40 ++--- docs/toolbars/footer-persist-b.html | 36 ++-- docs/toolbars/footer-persist-c.html | 22 +-- docs/toolbars/index.html | 10 +- index.html | 16 +- 91 files changed, 1128 insertions(+), 1128 deletions(-) diff --git a/docs/_assets/js/_viewsource.js b/docs/_assets/js/_viewsource.js index bb5925e6..2e700bbd 100644 --- a/docs/_assets/js/_viewsource.js +++ b/docs/_assets/js/_viewsource.js @@ -2,14 +2,14 @@ $.fn.addSourceLink = function(style){ return $(this).each(function(){ - var link = $('View Source'), + var link = $('View Source'), src = src = $('
        ').append( $(this).clone() ).html(), - page = $( "
        " + - "
        " + - "Close"+ + page = $( "
        " + + "
        " + + "Close"+ "
        jQuery Mobile Source Excerpt
        "+ "
        "+ - "
        "+ + "
        "+ "
        " ) .appendTo( "body" ) .page(); diff --git a/docs/_assets/js/jqm-docs.js b/docs/_assets/js/jqm-docs.js index 72279730..4a25ca5e 100644 --- a/docs/_assets/js/jqm-docs.js +++ b/docs/_assets/js/jqm-docs.js @@ -1,7 +1,7 @@ //set up the theme switcher on the homepage $('div').live('pagecreate',function(event){ if( !$(this).is('.ui-dialog')){ - $('Switch theme') + $('Switch theme') .buttonMarkup({ 'icon':'gear', 'inline': true, diff --git a/docs/about/accessibility.html b/docs/about/accessibility.html index b5718a8e..846fbfbf 100755 --- a/docs/about/accessibility.html +++ b/docs/about/accessibility.html @@ -10,14 +10,14 @@ -
        +
        -
        +

        Accessibility

        - Home + Home
        -
        +

        Accessibility

        jQuery Mobile is built upon standard, semantic HTML, allowing pages to be accessible to the broadest range of devices possible. For A-Grade browsers, many of the components in jQuery Mobile leverage techniques such as focus management, keyboard navigation, and HTML attributes specified in the W3C's WAI-ARIA specification.

        diff --git a/docs/about/features.html b/docs/about/features.html index 21349ed2..7158a1e1 100755 --- a/docs/about/features.html +++ b/docs/about/features.html @@ -10,14 +10,14 @@ -
        +
        -
        +

        Features

        - Home + Home
        -
        +

        Key features:

          diff --git a/docs/about/index.html b/docs/about/index.html index da91a925..b87055d6 100755 --- a/docs/about/index.html +++ b/docs/about/index.html @@ -9,17 +9,17 @@ -
          +
          -
          +

          About jQuery Mobile

          - Home + Home
          -
          +
          -
            -
          • Overview
          • +
              +
            • Overview
            • Intro to jQuery Mobile
            • Features
            • Accessibility
            • diff --git a/docs/about/intro.html b/docs/about/intro.html index 2add1b62..63f5e903 100755 --- a/docs/about/intro.html +++ b/docs/about/intro.html @@ -10,14 +10,14 @@ -
              +
              -
              +

              Introduction

              - Home + Home
              -
              +

              jQuery Mobile Overview

              diff --git a/docs/about/platforms.html b/docs/about/platforms.html index 20e21c2f..dab1eebc 100755 --- a/docs/about/platforms.html +++ b/docs/about/platforms.html @@ -10,14 +10,14 @@ -
              +
              -
              +

              Supported platforms

              - Home + Home
              -
              +

              Supported platforms in alpha 3

              In the alpha 3 release, the following platforms and browsers have a solid jQuery Mobile experience with pages fully functional and rendering as designed. That being said, there are still a fair amount of bugs and performance improvements to be tackled before the 1.0 release.

              diff --git a/docs/api/events.html b/docs/api/events.html index 0eaeb4ef..870bb10c 100755 --- a/docs/api/events.html +++ b/docs/api/events.html @@ -10,14 +10,14 @@ -
              +
              -
              +

              Events

              - Home + Home
              -
              +

              jQuery Mobile offers several custom events that build upon native events to create useful hooks for development. Note that these events employ various touch, mouse, and window events, depending on event existence, so you can bind to them for use in both handheld and desktop environments. You can bind to these events like you would with other jQuery events, using live() or bind().

              diff --git a/docs/api/globalconfig.html b/docs/api/globalconfig.html index fcd8aa1a..b38549ca 100755 --- a/docs/api/globalconfig.html +++ b/docs/api/globalconfig.html @@ -10,14 +10,14 @@ -
              +
              -
              +

              Configuring Defaults

              - Home + Home
              -
              +

              Working with jQuery Mobile's Auto-initialization

              Unlike other jQuery projects, such as jQuery and jQuery UI, jQuery Mobile automatically applies many markup enhancements as soon as it loads (long before document.ready event fires). These enhancements are applied based on jQuery Mobile's default configuration, which is designed to work with common scenarios, but may or may not match your particular needs. Fortunately, these settings are easy to configure.

              @@ -72,7 +72,7 @@ $(document).bind("mobileinit", function(){
              The url parameter used for referencing widget-generated sub-pages (such as those generated by nested listviews). Translates to to example.html&ui-page=subpageIdentifier. The hash segment before &ui-page= is used by the framework for making an Ajax request to the URL where the sub-page exists.
              nonHistorySelectors (string, default: "dialog"):
              -
              Anchor links with a data-rel attribute value, or pages with a data-role value, that match these selectors will not be trackable in history (they won't update the location.hash and won't be bookmarkable).
              +
              Anchor links with a data-jq-rel attribute value, or pages with a data-jq-role value, that match these selectors will not be trackable in history (they won't update the location.hash and won't be bookmarkable).
              activePageClass (string, default: "ui-page-active"):
              diff --git a/docs/api/index.html b/docs/api/index.html index b703b413..2717bf44 100644 --- a/docs/api/index.html +++ b/docs/api/index.html @@ -9,18 +9,18 @@ -
              +
              -
              +

              API

              - Home + Home
              -
              +
              -
                -
              • API
              • +
                  +
                • API
                • Configuring defaults
                • Events
                • Methods & Utilities
                • diff --git a/docs/api/mediahelpers.html b/docs/api/mediahelpers.html index 82bbaff8..4b3df361 100755 --- a/docs/api/mediahelpers.html +++ b/docs/api/mediahelpers.html @@ -10,14 +10,14 @@ -
                  +
                  -
                  +

                  Responsive Layout Helpers

                  - Home + Home
                  -
                  +

                  Media Query Helper Classes

                  diff --git a/docs/api/methods.html b/docs/api/methods.html index 01d71902..55aa29a1 100755 --- a/docs/api/methods.html +++ b/docs/api/methods.html @@ -10,14 +10,14 @@ -
                  +
                  -
                  +

                  Methods

                  - Home + Home
                  -
                  +

                  jQuery Mobile exposes several methods and properties on the $.mobile object for use in your applications.

                  diff --git a/docs/api/themes.html b/docs/api/themes.html index 1abd0f54..f1f58e3a 100755 --- a/docs/api/themes.html +++ b/docs/api/themes.html @@ -10,14 +10,14 @@ -
                  +
                  -
                  +

                  Themes

                  - Home + Home
                  -
                  +

                  Theming overview

                  @@ -72,8 +72,8 @@

                  If a theme isn't specified on a content block, the framework will default to "c" to maximize contrast against the default header "a", as shown here:

                  -
                  - Back +
                  + Back

                  Default Header

                  @@ -81,18 +81,18 @@

                  This is the default content color swatch and a preview of a link.

                  -
                  +
                  Cache settings:
                  - Button + Button
                  - @@ -101,27 +101,27 @@

                  Lists & Buttons

                  Each swatch also includes default styles for interactive elements like list items and buttons.

                  -
                    + -
                      + -
                        + -
                          + -
                            + @@ -130,22 +130,22 @@

                            A button is included for each swatch in the theme. Each button has styles for normal, hover/focus and pressed states.

                            By default, any button that's placed in a bar is automatically assigned a swatch letter that matches its parent bar or content box, to visually integrate the button into the parent theme like a chameleon, as shown here:

                            - - - - - + + + + +

                            This default behavior makes it easy to ripple a theme change through a page by setting a theme swatch on a parent because you know the buttons will maintain the same relative visual weight across themes. Since form elements use the button styles, they will also adapt to their parent container too.

                            @@ -153,49 +153,49 @@

                            If you want to add visual emphasis to a button and help it stand out visually from its parent toolbar, an alternate swatch color can be set by adding a data-theme="a" to the anchor. Once an alternate swatch color is set on a button in the markup, the framework won't override that color if the parent theme is changed, because you made a conscious decision to set it.

                            -
                            +
                            - A - B - C - D - E + A + B + C + D + E
                            -
                            +
                            - A - B - C - D - E + A + B + C + D + E
                            -
                            +
                            - A - B - C - D - E + A + B + C + D + E
                            -
                            +
                            - A - B - C - D - E + A + B + C + D + E
                            -
                            +
                            - A - B - C - D - E + A + B + C + D + E
                            @@ -206,7 +206,7 @@

                            Global "Active" state

                            The jQuery Mobile framework uses a single Theme-level swatch called "active" (bright blue in the default theme) to consistently indicate the selected state, regardless of the individual swatch of the given widget. We apply this in navigation and form controls whenever there is a need to indicate what is currently selected. Because this theme swatch is designed for clear, consistent user feedback, it cannot be overridden via the markup; it is set once in the Theme and applied by the framework whenever a selected or active state is needed. The styling for this state is in the theme stylesheet under the ui-btn-active style rules.

                            -
                            +
                            Active is used for the on state of these toggles: @@ -222,7 +222,7 @@

                            Learn more about theming individual components:

                            -
                              +
                              • Page theming
                              • Toolbar theming
                              • Content theming
                              • diff --git a/docs/buttons/api-buttons.html b/docs/buttons/api-buttons.html index 827b08a6..d6911f22 100755 --- a/docs/buttons/api-buttons.html +++ b/docs/buttons/api-buttons.html @@ -10,14 +10,14 @@ -
                                +
                                -
                                +

                                Button API

                                - Home + Home
                                -
                                +

                                Dependencies

                                To be documented

                                diff --git a/docs/buttons/buttons-grouped.html b/docs/buttons/buttons-grouped.html index f6295407..1ebc843e 100755 --- a/docs/buttons/buttons-grouped.html +++ b/docs/buttons/buttons-grouped.html @@ -11,52 +11,52 @@ -
                                +
                                -
                                +

                                Grouped buttons

                                - Home + Home
                                -
                                +

                                Occasionally, you may want to visually group a set of buttons together to form a single block that looks contained like a navigation component. To get this effect, wrap a set of buttons in a container with the data-role="controlgroup" attribute — the framework will create a vertical button group, remove all margins and drop shadows between the buttons, and only round the first and last buttons of the set to create the effect that they are grouped together.

                                
                                -<div data-role="controlgroup">
                                -<a href="index.html" data-role="button">Yes</a>
                                -<a href="index.html" data-role="button">No</a>
                                -<a href="index.html" data-role="button">Maybe</a>
                                +<div data-jq-role="controlgroup">
                                +<a href="index.html" data-jq-role="button">Yes</a>
                                +<a href="index.html" data-jq-role="button">No</a>
                                +<a href="index.html" data-jq-role="button">Maybe</a>
                                 </div>
                                 

                                By default, grouped buttons are presented as a vertical list:

                                -
                                - Yes - No - Maybe +
                                + Yes + No + Maybe

                                By adding the data-type="horizontal" attribute to the controlgroup container, you can swap to a horizontal-style group that floats the buttons side-by-side and sets the width to only be large enough to fit the content. (Be aware that these will wrap to multiple lines if the number of buttons or the overall text length is too wide for the screen.)

                                Horizontal grouped buttons:

                                -
                                - Yes - No - Maybe +
                                + Yes + No + Maybe

                                Horizontal grouped buttons with icons:

                                -
                                - Up - Down - Delete +
                                + Up + Down + Delete

                                Horizontal grouped buttons, icon only:

                                -
                                - Up - Down - Delete +
                                + Up + Down + Delete
                                diff --git a/docs/buttons/buttons-icons.html b/docs/buttons/buttons-icons.html index b349cc0d..031e302c 100755 --- a/docs/buttons/buttons-icons.html +++ b/docs/buttons/buttons-icons.html @@ -11,14 +11,14 @@ -
                                +
                                -
                                +

                                Button icons

                                - Home + Home
                                -
                                +

                                Adding Icons to Buttons

                                The jQuery Mobile framework includes a selected set of icons most often needed for mobile apps. To minimize download size, jQuery Mobile includes a single white icon sprite, and automatically adds a semi-transparent black circle behind the icon to ensure that it has good contrast on any background color.

                                @@ -27,81 +27,81 @@

                                An icon can be added to a button by adding a data-icon attribute on the anchor specifying the icon to display. For example, the following markup:

                                - <a href="index.html" data-role="button" data-icon="delete">Delete</a> + <a href="index.html" data-jq-role="button" data-icon="delete">Delete</a>

                                Creates this button with an icon:

                                - Delete + Delete

                                Icon set

                                The following data-icon attributes can be referenced to create the icons shown below:

                                -

                                Left arrow - data-icon="arrow-l"

                                - My button -

                                Right arrow - data-icon="arrow-r"

                                - My button -

                                Up arrow - data-icon="arrow-u"

                                - My button -

                                Down arrow - data-icon="arrow-d"

                                - My button -

                                Delete - data-icon="delete"

                                - My button -

                                Plus - data-icon="plus"

                                - My button -

                                Minus - data-icon="minus"

                                - My button -

                                Check - data-icon="check"

                                - My button -

                                Gear - data-icon="gear"

                                - My button -

                                Refresh - data-icon="refresh"

                                - My button -

                                Forward - data-icon="forward"

                                - My button -

                                Back - data-icon="back"

                                - My button -

                                Grid - data-icon="grid"

                                - My button -

                                Star - data-icon="star"

                                - My button -

                                Alert - data-icon="alert"

                                - My button -

                                Info - data-icon="info"

                                - My button -

                                Home - data-icon="home"

                                - My button -

                                Search - data-icon="search"

                                - My button +

                                Left arrow - data-jq-icon="arrow-l"

                                + My button +

                                Right arrow - data-jq-icon="arrow-r"

                                + My button +

                                Up arrow - data-jq-icon="arrow-u"

                                + My button +

                                Down arrow - data-jq-icon="arrow-d"

                                + My button +

                                Delete - data-jq-icon="delete"

                                + My button +

                                Plus - data-jq-icon="plus"

                                + My button +

                                Minus - data-jq-icon="minus"

                                + My button +

                                Check - data-jq-icon="check"

                                + My button +

                                Gear - data-jq-icon="gear"

                                + My button +

                                Refresh - data-jq-icon="refresh"

                                + My button +

                                Forward - data-jq-icon="forward"

                                + My button +

                                Back - data-jq-icon="back"

                                + My button +

                                Grid - data-jq-icon="grid"

                                + My button +

                                Star - data-jq-icon="star"

                                + My button +

                                Alert - data-jq-icon="alert"

                                + My button +

                                Info - data-jq-icon="info"

                                + My button +

                                Home - data-jq-icon="home"

                                + My button +

                                Search - data-jq-icon="search"

                                + My button

                                Icon positioning

                                By default, all icons in buttons are placed to the left of the button text.

                                - Delete + Delete

                                This default may be overridden using the data-iconpos attribute to set the icon to the right, above (top) or below (bottom) the text. For example, the markup:

                                -<a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">Delete</a> +<a href="index.html" data-jq-role="button" data-jq-icon="delete" data-jq-iconpos="right">Delete</a>

                                Creates this button with right-aligned icon:

                                - Delete + Delete

                                Icons can also be positioned above the text by specifying data-iconpos="top"

                                - Delete + Delete

                                Or icons can also be positioned below the text by specifying data-iconpos="bottom"

                                - Delete + Delete

                                You can also create an icon-only button, by setting the data-iconpos attribute to notext. The button plugin will hide the text on-screen, but add it as a title attribute on the link to provide context for screen readers and devices that support tooltips. For example, replacing data-iconpos="right" on the previous example with data-iconpos="notext":

                                -<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a> +<a href="index.html" data-jq-role="button" data-jq-icon="delete" data-jq-iconpos="notext">Delete</a>

                                Creates this icon-only button:

                                - Delete + Delete

                                Custom Icons

                                To use custom icons, specify a data-icon value that has a unique name like myapp-email and the button plugin will generate a class by prefixing ui-icon- to the data-icon value and apply it to the button. You can then write a CSS rule that targets the ui-icon-myapp-email class to specify the icon background source. To maintain visual consistency, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.

                                @@ -112,71 +112,71 @@

                                Swatch "A" themed buttons

                                -
                                - My button - My button - My button - My button - My button - My button - My button - My button - My button - My button - My button - My button - My button - My button - My button - My button - My button - My button +

                                Swatch "B" themed buttons

                                -
                                - My button - My button - My button - My button - My button - My button - My button - My button - My button - My button - My button - My button - My button - My button - My button - My button - My button - My button +

                                Swatch "C" themed buttons

                                - diff --git a/docs/buttons/buttons-inline.html b/docs/buttons/buttons-inline.html index 13107271..e8d6c973 100755 --- a/docs/buttons/buttons-inline.html +++ b/docs/buttons/buttons-inline.html @@ -11,38 +11,38 @@ -
                                +
                                -
                                +

                                Inline buttons

                                - Home + Home
                                -
                                +

                                By default, all buttons in the body content are styled as block-level element so they fill the width of the screen:

                                - Button + Button

                                However, if you want a more compact button that is only as wide as the text and icons inside, add the data-inline="true" attribute to the button:

                                - Button + Button

                                If you have multiple buttons that should sit side-by-side on the same line, wrap the buttons in a container that has a data-inline="true" attribute. This will style the buttons to be the width of their content and float the buttons so they sit on the same line.

                                
                                -<div data-inline="true">
                                -	<a href="index.html" data-role="button">Cancel</a>
                                -	<a href="index.html" data-role="button" data-theme="b">Save</a>
                                +<div data-jq-inline="true">
                                +	<a href="index.html" data-jq-role="button">Cancel</a>
                                +	<a href="index.html" data-jq-role="button" data-jq-theme="b">Save</a>
                                 </div>
                                 

                                This creates an inline button set:

                                - Cancel - Save + Cancel + Save

                                If you want buttons to sit side-by-side but stretch to fill the width of the screen, you can use the content column grids to put normal full-width buttons into 2- or 3-columns.

                                diff --git a/docs/buttons/buttons-themes.html b/docs/buttons/buttons-themes.html index 02d06f83..c73f866a 100755 --- a/docs/buttons/buttons-themes.html +++ b/docs/buttons/buttons-themes.html @@ -11,85 +11,85 @@ -
                                +
                                -
                                +

                                Theming buttons

                                - Home + Home
                                -
                                +

                                Theming

                                jQuery Mobile has a rich theming system that gives you full control of how buttons are styled. When a link is added to a container, it is automatically assigned a theme swatch letter that matches it's parent bar or content box to visually integrate the button into the parent container, like a chameleon. So a button placed inside a content container with a theme of "a" (black in the default theme) will be automatically assigned the button theme of "a" (charcoal in the default theme). Here are examples of the button theme pairings in the default theme. All buttons have the same HTML markup:

                                -

                                A swatch

                                Button
                                -

                                B swatch

                                Button
                                -

                                C swatch

                                Button
                                -

                                D swatch

                                Button
                                -

                                E swatch

                                Button
                                +

                                A swatch

                                Button
                                +

                                B swatch

                                Button
                                +

                                C swatch

                                Button
                                +

                                D swatch

                                Button
                                +

                                E swatch

                                Button

                                Assigning theme swatches

                                Button can be manually assigned any of the button color swatches from the theme to add visual contrast with the container they sit inside by adding the data-theme attribute on the button markup and specifying a swatch letter.

                                			
                                -<a href="index.html" data-role="button" data-theme="a">Theme a</a>			
                                +<a href="index.html" data-jq-role="button" data-jq-theme="a">Theme a</a>			
                                 

                                Here are 4 buttons with icons that have a different swatch letter assigned via the data-theme attribute.

                                - Theme a - Theme b - Theme c - Theme d - Theme e + Theme a + Theme b + Theme c + Theme d + Theme e

                                Theme variations

                                "a" theme on container with themed buttons inside

                                -
                                - Theme a - Theme b - Theme c - Theme d - Theme e +

                                "b" theme on container with themed buttons inside

                                -
                                - Theme a - Theme b - Theme c - Theme d - Theme e +

                                "c" theme on container with themed buttons inside

                                -
                                - Theme a - Theme b - Theme c - Theme d - Theme e +

                                "d" theme on container with themed buttons inside

                                -
                                - Theme a - Theme b - Theme c - Theme d - Theme e +

                                "d" theme on container with themed buttons inside

                                - diff --git a/docs/buttons/buttons-types.html b/docs/buttons/buttons-types.html index 796321d6..838c000b 100755 --- a/docs/buttons/buttons-types.html +++ b/docs/buttons/buttons-types.html @@ -11,14 +11,14 @@ -
                                +
                                -
                                +

                                Button markup options

                                - Home + Home
                                -
                                +

                                Buttons that are used for navigation should be coded as anchor links, and those that submit forms as button elements — each will be styled identically by the framework.

                                @@ -27,11 +27,11 @@

                                In the main content block of a page, you can style any anchor link as a button by adding the data-role="button" to the link. The framework will add all necessary classes to style the link as a button. For example, this markup:

                                -<a href="index.html" data-role="button">Link button</a> +<a href="index.html" data-jq-role="button">Link button</a>

                                Produces this link-based button:

                                - Link button + Link button

                                Form buttons

                                For ease of styling, the framework automatically converts any button element or input with a type of submit, reset, button, or image into a custom styled link-based button — there is no need to add the data-role="button" attribute.

                                diff --git a/docs/buttons/index.html b/docs/buttons/index.html index fc5927c9..b89834a2 100755 --- a/docs/buttons/index.html +++ b/docs/buttons/index.html @@ -11,17 +11,17 @@ -
                                +
                                -
                                +

                                Buttons

                                - Home + Home
                                -
                                +

                                Buttons are core widgets in jQuery Mobile, and are used within a wide range of other plugins.

                                -
                                  +
                                  • Button markup options
                                  • Button icons
                                  • Inline buttons
                                  • diff --git a/docs/content/api-content.html b/docs/content/api-content.html index cb4620ef..596d3bd9 100755 --- a/docs/content/api-content.html +++ b/docs/content/api-content.html @@ -9,13 +9,13 @@ -
                                    +
                                    -
                                    +

                                    Content formatting API

                                    -
                                    +

                                    Dependencies

                                    To be documented

                                    diff --git a/docs/content/content-collapsible.html b/docs/content/content-collapsible.html index d9a8f0f0..92cd1048 100755 --- a/docs/content/content-collapsible.html +++ b/docs/content/content-collapsible.html @@ -12,14 +12,14 @@ -
                                    +
                                    -
                                    +

                                    Collapsible content

                                    - Home + Home
                                    -
                                    +

                                    Collapsible content markup

                                    To create a collapsible blocks of content, create a container and add the data-role="collapsible" attribute.

                                    @@ -29,14 +29,14 @@

                                    After the header, add any HTML markup you want to be collapsible. The framework will wrap this markup in a container that will be hidden/shown when the heading is clicked.

                                    		
                                    -	<div data-role="collapsible">
                                    +	<div data-jq-role="collapsible">
                                     	<h3>I'm a header</h3>
                                     	<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
                                     	</div>
                                     	
                                    -
                                    +

                                    I'm a header

                                    I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.

                                    @@ -45,13 +45,13 @@

                                    As the example notes, by default the content will be expanded. To collapse the content when the page loads, add the data-collapsed="true" attribute to the wrapper.

                                    - <div data-role="collapsible" data-collapsed="true"> + <div data-jq-role="collapsible" data-collapsed="true">

                                    This code will create a collapsible widget like this:

                                    -
                                    +

                                    I'm a header

                                    I'm the collapsible content. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.

                                    @@ -61,39 +61,39 @@

                                    Collapsible example

                                    This page has 4 collapsible containers with different types of content inside.

                                    -
                                    +

                                    Section 1: Collapsed text block

                                    I'm closed when the page loads because I have the data-collapsed="true" attribute on my container.

                                    I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content.

                                    -
                                    +

                                    Section 2: Expanded on load

                                    I'm open when the page loads because I don't have the data-collapsed="true" attribute on my container.

                                    I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content.

                                    -
                                    +

                                    Section 3: Form elements

                                    -
                                    +
                                    -
                                    +
                                    -
                                    -
                                    +
                                    +
                                    -
                                    +

                                    Section 4: Collapsed list

                                    -

                                    Nested Collapsibles

                                    -
                                    +

                                    I'm a header

                                    I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.

                                    -
                                    +

                                    I'm a nested collapsible header

                                    I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.

                                    Collapsible sets

                                    -

                                    By giving a parent element a data-role of collapsible-set, you can cause other collapsibles within that parent to close whenever a new one is opened, acting like an accordion widget:

                                    +

                                    By giving a parent element a data-jq-role of collapsible-set, you can cause other collapsibles within that parent to close whenever a new one is opened, acting like an accordion widget:

                                    -
                                    -
                                    +
                                    +

                                    I'm a header in a set of collapsibles

                                    I'm the collapsible content. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.

                                    -
                                    +

                                    I'm a header in a set of collapsibles

                                    I'm the collapsible content. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.

                                    -
                                    +

                                    I'm a header in a set of collapsibles

                                    I'm the collapsible content. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.

                                    diff --git a/docs/content/content-grids.html b/docs/content/content-grids.html index 5ce34d83..91e5ba68 100755 --- a/docs/content/content-grids.html +++ b/docs/content/content-grids.html @@ -13,14 +13,14 @@ -
                                    +
                                    -
                                    +

                                    Layout grids

                                    - Home + Home
                                    -
                                    +

                                    Using multiple column layouts isn't generally recommended on a mobile device because of the narrow screen width, but there are times where you may need to place small elements side-by-side (like buttons or navigation tabs, for example).

                                    @@ -52,14 +52,14 @@
                                    
                                     <fieldset class="ui-grid-a">
                                    -	<div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
                                    -	<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>	   
                                    +	<div class="ui-block-a"><button type="submit" data-jq-theme="c">Cancel</button></div>
                                    +	<div class="ui-block-b"><button type="submit" data-jq-theme="b">Submit</button></div>	   
                                     </fieldset>
                                     
                                    -
                                    -
                                    +
                                    +
                                    @@ -92,9 +92,9 @@

                                    And an example of a 3 column grid with buttons inside:

                                    -
                                    -
                                    -
                                    +
                                    +
                                    +

                                    Four-column grids

                                    diff --git a/docs/content/content-html.html b/docs/content/content-html.html index e02d996a..7d2f8e7f 100755 --- a/docs/content/content-html.html +++ b/docs/content/content-html.html @@ -13,14 +13,14 @@ -
                                    +
                                    -
                                    +

                                    HTML Formatting

                                    - Home + Home
                                    -
                                    +
                                    -