That was an animated page transition effect that we added with a
That was an animated page transition effect that we added with a data-transition attribute on the link.
Since it uses CSS transforms, this should be hardware accelerated on many mobile devices.
What do you think?
I like it @@ -23,4 +23,4 @@Ta-da!
- \ No newline at end of file + diff --git a/experiments/photos/_photo2.html b/experiments/photos/_photo2.html index 0828bc0aabe..59fae846bfb 100644 --- a/experiments/photos/_photo2.html +++ b/experiments/photos/_photo2.html @@ -4,29 +4,27 @@
-
-
+
-
A canoe
+ jQuery Mobile Framework - Photo 1
+
+
-
-
- 
-
+
diff --git a/experiments/photos/_photo3.html b/experiments/photos/_photo3.html
index a1d93e77474..bef3fe8fe05 100644
--- a/experiments/photos/_photo3.html
+++ b/experiments/photos/_photo3.html
@@ -4,29 +4,27 @@
-
+
-
-
+
-
A dock
+ jQuery Mobile Framework - Photo 1
+
+
-
-
- 
-
+
diff --git a/experiments/photos/_photo4.html b/experiments/photos/_photo4.html
index 33cc0c4d8a3..759e1d8f7d1 100644
--- a/experiments/photos/_photo4.html
+++ b/experiments/photos/_photo4.html
@@ -4,29 +4,27 @@
-
+
-
-
+
-
A kayak
+ jQuery Mobile Framework - Photo 1
+
+
-
-
- 
-
+
diff --git a/experiments/photos/_photo5.html b/experiments/photos/_photo5.html
index dd0899a964d..4730b902c22 100644
--- a/experiments/photos/_photo5.html
+++ b/experiments/photos/_photo5.html
@@ -4,28 +4,26 @@
-
+
-
-
+
-
Nathan running
+ jQuery Mobile Framework - Photo 1
+
+
-
-
- 
-
+
diff --git a/experiments/photos/_photo6.html b/experiments/photos/_photo6.html
index 9c03d5069a3..a158f743eb5 100644
--- a/experiments/photos/_photo6.html
+++ b/experiments/photos/_photo6.html
@@ -4,27 +4,26 @@
-
+
-
-
+
-
Sandy beach
+ jQuery Mobile Framework - Photo 1
+
+
-
-
- 
-
+
diff --git a/experiments/photos/_photo1.html b/experiments/photos/index.html
similarity index 67%
rename from experiments/photos/_photo1.html
rename to experiments/photos/index.html
index 7f3f65f21e6..93c1a1d4b7d 100644
--- a/experiments/photos/_photo1.html
+++ b/experiments/photos/index.html
@@ -4,28 +4,26 @@
-
+
-
-
+
-
A bridge
+
-
- 
-
+
diff --git a/experiments/photos/photos.css b/experiments/photos/photos.css
index 824e5915d5e..08047a4164d 100644
--- a/experiments/photos/photos.css
+++ b/experiments/photos/photos.css
@@ -1 +1,2 @@
-#photoview img { width: 100%; }
\ No newline at end of file
+.photoview .ui-content { padding: 0; }
+.photoview img { width: 100%; }
\ No newline at end of file
diff --git a/experiments/photos/photos.js b/experiments/photos/photos.js
index f7d8dab908a..0cfcf013586 100644
--- a/experiments/photos/photos.js
+++ b/experiments/photos/photos.js
@@ -1,23 +1,21 @@
-$(function(){
- $('.photoview')
- .live('swipeleft',function(){
- $(this).find('a').ajaxClick();
- })
- .live('swiperight',function(){
- $(this).next().find('a:contains(Prev)').ajaxClick();
- });
- $('.photoview a').click(function(){
- event.stopImmediatePropagation();
- })
- .tap(function(event){
- $(this).ajaxClick();
- event.stopImmediatePropagation();
- })
- .taphold(function(event){
- $.fixedToolbars.toggle();
- event.stopImmediatePropagation();
- })
-
- }
-});
+
+$('.photoview')
+ .live('pagebeforehide',function(){
+ $.fixedToolbars.hide(true);
+ })
+ .live('pageshow',function(){
+ $.fixedToolbars.show();
+ })
+ .live('swipeleft',function(){
+ $(this).find('a.next').click();
+ })
+ .live('swiperight',function(){
+ $(this).next().find('a.prev').click();
+ });
+
+$('.photoview img').live('mousedown touchstart',function(event){
+ event.preventDefault();
+})
+
+
diff --git a/experiments/ui-datepicker/jquery.ui.datepicker.css b/experiments/ui-datepicker/jquery.ui.datepicker.css
index fd07f3eb1d3..91b2e9a9f40 100755
--- a/experiments/ui-datepicker/jquery.ui.datepicker.css
+++ b/experiments/ui-datepicker/jquery.ui.datepicker.css
@@ -23,6 +23,6 @@ div.hasDatepicker{ display: block; padding: 0; overflow: visible; margin: 8px 0
.ui-datepicker td { border-width: 1px; padding: 0; text-align: center; }
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em 0; font-weight: bold; margin: 0; border-width: 0; text-align: center; text-decoration: none; }
-.min-width-480 {
+.min-width-480px {
div.hasDatepicker { width: 63%; display: inline-block; margin: 0; }
}
\ No newline at end of file
diff --git a/js/jquery.mobile.collapsible.js b/js/jquery.mobile.collapsible.js
index 0d7eb20a416..5b486eea230 100644
--- a/js/jquery.mobile.collapsible.js
+++ b/js/jquery.mobile.collapsible.js
@@ -19,7 +19,8 @@ $.fn.collapsible = function(options){
//define
var collapsibleContain = $(this).addClass('ui-collapsible-contain'),
collapsibleHeading = $(this).find(o.heading).eq(0),
- collapsibleContent = collapsibleContain.wrapInner('').find('.ui-collapsible-content');
+ collapsibleContent = collapsibleContain.wrapInner('').find('.ui-collapsible-content'),
+ collapsibleParent = $(this).closest('[data-role=collapsible-set]').addClass('ui-collapsible-set');
//replace collapsibleHeading if it's a legend
if(collapsibleHeading.is('legend')){
@@ -36,17 +37,12 @@ $.fn.collapsible = function(options){
.wrapInner('')
.find('a:eq(0)')
.buttonMarkup({
- shadow: true,
+ shadow: !!!collapsibleParent.length,
corners:false,
iconPos: 'left',
icon: 'plus',
theme: o.theme
})
- .removeClass('ui-btn-corner-all')
- .addClass('ui-corner-all')
- .find('.ui-btn-inner')
- .removeClass('ui-btn-corner-all')
- .addClass('ui-corner-all')
.find('.ui-icon')
.removeAttr('class')
.buttonMarkup({
@@ -56,29 +52,85 @@ $.fn.collapsible = function(options){
icon: 'plus',
theme: o.iconTheme
});
+
+ if( !collapsibleParent.length ){
+ collapsibleHeading
+ .find('a:eq(0)')
+ .addClass('ui-corner-all')
+ .find('.ui-btn-inner')
+ .addClass('ui-corner-all');
+ }
+ else {
+ if( collapsibleContain.data('collapsible-last') ){
+ collapsibleHeading
+ .find('a:eq(0), .ui-btn-inner')
+ .addClass('ui-corner-bottom');
+ }
+ }
+
//events
collapsibleContain
- .bind('collapse', function(){
- collapsibleHeading
- .addClass('ui-collapsible-heading-collapsed')
- .find('.ui-collapsible-heading-status').text(o.expandCueText);
-
- collapsibleHeading.find('.ui-icon').removeClass('ui-icon-minus').addClass('ui-icon-plus');
- collapsibleContent.addClass('ui-collapsible-content-collapsed').attr('aria-hidden',true);
+ .bind('collapse', function(event){
+ if( !event.isDefaultPrevented() ){
+ event.preventDefault();
+ collapsibleHeading
+ .addClass('ui-collapsible-heading-collapsed')
+ .find('.ui-collapsible-heading-status').text(o.expandCueText);
+
+ collapsibleHeading.find('.ui-icon').removeClass('ui-icon-minus').addClass('ui-icon-plus');
+ collapsibleContent.addClass('ui-collapsible-content-collapsed').attr('aria-hidden',true);
+
+ if( collapsibleContain.data('collapsible-last') ){
+ collapsibleHeading
+ .find('a:eq(0), .ui-btn-inner')
+ .addClass('ui-corner-bottom');
+ }
+ }
})
- .bind('expand', function(){
- collapsibleHeading
- .removeClass('ui-collapsible-heading-collapsed')
- .find('.ui-collapsible-heading-status').text(o.collapseCueText);
-
- collapsibleHeading.find('.ui-icon').removeClass('ui-icon-plus').addClass('ui-icon-minus');
- collapsibleContent.removeClass('ui-collapsible-content-collapsed').attr('aria-hidden',false);
-
+ .bind('expand', function(event){
+ if( !event.isDefaultPrevented() ){
+ event.preventDefault();
+ collapsibleHeading
+ .removeClass('ui-collapsible-heading-collapsed')
+ .find('.ui-collapsible-heading-status').text(o.collapseCueText);
+
+ collapsibleHeading.find('.ui-icon').removeClass('ui-icon-plus').addClass('ui-icon-minus');
+ collapsibleContent.removeClass('ui-collapsible-content-collapsed').attr('aria-hidden',false);
+
+ if( collapsibleContain.data('collapsible-last') ){
+ collapsibleHeading
+ .find('a:eq(0), .ui-btn-inner')
+ .removeClass('ui-corner-bottom');
+ }
+
+ }
})
.trigger(o.collapsed ? 'collapse' : 'expand');
+
+ //close others in a set
+ if( collapsibleParent.length && !collapsibleParent.data("collapsiblebound") ){
+ collapsibleParent
+ .data("collapsiblebound", true)
+ .bind("expand", function( event ){
+ $(this).find( ".ui-collapsible-contain" )
+ .not( $(event.target).closest( ".ui-collapsible-contain" ) )
+ .not( "> .ui-collapsible-contain .ui-collapsible-contain" )
+ .trigger( "collapse" );
+ })
+ var set = collapsibleParent.find('[data-role=collapsible]')
+
+ set.first()
+ .find('a:eq(0)')
+ .addClass('ui-corner-top')
+ .find('.ui-btn-inner')
+ .addClass('ui-corner-top');
+
+ set.last().data('collapsible-last', true)
+ }
+
collapsibleHeading.click(function(){
if( collapsibleHeading.is('.ui-collapsible-heading-collapsed') ){
collapsibleContain.trigger('expand');
diff --git a/js/jquery.mobile.event.js b/js/jquery.mobile.event.js
index 8d13c7b014f..1dd9e628d4d 100644
--- a/js/jquery.mobile.event.js
+++ b/js/jquery.mobile.event.js
@@ -140,7 +140,7 @@ $.event.special.swipe = {
if ( start && stop ) {
if ( stop.time - start.time < 1000 &&
Math.abs( start.coords[0] - stop.coords[0]) > 30 &&
- Math.abs( start.coords[1] - stop.coords[1]) < 20 ) {
+ Math.abs( start.coords[1] - stop.coords[1]) < 75 ) {
start.origin
.trigger( "swipe" )
.trigger( start.coords[0] > stop.coords[0] ? "swipeleft" : "swiperight" );
diff --git a/js/jquery.mobile.forms.button.js b/js/jquery.mobile.forms.button.js
index 3d30493a0c3..94e81dfefeb 100644
--- a/js/jquery.mobile.forms.button.js
+++ b/js/jquery.mobile.forms.button.js
@@ -4,23 +4,36 @@
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
* Note: Code is in draft form and is subject to change
*/
-(function($){
-$.fn.customButton = function(){
- return $(this).each(function(){
- var button = $(this).addClass('ui-btn-hidden').attr('tabindex','-1');
+(function ( $ ) {
+$.widget( "mobile.button", $.mobile.widget, {
+ options: {},
+ _create: function(){
+ var $el = this.element;
+ $el
+ .addClass('ui-btn-hidden')
+ .attr('tabindex','-1');
+
//add ARIA role
- $(''+ (button.text() || button.val()) +'')
- .buttonMarkup({
- theme: button.data('theme'),
- icon: button.data('icon'),
- iconpos: button.data('iconpos'),
- inline: button.data('inline')
- })
+ $( "", {
+ "href": "#",
+ "role": "button",
+ "aria-label": $el.attr( "type" )
+ } )
+ .text( $el.text() || $el.val() )
+ .insertBefore( $el )
.click(function(){
- button.click();
+ $el.click();
return false;
})
- .insertBefore(button);
- });
-};
-})(jQuery);
\ No newline at end of file
+ .buttonMarkup({
+ theme: $el.data("theme"),
+ icon: $el.data("icon"),
+ iconpos: $el.data("iconpos"),
+ inline: $el.data("inline"),
+ corners: $el.data("corners"),
+ shadow: $el.data("shadow"),
+ iconshadow: $el.data("icon-shadow")
+ });
+ }
+});
+})( jQuery );
\ No newline at end of file
diff --git a/js/jquery.mobile.forms.checkboxradio.js b/js/jquery.mobile.forms.checkboxradio.js
index 31355f68460..1879ee86939 100644
--- a/js/jquery.mobile.forms.checkboxradio.js
+++ b/js/jquery.mobile.forms.checkboxradio.js
@@ -4,82 +4,106 @@
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
* Note: Code is in draft form and is subject to change
*/
-(function(jQuery){
+(function ( $ ) {
+$.widget( "mobile.checkboxradio", $.mobile.widget, {
+ options: {
+ theme: undefined,
+ icon: undefined
+ },
+ _create: function(){
+ var input = this.element,
+ label = jQuery("label[for='" + input.attr( "id" ) + "']"),
+ inputtype = input.attr( "type" ),
+ checkedicon = "ui-icon-" + inputtype + "-on",
+ uncheckedicon = "ui-icon-" + inputtype + "-off";
-jQuery.fn.customCheckboxRadio = function( options ) {
- return this.each(function() {
- var input = jQuery( this ),
- type = input.attr( "type" );
-
- if ( type === "checkbox" || type === "radio" ) {
- var o = jQuery.extend({
- theme: input.data( "theme" ),
- icon: input.data( "icon" ) || !input.parents( "[data-type='horizontal']" ).length,
- checkedicon: "ui-icon-" + type + "-on",
- uncheckedicon: "ui-icon-" + type + "-off"
- }, options );
-
- // get the associated label using the input's id
- var label = jQuery("label[for='" + input.attr( "id" ) + "']")
- .buttonMarkup({
- iconpos: o.icon ? "left" : "",
- theme: o.theme,
- icon: o.icon ? o.uncheckedicon : null,
- shadow: false
- });
+ if ( inputtype != "checkbox" && inputtype != "radio" ) { return; }
- var icon = label.find( ".ui-icon" );
+ label
+ .buttonMarkup({
+ iconpos: this.options.icon,
+ theme: this.options.theme,
+ icon: this.options.icon ? uncheckedicon : ( this.element.parents( "[data-type='horizontal']" ).length ? undefined : uncheckedicon ),
+ shadow: false
+ });
+
+ // wrap the input + label in a div
+ input
+ .add( label )
+ .wrapAll( "" );
+
+ label.bind({
+ mouseover: function() {
+ if( $(this).parent().is('.ui-disabled') ){ return false; }
+ },
- // wrap the input + label in a div
- input
- .add( label )
- .wrapAll( "" );
+ mousedown: function() {
+ if( $(this).parent().is('.ui-disabled') ){ return false; }
+ label.data( "state", input.attr( "checked" ) );
+ },
- // necessary for browsers that don't support the :hover pseudo class on labels
- label.bind({
- mousedown: function() {
- label.data( "state", input.attr( "checked" ) );
- },
+ click: function() {
+ setTimeout(function() {
+ if ( input.attr( "checked" ) === label.data( "state" ) ) {
+ input.trigger( "click" );
+ }
+ }, 1);
+ }
+ });
+
+ input
+ .bind({
+
click: function() {
- setTimeout(function() {
- if ( input.attr( "checked" ) === label.data( "state" ) ) {
- input.trigger( "click" );
- }
- }, 1);
+ jQuery( "input[name='" + input.attr( "name" ) + "']" ).checkboxradio( "refresh" );
+ },
+
+ focus: function() {
+ label.addClass( "ui-focus" );
+ },
+
+ blur: function() {
+ label.removeClass( "ui-focus" );
}
});
- //bind custom event, trigger it, bind click,focus,blur events
- input
- .bind({
- updateState: function() {
- if ( this.checked ) {
- label.addClass( "ui-btn-active" );
- icon.addClass( o.checkedicon );
- icon.removeClass( o.uncheckedicon );
-
- } else {
- label.removeClass( "ui-btn-active" );
- icon.removeClass( o.checkedicon );
- icon.addClass( o.uncheckedicon );
- }
- },
-
- click: function() {
- jQuery( "input[name='" + input.attr( "name" ) + "']" ).trigger( "updateState" );
- },
-
- focus: function() {
- label.addClass( "ui-focus" );
- },
+ this.refresh();
+
+ },
+
+ refresh: function( ){
+ var input = this.element,
+ label = jQuery("label[for='" + input.attr( "id" ) + "']"),
+ inputtype = input.attr( "type" ),
+ icon = label.find( ".ui-icon" ),
+ checkedicon = "ui-icon-" + inputtype + "-on",
+ uncheckedicon = "ui-icon-" + inputtype + "-off";
+
+ if ( input[0].checked ) {
+ label.addClass( "ui-btn-active" );
+ icon.addClass( checkedicon );
+ icon.removeClass( uncheckedicon );
- blur: function() {
- label.removeClass( "ui-focus" );
- }
- })
- .trigger( "updateState" );
+ } else {
+ label.removeClass( "ui-btn-active" );
+ icon.removeClass( checkedicon );
+ icon.addClass( uncheckedicon );
}
- });
-};
-
-})(jQuery);
+
+ if( input.is( ":disabled" ) ){
+ this.disable();
+ }
+ else {
+ this.enable();
+ }
+ },
+
+ disable: function(){
+ this.element.attr("disabled",true).parent().addClass("ui-disabled");
+ },
+
+ enable: function(){
+ this.element.attr("disabled",false).parent().removeClass("ui-disabled");
+ }
+});
+})( jQuery );
diff --git a/js/jquery.mobile.forms.select.js b/js/jquery.mobile.forms.select.js
index 10249d061a4..28eb927d36d 100644
--- a/js/jquery.mobile.forms.select.js
+++ b/js/jquery.mobile.forms.select.js
@@ -28,7 +28,6 @@ $.fn.customSelect = function(options){
button = $( "", {
"href": "#",
"role": "button",
- "title": "select menu",
"id": buttonId,
"aria-haspopup": "true",
"aria-owns": menuId
diff --git a/js/jquery.mobile.forms.textinput.js b/js/jquery.mobile.forms.textinput.js
index 984ad402b42..e7745ca31b2 100644
--- a/js/jquery.mobile.forms.textinput.js
+++ b/js/jquery.mobile.forms.textinput.js
@@ -24,14 +24,14 @@ jQuery.fn.customTextInput = function(options){
if(o.search){
focusedEl = input.wrap('').parent();
var clearbtn = $('clear text')
- .buttonMarkup({icon: 'delete', iconpos: 'notext', corners:true, shadow:true})
.click(function(){
input.val('').focus();
input.trigger('change');
clearbtn.addClass('ui-input-clear-hidden');
return false;
})
- .appendTo(focusedEl);
+ .appendTo(focusedEl)
+ .buttonMarkup({icon: 'delete', iconpos: 'notext', corners:true, shadow:true});
function toggleClear(){
if(input.val() == ''){
diff --git a/js/jquery.mobile.js b/js/jquery.mobile.js
index fc8351279d7..44367e5ecd7 100644
--- a/js/jquery.mobile.js
+++ b/js/jquery.mobile.js
@@ -46,6 +46,8 @@
$pageContainer,
startPageId = 'ui-page-start',
activePageClass = 'ui-page-active',
+ activeBtnClass = 'ui-btn-active',
+ activeClickedLink = null,
pageTransition,
forceBack,
transitions = 'slide slideup slidedown pop flip fade',
@@ -59,7 +61,8 @@
nextPageRole = null,
hashListener = true,
unHashedSelectors = '[data-rel=dialog]',
- baseUrl = location.protocol + '//' + location.host + location.pathname;
+ baseUrl = location.protocol + '//' + location.host + location.pathname,
+ resolutionBreakpoints = [320,480,768,1024];
// TODO: don't expose (temporary during code reorg)
$.mobile.urlStack = urlStack;
@@ -104,47 +107,43 @@
$('#ui-base').attr('href', baseUrl);
}
-
- // send a link through hash tracking
- jQuery.fn.ajaxClick = function() {
- var href = jQuery( this ).attr( "href" );
- pageTransition = jQuery( this ).data( "transition" ) || "slide";
- forceBack = jQuery( this ).data( "back" ) || undefined;
- nextPageRole = jQuery( this ).attr( "data-rel" );
-
- //find new base for url building
- var newBaseURL = getBaseURL();
-
- //if href is absolute but local, or a local ID, no base needed
- if( /^\//.test(href) || (/https?:\/\//.test(href) && !!(href).match(location.hostname)) || /^#/.test(href) ){
- newBaseURL = '';
+ //click routing - direct to HTTP or Ajax, accordingly
+ jQuery( "a" ).live( "click", function(event) {
+ var $this = $(this),
+ //get href, remove same-domain protocol and host
+ href = $this.attr( "href" ).replace( location.protocol + "//" + location.host, ""),
+ //if it still starts with a protocol, it's external, or could be :mailto, etc
+ external = /^(:?\w+:)/.test( href ) || $this.is( "[target],[rel=external]" );
+
+ if( href === '#' ){
+ //for links created purely for interaction - ignore
+ return false;
}
- // set href to relative path using baseURL and
- if( !/https?:\/\//.test(href) ){
- href = newBaseURL + href;
- }
-
- //if it's a non-local-anchor and Ajax is not supported, or if it's an external link, go to page without ajax
- if ( ( /^[^#]/.test(href) && !jQuery.support.ajax ) || ( /https?:\/\//.test(href) && !!!href.match(location.hostname) ) ) {
- location = href
+ activeClickedLink = $this.closest( ".ui-btn" ).addClass( activeBtnClass );
+
+ if( external ){
+ //deliberately redirect, in case click was triggered
+ location.href = href;
}
- else{
- if( $(this).is(unHashedSelectors) ){
- changePage(href, pageTransition, undefined);
- }
- else{
- changePage(href, pageTransition, undefined, true);
+ else {
+ //use ajax
+ var pageTransition = $this.data( "transition" ) || "slide",
+ forceBack = $this.data( "back" ) || undefined,
+ changeHashOnSuccess = !$this.is(unHashedSelectors);
+
+ nextPageRole = $this.attr( "data-rel" );
+
+ //if it's a relative href, prefix href with base url
+ if( href.indexOf('/') && href.indexOf('#') !== 0 ){
+ href = getBaseURL() + href;
}
+ href.replace(/^#/,'');
+
+ changePage(href, pageTransition, forceBack, changeHashOnSuccess);
}
- return this;
- };
-
- // ajaxify all navigable links
- jQuery( "a:not([href='#']):not([target]):not([rel='external']):not([href^='mailto:'])" ).live( "click", function(event) {
- jQuery( this ).ajaxClick();
- return false;
+ event.preventDefault();
});
// turn on/off page loading message.
@@ -190,6 +189,14 @@
return wrapper;
}
+ //remove active classes after page transition or error
+ function removeActiveLinkClass(){
+ if(activeClickedLink && !activeClickedLink.closest( '.ui-page-active' ).length ){
+ activeClickedLink.removeClass( activeBtnClass );
+ }
+ activeClickedLink = null;
+ }
+
//for getting or creating a new page
function changePage( to, transition, back, changeHash){
@@ -199,7 +206,7 @@
from = toIsArray ? to[0] : $.activePage,
to = toIsArray ? to[1] : to,
url = fileUrl = $.type(to) === "string" ? to.replace( /^#/, "" ) : null,
- back = (back !== undefined) ? back : (forceBack || ( urlStack.length > 1 && urlStack[ urlStack.length - 2 ].url === url )),
+ back = (back !== undefined) ? back : ( urlStack.length > 1 && urlStack[ urlStack.length - 2 ].url === url ),
transition = (transition !== undefined) ? transition : ( pageTransition || "slide" );
//unset pageTransition, forceBack
@@ -240,6 +247,7 @@
hashListener = true;
}, 500);
}
+ removeActiveLinkClass();
}
if(transition){
@@ -311,10 +319,8 @@
if( !$.support.dynamicBaseTag ){
var baseUrl = getBaseURL(fileUrl);
to.find('[src],[href]').each(function(){
- var thisHref = $(this).attr('href'),
- thisSrc = $(this).attr('src'),
- thisAttr = thisHref ? 'href' : 'src',
- thisUrl = thisHref || thisSrc;
+ var thisAttr = $(this).is('[href]') ? 'href' : 'src',
+ thisUrl = $(this).attr(thisAttr);
//if full path exists and is same, chop it - helps IE out
thisUrl.replace( location.protocol + '//' + location.host + location.pathname, '' );
@@ -339,7 +345,7 @@
},
error: function() {
pageLoading( true );
-
+ removeActiveLinkClass();
jQuery("")
.css({ "display": "block", "opacity": 0.96, "top": $(window).scrollTop() + 100 })
.appendTo( $pageContainer )
@@ -400,32 +406,48 @@
});
//add breakpoint classes for faux media-q support
- function resolutionBreakpoints(){
+ function detectResolutionBreakpoints(){
var currWidth = $window.width(),
minPrefix = "min-width-",
maxPrefix = "max-width-",
minBreakpoints = [],
- maxBreakpoints = [];
+ maxBreakpoints = [],
+ unit = "px",
+ breakpointClasses;
- $html.removeClass( minPrefix + $.mobile.resolutionBreakpoints.join(" " + minPrefix) + maxPrefix + " " + $.mobile.resolutionBreakpoints.join(" " + maxPrefix) );
+ $html.removeClass( minPrefix + resolutionBreakpoints.join(unit + " " + minPrefix) + unit + " " +
+ maxPrefix + resolutionBreakpoints.join( unit + " " + maxPrefix) + unit );
- $.each($.mobile.resolutionBreakpoints,function( i ){
- if( currWidth >= $.mobile.resolutionBreakpoints[ i ] ){
- minBreakpoints.push( $.mobile.resolutionBreakpoints[ i ] );
+ $.each(resolutionBreakpoints,function( i ){
+ if( currWidth >= resolutionBreakpoints[ i ] ){
+ minBreakpoints.push( minPrefix + resolutionBreakpoints[ i ] + unit );
}
- if( currWidth <= $.mobile.resolutionBreakpoints[ i ] ){
- maxBreakpoints.push( $.mobile.resolutionBreakpoints[ i ] );
+ if( currWidth <= resolutionBreakpoints[ i ] ){
+ maxBreakpoints.push( maxPrefix + resolutionBreakpoints[ i ] + unit );
}
});
- $html.addClass( minPrefix + minBreakpoints.join(" " + minPrefix) + " " + maxPrefix + maxBreakpoints.join(" " + maxPrefix) );
+ if( minBreakpoints.length ){ breakpointClasses = minBreakpoints.join(" "); }
+ if( maxBreakpoints.length ){ breakpointClasses += " " + maxBreakpoints.join(" "); }
+
+ $html.addClass( breakpointClasses );
};
- //common breakpoints, overrideable, changeable
- $.mobile.resolutionBreakpoints = [320,480,768,1024];
- $window.bind( "orientationchange resize", resolutionBreakpoints);
- resolutionBreakpoints();
+ //add breakpoints now and on oc/resize events
+ $window.bind( "orientationchange resize", detectResolutionBreakpoints);
+ detectResolutionBreakpoints();
+ //common breakpoints, overrideable, changeable
+ $.mobile.addResolutionBreakpoints = function( newbps ){
+ if( $.type( newbps ) === "array" ){
+ resolutionBreakpoints = resolutionBreakpoints.concat( newbps );
+ }
+ else {
+ resolutionBreakpoints.push( newbps );
+ }
+ detectResolutionBreakpoints();
+ }
+
//insert mobile meta - these will need to be configurable somehow.
var headPrepends =
$head.prepend(
@@ -456,9 +478,9 @@
//dom-ready
jQuery(function(){
-
+ var $pages = jQuery("[data-role='page']");
//set up active page
- $startPage = $.activePage = jQuery("[data-role='page']").first();
+ $startPage = $.activePage = $pages.first();
//set page container
$pageContainer = $startPage.parent();
@@ -473,7 +495,7 @@
}
//initialize all pages present
- jQuery("[data-role='page']").page();
+ $pages.page();
//trigger a new hashchange, hash or not
$window.trigger( "hashchange", { manuallyTriggered: true } );
diff --git a/js/jquery.mobile.listview.filter.js b/js/jquery.mobile.listview.filter.js
index dfc8bf205f3..377583a3533 100644
--- a/js/jquery.mobile.listview.filter.js
+++ b/js/jquery.mobile.listview.filter.js
@@ -24,7 +24,7 @@ $( "[data-role='listview']" ).live( "listviewcreate", function() {
}).hide();
}
- listview._numberItems();
+ //listview._numberItems();
})
.appendTo( wrapper )
.customTextInput();
diff --git a/js/jquery.mobile.listview.js b/js/jquery.mobile.listview.js
index f88d600f79a..13a84abcf1c 100644
--- a/js/jquery.mobile.listview.js
+++ b/js/jquery.mobile.listview.js
@@ -109,9 +109,9 @@ jQuery.widget( "mobile.listview", jQuery.mobile.widget, {
}
});
- // tapping the whole LI triggers ajaxClick on the first link
- $list.delegate( "li", "tap", function(event) {
- if ( !jQuery( e.target ).closest( "a" ).length ) {
+ // tapping the whole LI triggers click on the first link
+ $list.delegate( "li", "click", function(event) {
+ if ( !jQuery( event.target ).closest( "a" ).length ) {
jQuery( this ).find( "a" ).first().trigger( "click" );
return false;
}
@@ -129,13 +129,15 @@ jQuery.widget( "mobile.listview", jQuery.mobile.widget, {
item.find( "img" ).addClass( "ui-li-thumb" ).each(function() {
jQuery( this ).closest( "li" )
- .addClass( jQuery(this).is( "ui-li-icon" ) ? "ui-li-has-icon" : "ui-li-has-thumb" );
+ .addClass( jQuery(this).is( ".ui-li-icon" ) ? "ui-li-has-icon" : "ui-li-has-thumb" );
});
var aside = item.find( ".ui-li-aside" );
if ( aside.length ) {
- aside.prependTo( aside.parent() ); //shift aside to front for css float
+ aside.each(function(i, el) {
+ $(el).prependTo( $(el).parent() ); //shift aside to front for css float
+ });
}
if ( jQuery.support.cssPseudoElement || !jQuery.nodeName( item[0], "ol" ) ) {
@@ -148,6 +150,7 @@ jQuery.widget( "mobile.listview", jQuery.mobile.widget, {
var o = this.options,
$list = this.element,
+ self = this,
dividertheme = $list.data( "dividertheme" ) || o.dividerTheme,
li = $list.children( "li" ),
counter = jQuery.support.cssPseudoElement || !jQuery.nodeName( $list[0], "ol" ) ? 0 : 1;
@@ -264,7 +267,7 @@ jQuery.widget( "mobile.listview", jQuery.mobile.widget, {
item.addClass( itemClass );
if ( !create ) {
- this._itemApply( $list, item );
+ self._itemApply( $list, item );
}
});
},
diff --git a/js/jquery.mobile.navbar.js b/js/jquery.mobile.navbar.js
index 6c07fc432d7..947394092db 100755
--- a/js/jquery.mobile.navbar.js
+++ b/js/jquery.mobile.navbar.js
@@ -4,40 +4,36 @@
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
* Note: Code is in draft form and is subject to change
*/
-(function($){
-$.fn.navbar = function(settings){
- return $(this).each(function(){
-
- var o = $.extend({
- iconpos: $(this).data('iconpos') || 'top',
- transition: $(this).data('transition') || 'slideup'
- },settings);
-
- //wrap it with footer classes
- var $navbar = $(this).addClass('ui-navbar'),
- numTabs = $navbar.find('li').length,
- moreIcon = $navbar.find('a[data-icon]').length ? 'arrow-r' : null;
-
- if( moreIcon == null ){
- o.iconpos = null;
- $navbar.add( $navbar.children(0) ).addClass('ui-navbar-noicons');
- }
-
- $navbar
- //add ARIA role
- .attr("role","navigation")
- .find('ul')
- .grid({grid: numTabs > 2 ? 'b' : 'a'});
+(function ( $ ) {
+$.widget( "mobile.navbar", $.mobile.widget, {
+ options: {
+ iconpos: 'top'
+ },
+ _create: function(){
+ var $navbar = this.element,
+ $navbtns = $navbar.find("a"),
+ iconpos = $navbtns.filter('icon').length ? this.options.iconpos : undefined;
$navbar
- .find('ul a')
- .buttonMarkup({corners: false, shadow:false, iconpos: o.iconpos})
- .bind('tap',function(){
- //NOTE: we'll need to find a way to highlight an active tab at load as well
- $navbar.find('.ui-btn-active').removeClass('ui-btn-active');
- $(this).addClass('ui-btn-active');
+ .addClass('ui-navbar')
+ .attr("role","navigation")
+ .find("ul")
+ .grid({grid: $navbtns.length > 2 ? "b" : "a"});
+
+ if( !iconpos ){
+ $navbar.addClass("ui-navbar-noicons");
+ }
+
+ $navbtns
+ .buttonMarkup({
+ corners: false,
+ shadow: false,
+ iconpos: iconpos
});
-
- });
-};
-})(jQuery);
\ No newline at end of file
+
+ $navbar.delegate("a", "click",function(event){
+ $navbtns.removeClass("ui-btn-active");
+ });
+ }
+});
+})( jQuery );
\ No newline at end of file
diff --git a/js/jquery.mobile.page.js b/js/jquery.mobile.page.js
index bc3a2f8653d..3b1b53e7fd0 100644
--- a/js/jquery.mobile.page.js
+++ b/js/jquery.mobile.page.js
@@ -127,12 +127,12 @@ jQuery.widget( "mobile.page", jQuery.mobile.widget, {
// enchance form controls
this.element
.find( "[type='radio'], [type='checkbox']" )
- .customCheckboxRadio();
+ .checkboxradio();
this.element
.find( "button, [type='button'], [type='submit'], [type='reset'], [type='image']" )
.not( ".ui-nojs" )
- .customButton();
+ .button();
this.element
.find( "input, textarea" )
diff --git a/js/jquery.mobile.support.js b/js/jquery.mobile.support.js
index a489be1f8c9..73102d7ee51 100644
--- a/js/jquery.mobile.support.js
+++ b/js/jquery.mobile.support.js
@@ -46,13 +46,12 @@ function propExists( prop ){
function baseTagTest(){
var fauxBase = location.protocol + '//' + location.host + location.pathname + "ui-dir/",
base = $("
-
+