From eee613d7c1f3ee9d53694c35a8833fffe0b3f06e Mon Sep 17 00:00:00 2001
From: Dave Penfold
Date: Sat, 30 Oct 2010 22:15:45 -0700
Subject: [PATCH 01/50] Increase y axis threshold on swiping from 20 to 75
---
js/jquery.mobile.event.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
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" );
From 3d9242079aaf4e0417820f46c285b343818ae405 Mon Sep 17 00:00:00 2001
From: hochi
Date: Sat, 23 Oct 2010 02:53:11 +0800
Subject: [PATCH 02/50] fixed is() selector
---
js/jquery.mobile.listview.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/js/jquery.mobile.listview.js b/js/jquery.mobile.listview.js
index f88d600f79a..064589cc8cf 100644
--- a/js/jquery.mobile.listview.js
+++ b/js/jquery.mobile.listview.js
@@ -129,7 +129,7 @@ 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" );
From bd8f838bf911f76b283bc76e05ba532aaaedb450 Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Sat, 23 Oct 2010 04:41:36 +0800
Subject: [PATCH 03/50] used indexOf instead of match.
---
js/jquery.mobile.support.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/js/jquery.mobile.support.js b/js/jquery.mobile.support.js
index a489be1f8c9..a590f0e701c 100644
--- a/js/jquery.mobile.support.js
+++ b/js/jquery.mobile.support.js
@@ -47,7 +47,7 @@ function baseTagTest(){
var fauxBase = location.protocol + '//' + location.host + location.pathname + "ui-dir/",
base = $(" ", {"href": fauxBase}).appendTo("head"),
link = $( " " ).prependTo( fakeBody );
- $.support.dynamicBaseTag = !!link[0].href.match(fauxBase);
+ $.support.dynamicBaseTag = link[0].href.indexOf(fauxBase) === 0;
base.remove();
};
From 6d122f28b9a4f234f8b458b22dbb629f2a5a4257 Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Sat, 23 Oct 2010 04:45:47 +0800
Subject: [PATCH 04/50] moved the base tag check call to within the support
extend.
---
js/jquery.mobile.support.js | 10 +++++-----
1 file changed, 5 insertions(+), 5 deletions(-)
diff --git a/js/jquery.mobile.support.js b/js/jquery.mobile.support.js
index a590f0e701c..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 = $(" ", {"href": fauxBase}).appendTo("head"),
- link = $( " " ).prependTo( fakeBody );
- $.support.dynamicBaseTag = link[0].href.indexOf(fauxBase) === 0;
+ link = $( " " ).prependTo( fakeBody ),
+ rebase = link[0].href;
base.remove();
+ return rebase.indexOf(fauxBase) === 0;
};
-baseTagTest();
-
$.extend( $.support, {
orientation: "orientation" in window,
touch: "ontouchend" in document,
@@ -61,7 +60,8 @@ $.extend( $.support, {
mediaquery: $.media('only all'),
cssPseudoElement: !!propExists('content'),
boxShadow: !!propExists('boxShadow') && !bb,
- scrollTop: ("pageXOffset" in window || "scrollTop" in document.documentElement || "scrollTop" in fakeBody[0]) && !webos
+ scrollTop: ("pageXOffset" in window || "scrollTop" in document.documentElement || "scrollTop" in fakeBody[0]) && !webos,
+ dynamicBaseTag: baseTagTest()
});
fakeBody.remove();
From 576676f25c993208ab4b981b52c14640a1a2d608 Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Sat, 23 Oct 2010 06:59:14 +0800
Subject: [PATCH 05/50] e vs event. Fixed.
---
js/jquery.mobile.listview.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/js/jquery.mobile.listview.js b/js/jquery.mobile.listview.js
index 064589cc8cf..4ac216aea1b 100644
--- a/js/jquery.mobile.listview.js
+++ b/js/jquery.mobile.listview.js
@@ -111,7 +111,7 @@ 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 ) {
+ if ( !jQuery( event.target ).closest( "a" ).length ) {
jQuery( this ).find( "a" ).first().trigger( "click" );
return false;
}
From 3335bc6a7232c0832639b33af1de1316201019b0 Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Sat, 23 Oct 2010 06:59:42 +0800
Subject: [PATCH 06/50] used click in place of tap
---
js/jquery.mobile.listview.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/js/jquery.mobile.listview.js b/js/jquery.mobile.listview.js
index 4ac216aea1b..a20ff358647 100644
--- a/js/jquery.mobile.listview.js
+++ b/js/jquery.mobile.listview.js
@@ -110,7 +110,7 @@ jQuery.widget( "mobile.listview", jQuery.mobile.widget, {
});
// tapping the whole LI triggers ajaxClick on the first link
- $list.delegate( "li", "tap", function(event) {
+ $list.delegate( "li", "click", function(event) {
if ( !jQuery( event.target ).closest( "a" ).length ) {
jQuery( this ).find( "a" ).first().trigger( "click" );
return false;
From e29df9380fcb251cff1a8ef38d6352f274688c6d Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Sat, 23 Oct 2010 07:00:22 +0800
Subject: [PATCH 07/50] click instead of tap
---
js/jquery.mobile.navbar.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/js/jquery.mobile.navbar.js b/js/jquery.mobile.navbar.js
index 6c07fc432d7..a06af7d1ec3 100755
--- a/js/jquery.mobile.navbar.js
+++ b/js/jquery.mobile.navbar.js
@@ -32,7 +32,7 @@ $.fn.navbar = function(settings){
$navbar
.find('ul a')
.buttonMarkup({corners: false, shadow:false, iconpos: o.iconpos})
- .bind('tap',function(){
+ .bind('click',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');
From c2e8f31cd7a200f973329f73a031f6afc98c5ec8 Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Sat, 23 Oct 2010 07:05:13 +0800
Subject: [PATCH 08/50] fixed icon positioning.
---
themes/default/jquery.mobile.collapsible.css | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/themes/default/jquery.mobile.collapsible.css b/themes/default/jquery.mobile.collapsible.css
index 011d8c7469b..1985b1848f2 100644
--- a/themes/default/jquery.mobile.collapsible.css
+++ b/themes/default/jquery.mobile.collapsible.css
@@ -9,7 +9,7 @@
.ui-collapsible-heading a .ui-btn-inner { padding-left: 40px; }
.ui-collapsible-heading a span.ui-btn { position: absolute; left: 6px; top: 50%; margin: -12px 0 0 0; width: 20px; height: 20px; padding: 1px 0px 1px 2px; text-indent: -9999px; }
.ui-collapsible-heading a span.ui-btn .ui-btn-inner { padding: 0; }
-.ui-collapsible-heading a span.ui-btn .ui-icon { left: 2px; }
+.ui-collapsible-heading a span.ui-btn .ui-icon { left: 0; margin-top: -10px; }
.ui-collapsible-heading-status { position:absolute; left:-99999px; }
.ui-collapsible-content { display: block; padding: 10px 0 10px 8px; }
.ui-collapsible-content-collapsed { display: none; }
\ No newline at end of file
From 4e6fe743252f0ebfc6588ce832432501f7ed08f4 Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Sat, 23 Oct 2010 20:57:54 +0800
Subject: [PATCH 09/50] Used triggerHandler instead of trigger to allow
collapsibles to be embedded. Fixes #255
---
js/jquery.mobile.collapsible.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/js/jquery.mobile.collapsible.js b/js/jquery.mobile.collapsible.js
index 0d7eb20a416..c2eddeefc84 100644
--- a/js/jquery.mobile.collapsible.js
+++ b/js/jquery.mobile.collapsible.js
@@ -81,10 +81,10 @@ $.fn.collapsible = function(options){
collapsibleHeading.click(function(){
if( collapsibleHeading.is('.ui-collapsible-heading-collapsed') ){
- collapsibleContain.trigger('expand');
+ collapsibleContain.triggerHandler('expand');
}
else {
- collapsibleContain.trigger('collapse');
+ collapsibleContain.triggerHandler('collapse');
}
return false;
});
From 893115a95cfeef1063835e557035f02e8720db13 Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Sat, 23 Oct 2010 21:01:31 +0800
Subject: [PATCH 10/50] fixed css references in markup
---
docs/content/api-content.html | 2 +-
docs/content/content-collapsible.html | 3 +--
docs/content/content-grids.html | 2 +-
docs/content/content-html.html | 2 +-
docs/content/content-themes.html | 2 +-
docs/content/index.html | 2 +-
docs/pages/dialog-alt.html | 2 +-
docs/pages/dialog-buttons.html | 2 +-
docs/pages/dialog-success.html | 2 +-
docs/pages/transition-success.html | 2 +-
10 files changed, 10 insertions(+), 11 deletions(-)
diff --git a/docs/content/api-content.html b/docs/content/api-content.html
index 2db939d78e2..5862826e463 100755
--- a/docs/content/api-content.html
+++ b/docs/content/api-content.html
@@ -2,7 +2,7 @@
jQuery Mobile Docs - Content formatting
-
+
diff --git a/docs/content/content-collapsible.html b/docs/content/content-collapsible.html
index f34e8526017..78e4123ab96 100755
--- a/docs/content/content-collapsible.html
+++ b/docs/content/content-collapsible.html
@@ -2,9 +2,8 @@
jQuery Mobile Docs - Content formatting
-
+
-
diff --git a/docs/content/content-grids.html b/docs/content/content-grids.html
index eece49a657f..5ed433cd39b 100755
--- a/docs/content/content-grids.html
+++ b/docs/content/content-grids.html
@@ -2,7 +2,7 @@
jQuery Mobile Docs - Content formatting
-
+
diff --git a/docs/content/content-html.html b/docs/content/content-html.html
index 6591d80dd3f..82537b2ba42 100755
--- a/docs/content/content-html.html
+++ b/docs/content/content-html.html
@@ -2,7 +2,7 @@
jQuery Mobile Docs - Content formatting
-
+
diff --git a/docs/content/content-themes.html b/docs/content/content-themes.html
index 81d370728d8..d20c3550734 100755
--- a/docs/content/content-themes.html
+++ b/docs/content/content-themes.html
@@ -2,7 +2,7 @@
jQuery Mobile Docs - Content formatting
-
+
diff --git a/docs/content/index.html b/docs/content/index.html
index 2f2c7cf4afe..ad418a0a6b9 100755
--- a/docs/content/index.html
+++ b/docs/content/index.html
@@ -2,7 +2,7 @@
jQuery Mobile Docs - Content formatting
-
+
diff --git a/docs/pages/dialog-alt.html b/docs/pages/dialog-alt.html
index c4aba3e22b0..9c2539485dd 100644
--- a/docs/pages/dialog-alt.html
+++ b/docs/pages/dialog-alt.html
@@ -2,7 +2,7 @@
jQuery Mobile Framework - Dialog Example
-
+
diff --git a/docs/pages/dialog-buttons.html b/docs/pages/dialog-buttons.html
index 5426ab8f5fc..0422b10619a 100644
--- a/docs/pages/dialog-buttons.html
+++ b/docs/pages/dialog-buttons.html
@@ -2,7 +2,7 @@
jQuery Mobile Framework - Dialog Example
-
+
diff --git a/docs/pages/dialog-success.html b/docs/pages/dialog-success.html
index 98caf9a43fc..2f30788a9c0 100644
--- a/docs/pages/dialog-success.html
+++ b/docs/pages/dialog-success.html
@@ -2,7 +2,7 @@
jQuery Mobile Framework - Dialog Example
-
+
diff --git a/docs/pages/transition-success.html b/docs/pages/transition-success.html
index df1136801c3..ff22e61f457 100644
--- a/docs/pages/transition-success.html
+++ b/docs/pages/transition-success.html
@@ -2,7 +2,7 @@
jQuery Mobile Framework - Dialog Example
-
+
From f7fe113403dede00d46002c7d16c1387f04f442d Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Sat, 23 Oct 2010 22:20:06 +0800
Subject: [PATCH 11/50] added support for grouped collapsibles that make
accordions. Parent element just needs a data-role of collapsible-set. Fixes
#87, Fixes #178
---
docs/content/content-collapsible.html | 25 +++++
js/jquery.mobile.collapsible.js | 100 ++++++++++++++-----
themes/default/jquery.mobile.collapsible.css | 5 +-
3 files changed, 105 insertions(+), 25 deletions(-)
diff --git a/docs/content/content-collapsible.html b/docs/content/content-collapsible.html
index 78e4123ab96..0a6ad70d18b 100755
--- a/docs/content/content-collapsible.html
+++ b/docs/content/content-collapsible.html
@@ -101,8 +101,33 @@ 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:
+
+
+
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/js/jquery.mobile.collapsible.js b/js/jquery.mobile.collapsible.js
index c2eddeefc84..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,35 +52,91 @@ $.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.triggerHandler('expand');
+ collapsibleContain.trigger('expand');
}
else {
- collapsibleContain.triggerHandler('collapse');
+ collapsibleContain.trigger('collapse');
}
return false;
});
diff --git a/themes/default/jquery.mobile.collapsible.css b/themes/default/jquery.mobile.collapsible.css
index 1985b1848f2..5d89e050ca1 100644
--- a/themes/default/jquery.mobile.collapsible.css
+++ b/themes/default/jquery.mobile.collapsible.css
@@ -12,4 +12,7 @@
.ui-collapsible-heading a span.ui-btn .ui-icon { left: 0; margin-top: -10px; }
.ui-collapsible-heading-status { position:absolute; left:-99999px; }
.ui-collapsible-content { display: block; padding: 10px 0 10px 8px; }
-.ui-collapsible-content-collapsed { display: none; }
\ No newline at end of file
+.ui-collapsible-content-collapsed { display: none; }
+
+.ui-collapsible-set { margin: .5em 0; }
+.ui-collapsible-set .ui-collapsible-contain { margin: -1px 0 0; }
\ No newline at end of file
From 8264f9137d85b4a29055605a37ab6921561a46c1 Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Sun, 24 Oct 2010 05:16:49 +0800
Subject: [PATCH 12/50] typo
---
js/jquery.mobile.listview.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/js/jquery.mobile.listview.js b/js/jquery.mobile.listview.js
index a20ff358647..32f3bd25e86 100644
--- a/js/jquery.mobile.listview.js
+++ b/js/jquery.mobile.listview.js
@@ -109,7 +109,7 @@ jQuery.widget( "mobile.listview", jQuery.mobile.widget, {
}
});
- // tapping the whole LI triggers ajaxClick on the first link
+ // 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" );
From e7a1f3d3134f4042708ced4f68bab432e1ce480e Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Sun, 24 Oct 2010 05:24:06 +0800
Subject: [PATCH 13/50] Removed the ajaxClick function and moved its logic into
the live click event handler, where it is now refactored and simplified. Thx
to Jeffrey Way for ideas that went into this refactor.
Also, clicks that are triggered on anchors will now be able to make a new http request, which improves listview behavior when clicking LIs that resolve to external urls.
Included in commit is a new demo/test page with various link types to make sure they behave as expected.
Fixes #272, Fixes #264
---
docs/pages/docs-link-scenarios.html | 40 +++++++++++++++++
js/jquery.mobile.js | 66 +++++++++++++----------------
2 files changed, 69 insertions(+), 37 deletions(-)
create mode 100755 docs/pages/docs-link-scenarios.html
diff --git a/docs/pages/docs-link-scenarios.html b/docs/pages/docs-link-scenarios.html
new file mode 100755
index 00000000000..45e843f7fc3
--- /dev/null
+++ b/docs/pages/docs-link-scenarios.html
@@ -0,0 +1,40 @@
+
+
+
+ jQuery Mobile Docs - Pages
+
+
+
+
+
+
+
+
+
Linking pages
+
+
+
+
+
jQuery Mobile is designed to work with simple page linking conventions. The following list demonstrates how different types of links will be handled, either remotely or through an Ajax Request.
+
+
+
+
+
+
+
+
diff --git a/js/jquery.mobile.js b/js/jquery.mobile.js
index fc8351279d7..bb7a2e48efb 100644
--- a/js/jquery.mobile.js
+++ b/js/jquery.mobile.js
@@ -104,47 +104,39 @@
$('#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 = '';
- }
-
- // set href to relative path using baseURL and
- if( !/https?:\/\//.test(href) ){
- href = newBaseURL + href;
+ //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]" ),
+ nullLink = href == '#';
+
+ if( nullLink ){
+ //for links created purely for interaction - ignore
+ return false;
}
-
- //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
+ else 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('/') !== 0 && href.indexOf('#') !== 0 ){
+ href = getBaseURL() + href;
}
+ 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.
@@ -199,7 +191,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
From 5e7fb6940397c82a0ec11726e58306a43604e603 Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Sun, 24 Oct 2010 21:13:33 +0800
Subject: [PATCH 14/50] whitespace
---
js/jquery.mobile.js | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/js/jquery.mobile.js b/js/jquery.mobile.js
index bb7a2e48efb..184299edee3 100644
--- a/js/jquery.mobile.js
+++ b/js/jquery.mobile.js
@@ -399,7 +399,8 @@
minBreakpoints = [],
maxBreakpoints = [];
- $html.removeClass( minPrefix + $.mobile.resolutionBreakpoints.join(" " + minPrefix) + maxPrefix + " " + $.mobile.resolutionBreakpoints.join(" " + maxPrefix) );
+ $html.removeClass( minPrefix + $.mobile.resolutionBreakpoints.join(" " + minPrefix) + maxPrefix +
+ " " + $.mobile.resolutionBreakpoints.join(" " + maxPrefix) );
$.each($.mobile.resolutionBreakpoints,function( i ){
if( currWidth >= $.mobile.resolutionBreakpoints[ i ] ){
From 57bf804ab37f9d550c4010c8aae2768f331987d9 Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Sun, 24 Oct 2010 21:39:21 +0800
Subject: [PATCH 15/50] made default breakpoints non-overrideable and exposed
function $.mobile.addResolutionBreakpoints (accepts number or array of
numbers) which can be used to add widths to be used in min/max media classes
on HTML element.
---
js/jquery.mobile.js | 37 ++++++++++++++++++++++++-------------
1 file changed, 24 insertions(+), 13 deletions(-)
diff --git a/js/jquery.mobile.js b/js/jquery.mobile.js
index 184299edee3..fb85f4f965b 100644
--- a/js/jquery.mobile.js
+++ b/js/jquery.mobile.js
@@ -59,7 +59,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;
@@ -392,33 +393,43 @@
});
//add breakpoint classes for faux media-q support
- function resolutionBreakpoints(){
+ function detectResolutionBreakpoints(){
var currWidth = $window.width(),
minPrefix = "min-width-",
maxPrefix = "max-width-",
minBreakpoints = [],
maxBreakpoints = [];
- $html.removeClass( minPrefix + $.mobile.resolutionBreakpoints.join(" " + minPrefix) + maxPrefix +
- " " + $.mobile.resolutionBreakpoints.join(" " + maxPrefix) );
+ $html.removeClass( minPrefix + resolutionBreakpoints.join(" " + minPrefix) + maxPrefix +
+ " " + resolutionBreakpoints.join(" " + maxPrefix) );
- $.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( resolutionBreakpoints[ i ] );
}
- if( currWidth <= $.mobile.resolutionBreakpoints[ i ] ){
- maxBreakpoints.push( $.mobile.resolutionBreakpoints[ i ] );
+ if( currWidth <= resolutionBreakpoints[ i ] ){
+ maxBreakpoints.push( resolutionBreakpoints[ i ] );
}
});
$html.addClass( minPrefix + minBreakpoints.join(" " + minPrefix) + " " + maxPrefix + maxBreakpoints.join(" " + maxPrefix) );
};
- //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(
From 13add4caaad7126f11cdbf7155ea9d335b989662 Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Sun, 24 Oct 2010 21:43:34 +0800
Subject: [PATCH 16/50] made sure empty min/max breakpoint classes aren't added
---
js/jquery.mobile.js | 8 ++++++--
1 file changed, 6 insertions(+), 2 deletions(-)
diff --git a/js/jquery.mobile.js b/js/jquery.mobile.js
index fb85f4f965b..4d3934a07cc 100644
--- a/js/jquery.mobile.js
+++ b/js/jquery.mobile.js
@@ -398,7 +398,8 @@
minPrefix = "min-width-",
maxPrefix = "max-width-",
minBreakpoints = [],
- maxBreakpoints = [];
+ maxBreakpoints = [],
+ breakpointClasses;
$html.removeClass( minPrefix + resolutionBreakpoints.join(" " + minPrefix) + maxPrefix +
" " + resolutionBreakpoints.join(" " + maxPrefix) );
@@ -412,7 +413,10 @@
}
});
- $html.addClass( minPrefix + minBreakpoints.join(" " + minPrefix) + " " + maxPrefix + maxBreakpoints.join(" " + maxPrefix) );
+ if( minBreakpoints.length ){ breakpointClasses = minPrefix + minBreakpoints.join(" " + minPrefix); }
+ if( maxBreakpoints.length ){ breakpointClasses += " " + maxPrefix + maxBreakpoints.join(" " + maxPrefix); }
+
+ $html.addClass( breakpointClasses );
};
//add breakpoints now and on oc/resize events
From db99385abe8e242ba3c04890d4d17b5da258bdea Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Mon, 25 Oct 2010 22:31:36 +0800
Subject: [PATCH 17/50] fixed typo in where the blank space was added.
---
js/jquery.mobile.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/js/jquery.mobile.js b/js/jquery.mobile.js
index 4d3934a07cc..e2ccd1331ae 100644
--- a/js/jquery.mobile.js
+++ b/js/jquery.mobile.js
@@ -401,8 +401,8 @@
maxBreakpoints = [],
breakpointClasses;
- $html.removeClass( minPrefix + resolutionBreakpoints.join(" " + minPrefix) + maxPrefix +
- " " + resolutionBreakpoints.join(" " + maxPrefix) );
+ $html.removeClass( minPrefix + resolutionBreakpoints.join(" " + minPrefix) + " " +
+ maxPrefix + resolutionBreakpoints.join(" " + maxPrefix) );
$.each(resolutionBreakpoints,function( i ){
if( currWidth >= resolutionBreakpoints[ i ] ){
From 1a614cac1a7422f6128727569b9351e749456591 Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Mon, 25 Oct 2010 22:45:30 +0800
Subject: [PATCH 18/50] added px suffix to all media-min/max classes. Updated
CSS usage to match.
---
.../ui-datepicker/jquery.ui.datepicker.css | 2 +-
js/jquery.mobile.js | 15 +++++++++------
themes/default/jquery.mobile.controlgroup.css | 4 ++--
themes/default/jquery.mobile.forms.select.css | 4 ++--
themes/default/jquery.mobile.forms.slider.css | 4 ++--
themes/default/jquery.mobile.forms.textinput.css | 8 ++++----
6 files changed, 20 insertions(+), 17 deletions(-)
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.js b/js/jquery.mobile.js
index e2ccd1331ae..0efd5c70fa3 100644
--- a/js/jquery.mobile.js
+++ b/js/jquery.mobile.js
@@ -399,22 +399,25 @@
maxPrefix = "max-width-",
minBreakpoints = [],
maxBreakpoints = [],
+ unit = "px",
breakpointClasses;
+ console.log(minPrefix + resolutionBreakpoints.join(unit + " " + minPrefix) + unit + " " +
+ maxPrefix + resolutionBreakpoints.join( unit + " " + maxPrefix) + unit);
- $html.removeClass( minPrefix + resolutionBreakpoints.join(" " + minPrefix) + " " +
- maxPrefix + resolutionBreakpoints.join(" " + maxPrefix) );
+ $html.removeClass( minPrefix + resolutionBreakpoints.join(unit + " " + minPrefix) + unit + " " +
+ maxPrefix + resolutionBreakpoints.join( unit + " " + maxPrefix) + unit );
$.each(resolutionBreakpoints,function( i ){
if( currWidth >= resolutionBreakpoints[ i ] ){
- minBreakpoints.push( resolutionBreakpoints[ i ] );
+ minBreakpoints.push( minPrefix + resolutionBreakpoints[ i ] + unit );
}
if( currWidth <= resolutionBreakpoints[ i ] ){
- maxBreakpoints.push( resolutionBreakpoints[ i ] );
+ maxBreakpoints.push( maxPrefix + resolutionBreakpoints[ i ] + unit );
}
});
- if( minBreakpoints.length ){ breakpointClasses = minPrefix + minBreakpoints.join(" " + minPrefix); }
- if( maxBreakpoints.length ){ breakpointClasses += " " + maxPrefix + maxBreakpoints.join(" " + maxPrefix); }
+ if( minBreakpoints.length ){ breakpointClasses = minBreakpoints.join(" "); }
+ if( maxBreakpoints.length ){ breakpointClasses += " " + maxBreakpoints.join(" "); }
$html.addClass( breakpointClasses );
};
diff --git a/themes/default/jquery.mobile.controlgroup.css b/themes/default/jquery.mobile.controlgroup.css
index bbe54ae244f..2beaceefc67 100644
--- a/themes/default/jquery.mobile.controlgroup.css
+++ b/themes/default/jquery.mobile.controlgroup.css
@@ -23,5 +23,5 @@
.ui-controlgroup .ui-btn-icon-notext .ui-btn-inner { padding: 5px 6px 5px 5px; }
*/
-.min-width-480 .ui-controlgroup-label { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; }
-.min-width-480 .ui-controlgroup-controls { width: 60%; display: inline-block; }
\ No newline at end of file
+.min-width-480px .ui-controlgroup-label { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; }
+.min-width-480px .ui-controlgroup-controls { width: 60%; display: inline-block; }
\ No newline at end of file
diff --git a/themes/default/jquery.mobile.forms.select.css b/themes/default/jquery.mobile.forms.select.css
index 427c5598b39..5120e1ea7bb 100644
--- a/themes/default/jquery.mobile.forms.select.css
+++ b/themes/default/jquery.mobile.forms.select.css
@@ -23,5 +23,5 @@ label.ui-select { font-size: 16px; line-height: 1.4; font-weight: normal; margi
/*used in listbox - to be removed/replaced with page-style hiding*/
.ui-helper-hidden,.ui-mobile .ui-content-hidden { display: none; }
-.min-width-480 label.ui-select { display: inline-block; width: 20%; margin: 0 2% 0 0; }
-.min-width-480 .ui-select { width: 60%; display: inline-block; }
\ No newline at end of file
+.min-width-480px label.ui-select { display: inline-block; width: 20%; margin: 0 2% 0 0; }
+.min-width-480px .ui-select { width: 60%; display: inline-block; }
\ No newline at end of file
diff --git a/themes/default/jquery.mobile.forms.slider.css b/themes/default/jquery.mobile.forms.slider.css
index 9ae108f53fe..457e3a1e817 100644
--- a/themes/default/jquery.mobile.forms.slider.css
+++ b/themes/default/jquery.mobile.forms.slider.css
@@ -9,8 +9,8 @@ select.ui-slider-switch { display: none; }
div.ui-slider { position: relative; display: inline-block; overflow: visible; height: 15px; padding: 0; margin: 0 2% 0 15px; top: 4px; width: 66%; }
a.ui-slider-handle { position: absolute; z-index: 10; top: 50%; width: 28px; height: 28px; margin-top: -15px; margin-left: -15px; }
a.ui-slider-handle .ui-btn-inner { padding-left: 0; padding-right: 0; }
-.min-width-480 label.ui-slider { display: inline-block; width: 20%; margin: 0 2% 0 0; }
-.min-width-480 div.ui-slider { width: 45%; }
+.min-width-480px label.ui-slider { display: inline-block; width: 20%; margin: 0 2% 0 0; }
+.min-width-480px div.ui-slider { width: 45%; }
div.ui-slider-switch { height: 32px; overflow: hidden; margin-left: 0; }
div.ui-slider-inneroffset { margin-left: 50%; position: absolute; top: 1px; height: 100%; width: 50%; }
diff --git a/themes/default/jquery.mobile.forms.textinput.css b/themes/default/jquery.mobile.forms.textinput.css
index 8fb38b7d4f1..279ab944998 100644
--- a/themes/default/jquery.mobile.forms.textinput.css
+++ b/themes/default/jquery.mobile.forms.textinput.css
@@ -12,7 +12,7 @@ textarea.ui-input-text { height: 50px; -webkit-transition: height 200ms linear;
.ui-input-search .ui-input-clear-hidden { display: none; }
/* orientation adjustments - incomplete!*/
-.min-width-480 label.ui-input-text { vertical-align: top; }
-.min-width-480 label.ui-input-text, label.ui-select { display: inline-block; width: 20%; margin: 0 2% 0 0; }
-.min-width-480 input.ui-input-text, textarea.ui-input-text, .ui-input-search { width: 60%; display: inline-block; }
-.min-width-480 .ui-input-search { width: 50%; }
\ No newline at end of file
+.min-width-480px label.ui-input-text { vertical-align: top; }
+.min-width-480px label.ui-input-text, label.ui-select { display: inline-block; width: 20%; margin: 0 2% 0 0; }
+.min-width-480px input.ui-input-text, textarea.ui-input-text, .ui-input-search { width: 60%; display: inline-block; }
+.min-width-480px .ui-input-search { width: 50%; }
\ No newline at end of file
From 8668a50268bb61af5c47fccefa2fe0378195bc56 Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Mon, 25 Oct 2010 22:53:34 +0800
Subject: [PATCH 19/50] duplicate id
---
docs/forms/forms-all.html | 5 ++---
1 file changed, 2 insertions(+), 3 deletions(-)
diff --git a/docs/forms/forms-all.html b/docs/forms/forms-all.html
index cf2bdcef30a..f4880a0667f 100755
--- a/docs/forms/forms-all.html
+++ b/docs/forms/forms-all.html
@@ -4,7 +4,6 @@
jQuery Mobile Docs - Forms
-
@@ -30,8 +29,8 @@ Form elements
- Password:
-
+ Password:
+
From 4dcf97b72e72bd31134ba5c10210aa8ad4e44f32 Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Mon, 25 Oct 2010 23:06:20 +0800
Subject: [PATCH 20/50] add/remove active class on clicked link.
---
js/jquery.mobile.js | 12 +++++++++++-
1 file changed, 11 insertions(+), 1 deletion(-)
diff --git a/js/jquery.mobile.js b/js/jquery.mobile.js
index 0efd5c70fa3..9c12f8f1f44 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',
@@ -118,7 +120,10 @@
//for links created purely for interaction - ignore
return false;
}
- else if( external ){
+
+ activeClickedLink = $this.closest( ".ui-btn" ).addClass( activeBtnClass );
+
+ if( external ){
//deliberately redirect, in case click was triggered
location.href = href;
}
@@ -233,6 +238,11 @@
hashListener = true;
}, 500);
}
+ //remove active classes
+ if(activeClickedLink){
+ activeClickedLink.removeClass( activeBtnClass );
+ activeClickedLink = null;
+ }
}
if(transition){
From c0dbbea0c09f716798bdcac83eee0caa63f80465 Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Mon, 25 Oct 2010 23:06:43 +0800
Subject: [PATCH 21/50] removed a console.log
---
js/jquery.mobile.js | 2 --
1 file changed, 2 deletions(-)
diff --git a/js/jquery.mobile.js b/js/jquery.mobile.js
index 9c12f8f1f44..1698613a775 100644
--- a/js/jquery.mobile.js
+++ b/js/jquery.mobile.js
@@ -411,8 +411,6 @@
maxBreakpoints = [],
unit = "px",
breakpointClasses;
- console.log(minPrefix + resolutionBreakpoints.join(unit + " " + minPrefix) + unit + " " +
- maxPrefix + resolutionBreakpoints.join( unit + " " + maxPrefix) + unit);
$html.removeClass( minPrefix + resolutionBreakpoints.join(unit + " " + minPrefix) + unit + " " +
maxPrefix + resolutionBreakpoints.join( unit + " " + maxPrefix) + unit );
From 46267a20b10bd193f01930b29154ef795e0abbc5 Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Mon, 25 Oct 2010 23:27:54 +0800
Subject: [PATCH 22/50] fixed path to google compiler in Makefile
---
Makefile | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/Makefile b/Makefile
index a693ac13426..a25e70f825a 100755
--- a/Makefile
+++ b/Makefile
@@ -66,7 +66,7 @@ mobile:
min: mobile
@@head -8 js/jquery.mobile.js > ${MIN}
- @@java -jar ../jquery/build/google-compiler-20100917.jar --js ${MAX} --warning_level QUIET --js_output_file ${MIN}.tmp
+ @@java -jar build/google-compiler-20100917.jar --js ${MAX} --warning_level QUIET --js_output_file ${MIN}.tmp
@@cat ${MIN}.tmp >> ${MIN}
@@rm -f ${MIN}.tmp
From a4d09a7a3f3480b727e13c66c22756b0a6b2ffd0 Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Tue, 26 Oct 2010 21:26:22 +0800
Subject: [PATCH 23/50] fixed up the demo so it works with our current events
anyway
---
experiments/photos/_photo2.html | 16 ++++---
experiments/photos/_photo3.html | 16 ++++---
experiments/photos/_photo4.html | 16 ++++---
experiments/photos/_photo5.html | 16 ++++---
experiments/photos/_photo6.html | 15 ++++---
.../photos/{_photo1.html => index.html} | 14 +++----
experiments/photos/photos.css | 3 +-
experiments/photos/photos.js | 42 +++++++++----------
8 files changed, 63 insertions(+), 75 deletions(-)
rename experiments/photos/{_photo1.html => index.html} (67%)
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 @@
jQuery Mobile Framework - Photo 1
+
+
-
-
-
+
A canoe
-
+
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 @@
jQuery Mobile Framework - Photo 1
+
+
-
-
-
+
A dock
-
+
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 @@
jQuery Mobile Framework - Photo 1
+
+
-
-
-
+
A kayak
-
+
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 @@
jQuery Mobile Framework - Photo 1
+
+
-
-
-
+
Nathan running
-
+
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 @@
jQuery Mobile Framework - Photo 1
+
+
-
-
-
+
Sandy beach
-
+
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 @@
jQuery Mobile Framework - Photo 1
+
+
-
-
-
+
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();
+})
+
+
From b9960e33fed045d5d09f04589b01716ead7054d9 Mon Sep 17 00:00:00 2001
From: Beau Smith
Date: Tue, 26 Oct 2010 08:28:31 +0800
Subject: [PATCH 24/50] Add missing commas in button styles.
---
themes/default/jquery.mobile.button.css | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/themes/default/jquery.mobile.button.css b/themes/default/jquery.mobile.button.css
index 8aff729f764..a4c197b937d 100644
--- a/themes/default/jquery.mobile.button.css
+++ b/themes/default/jquery.mobile.button.css
@@ -19,10 +19,10 @@
.ui-bar .ui-btn-icon-left .ui-btn-inner { padding-left: 27px; }
.ui-btn-icon-right .ui-btn-inner { padding-right: 33px; }
.ui-header .ui-btn-icon-right .ui-btn-inner,
-.ui-footer .ui-btn-icon-right .ui-btn-inner
+.ui-footer .ui-btn-icon-right .ui-btn-inner,
.ui-bar .ui-btn-icon-right .ui-btn-inner { padding-right: 27px; }
.ui-btn-icon-top .ui-btn-inner { padding-top: 33px; }
-.ui-header .ui-btn-icon-top .ui-btn-inner
+.ui-header .ui-btn-icon-top .ui-btn-inner,
.ui-footer .ui-btn-icon-top .ui-btn-inner,
.ui-bar .ui-btn-icon-top .ui-btn-inner { padding-top: 27px; }
.ui-btn-icon-bottom .ui-btn-inner { padding-bottom: 33px; }
From efdd82fa517f5f4b44336a4fe6f9ad1273f0066e Mon Sep 17 00:00:00 2001
From: Beau Smith
Date: Tue, 26 Oct 2010 10:28:16 +0800
Subject: [PATCH 25/50] Removing un-necessary specificity from .ui-checkbox and
.ui-radio styling.
---
themes/default/jquery.mobile.controlgroup.css | 8 ++++----
themes/default/jquery.mobile.forms.checkboxradio.css | 2 +-
2 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/themes/default/jquery.mobile.controlgroup.css b/themes/default/jquery.mobile.controlgroup.css
index 2beaceefc67..abeffef57a2 100644
--- a/themes/default/jquery.mobile.controlgroup.css
+++ b/themes/default/jquery.mobile.controlgroup.css
@@ -9,13 +9,13 @@
.ui-controlgroup-controls { display: block; width: 95%;}
.ui-controlgroup li { list-style: none; }
.ui-controlgroup-vertical .ui-btn,
-.ui-controlgroup-vertical div.ui-checkbox, .ui-controlgroup-vertical div.ui-radio { margin: 0; border-bottom-width: 0; }
+.ui-controlgroup-vertical .ui-checkbox, .ui-controlgroup-vertical .ui-radio { margin: 0; border-bottom-width: 0; }
.ui-controlgroup-vertical .ui-controlgroup-last { border-bottom-width: 1px; }
.ui-controlgroup-horizontal { padding: 0; }
.ui-controlgroup-horizontal .ui-btn,
-.ui-controlgroup-horizontal div.ui-checkbox, .ui-controlgroup-horizontal div.ui-radio { margin: 0 -5px 0 0; display: inline-block; }
-.ui-controlgroup-horizontal div.ui-checkbox .ui-btn, .ui-controlgroup-horizontal div.ui-radio .ui-btn,
-.ui-controlgroup-horizontal div.ui-checkbox:last-child, .ui-controlgroup-horizontal div.ui-radio:last-child { margin-right: 0; }
+.ui-controlgroup-horizontal .ui-checkbox, .ui-controlgroup-horizontal .ui-radio { margin: 0 -5px 0 0; display: inline-block; }
+.ui-controlgroup-horizontal .ui-checkbox .ui-btn, .ui-controlgroup-horizontal .ui-radio .ui-btn,
+.ui-controlgroup-horizontal .ui-checkbox:last-child, .ui-controlgroup-horizontal .ui-radio:last-child { margin-right: 0; }
.ui-controlgroup-horizontal .ui-controlgroup-last { margin-right: 0; }
.ui-controlgroup .ui-checkbox label, .ui-controlgroup .ui-radio label { font-size: 16px; }
/* conflicts with listview..
diff --git a/themes/default/jquery.mobile.forms.checkboxradio.css b/themes/default/jquery.mobile.forms.checkboxradio.css
index ee64768c059..87225b44099 100644
--- a/themes/default/jquery.mobile.forms.checkboxradio.css
+++ b/themes/default/jquery.mobile.forms.checkboxradio.css
@@ -3,7 +3,7 @@
* Copyright (c) jQuery Project
* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
*/
-div.ui-checkbox, div.ui-radio { position:relative; margin: .2em 0 .5em; }
+.ui-checkbox, .ui-radio { position:relative; margin: .2em 0 .5em; }
.ui-checkbox .ui-btn, .ui-radio .ui-btn { margin: 0; text-align: left; }
.ui-checkbox .ui-btn-icon-left .ui-btn-inner,.ui-radio .ui-btn-icon-left .ui-btn-inner { padding-left: 45px; }
.ui-checkbox .ui-btn-icon-right .ui-btn-inner, .ui-radio .ui-btn-icon-right .ui-btn-inner { padding-right: 45px; }
From 968e7a27a812bf3781cd2a9a5473fd3e3666ceae Mon Sep 17 00:00:00 2001
From: Karan Bhangui
Date: Tue, 26 Oct 2010 05:13:59 +0800
Subject: [PATCH 26/50] fixed aside elements being displayed multiple times per
list item
---
js/jquery.mobile.listview.js | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/js/jquery.mobile.listview.js b/js/jquery.mobile.listview.js
index 32f3bd25e86..3c9de26e1c8 100644
--- a/js/jquery.mobile.listview.js
+++ b/js/jquery.mobile.listview.js
@@ -135,7 +135,9 @@ jQuery.widget( "mobile.listview", jQuery.mobile.widget, {
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" ) ) {
From 19b8a548e36cd01a8e15a18883fe53efdf250059 Mon Sep 17 00:00:00 2001
From: Alexander Dimitrov
Date: Mon, 25 Oct 2010 21:14:08 +0800
Subject: [PATCH 27/50] this keyword gets overwritten by jQuery.each
---
js/jquery.mobile.listview.js | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/js/jquery.mobile.listview.js b/js/jquery.mobile.listview.js
index 3c9de26e1c8..13a84abcf1c 100644
--- a/js/jquery.mobile.listview.js
+++ b/js/jquery.mobile.listview.js
@@ -150,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;
@@ -266,7 +267,7 @@ jQuery.widget( "mobile.listview", jQuery.mobile.widget, {
item.addClass( itemClass );
if ( !create ) {
- this._itemApply( $list, item );
+ self._itemApply( $list, item );
}
});
},
From dcece3ef409c8ba683c246457b887f1cd4d44bfd Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Wed, 27 Oct 2010 21:43:46 +0800
Subject: [PATCH 28/50] removed title attr, as aria role handling seems to be
descriptive enough
---
js/jquery.mobile.forms.select.js | 1 -
1 file changed, 1 deletion(-)
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
From 210ee2bc499000516e7f53500074985e1d2107d5 Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Thu, 28 Oct 2010 00:19:01 +0800
Subject: [PATCH 29/50] moved append to before the buttonMarkup call, to make
theming work as expected
---
js/jquery.mobile.forms.textinput.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
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() == ''){
From 3a92e07e81c564d29f3b5ca287a27505a1dc409b Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Thu, 28 Oct 2010 00:19:24 +0800
Subject: [PATCH 30/50] commented-out the call to _numberItems, as it doesn't
yet exist in the listview rewrite
---
js/jquery.mobile.listview.filter.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
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();
From 915a8a30e0d09365818b0d0955c1e19a178ba386 Mon Sep 17 00:00:00 2001
From: Jonatan Littke
Date: Thu, 28 Oct 2010 01:20:59 +0800
Subject: [PATCH 31/50] Fixed broken element.
---
docs/pages/transition-success.html | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/docs/pages/transition-success.html b/docs/pages/transition-success.html
index ff22e61f457..e7da18a2495 100644
--- a/docs/pages/transition-success.html
+++ b/docs/pages/transition-success.html
@@ -14,7 +14,7 @@ Ta-da!
-
That was an animated page transition effect that we added with a code> data-transition attribute on the link.
+
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
+
From efe7ef1d61ab87fdcbcb7282cf6fbbc05c59938e Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Thu, 28 Oct 2010 03:00:21 +0800
Subject: [PATCH 32/50] simplified attr get/check
---
js/jquery.mobile.js | 6 ++----
1 file changed, 2 insertions(+), 4 deletions(-)
diff --git a/js/jquery.mobile.js b/js/jquery.mobile.js
index 1698613a775..4ef54367fc5 100644
--- a/js/jquery.mobile.js
+++ b/js/jquery.mobile.js
@@ -314,10 +314,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, '' );
From d6251682e87dc579dca431ff0dfcd0e7bb5e2cbe Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Thu, 28 Oct 2010 04:13:11 +0800
Subject: [PATCH 33/50] updated regexp to test for protocol or # at beginning
of url.
---
js/jquery.mobile.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/js/jquery.mobile.js b/js/jquery.mobile.js
index 4ef54367fc5..625eb2ecbbb 100644
--- a/js/jquery.mobile.js
+++ b/js/jquery.mobile.js
@@ -113,7 +113,7 @@
//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]" ),
+ external = /^(:?\w+:|#)/.test( href ) || $this.is( "[target],[rel=external]" ),
nullLink = href == '#';
if( nullLink ){
From 7b5730c9aef382fe2b39960f929dd8e5f3e48a07 Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Thu, 28 Oct 2010 04:21:27 +0800
Subject: [PATCH 34/50] removed nullLink var
---
js/jquery.mobile.js | 5 ++---
1 file changed, 2 insertions(+), 3 deletions(-)
diff --git a/js/jquery.mobile.js b/js/jquery.mobile.js
index 625eb2ecbbb..822e3cb7901 100644
--- a/js/jquery.mobile.js
+++ b/js/jquery.mobile.js
@@ -113,10 +113,9 @@
//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]" ),
- nullLink = href == '#';
+ external = /^(:?\w+:|#)/.test( href ) || $this.is( "[target],[rel=external]" );
- if( nullLink ){
+ if( href === '#' ){
//for links created purely for interaction - ignore
return false;
}
From baf9969dd28c5875482c56bc5b9bebc5e7160daa Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Thu, 28 Oct 2010 04:22:40 +0800
Subject: [PATCH 35/50] used cached version of $this
---
js/jquery.mobile.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/js/jquery.mobile.js b/js/jquery.mobile.js
index 822e3cb7901..656b1903b29 100644
--- a/js/jquery.mobile.js
+++ b/js/jquery.mobile.js
@@ -130,7 +130,7 @@
//use ajax
var pageTransition = $this.data( "transition" ) || "slide",
forceBack = $this.data( "back" ) || undefined,
- changeHashOnSuccess = !$(this).is(unHashedSelectors);
+ changeHashOnSuccess = !$this.is(unHashedSelectors);
nextPageRole = $this.attr( "data-rel" );
From d87aa6b1acde6432a9dc8c2e0967150653cb0a9f Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Thu, 28 Oct 2010 04:27:10 +0800
Subject: [PATCH 36/50] removed a few chars from condition. Thx @jeffreyway for
suggestions on the last few commits.
---
js/jquery.mobile.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/js/jquery.mobile.js b/js/jquery.mobile.js
index 656b1903b29..5c17caafac2 100644
--- a/js/jquery.mobile.js
+++ b/js/jquery.mobile.js
@@ -135,7 +135,7 @@
nextPageRole = $this.attr( "data-rel" );
//if it's a relative href, prefix href with base url
- if( href.indexOf('/') !== 0 && href.indexOf('#') !== 0 ){
+ if( href.indexOf('/') && href.indexOf('#') !== 0 ){
href = getBaseURL() + href;
}
From 0e6eb3aa0df4cf09a75adef954c2f256689e317d Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Thu, 28 Oct 2010 04:46:51 +0800
Subject: [PATCH 37/50] made sure local # urls go through the regular page nav
path, and only update the hash on success
---
js/jquery.mobile.js | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/js/jquery.mobile.js b/js/jquery.mobile.js
index 5c17caafac2..202ab442bac 100644
--- a/js/jquery.mobile.js
+++ b/js/jquery.mobile.js
@@ -113,13 +113,15 @@
//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]" );
+ external = /^(:?\w+:)/.test( href ) || $this.is( "[target],[rel=external]" );
if( href === '#' ){
//for links created purely for interaction - ignore
return false;
}
+ href.replace(/^#/,'');
+
activeClickedLink = $this.closest( ".ui-btn" ).addClass( activeBtnClass );
if( external ){
From c983bea228ed2c42b5ac3a01ecdc84a1af303589 Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Thu, 28 Oct 2010 04:52:53 +0800
Subject: [PATCH 38/50] moved active class removal code into function - now
called after ajax error as well as successful page change
---
js/jquery.mobile.js | 16 ++++++++++------
1 file changed, 10 insertions(+), 6 deletions(-)
diff --git a/js/jquery.mobile.js b/js/jquery.mobile.js
index 202ab442bac..49fdfb94c48 100644
--- a/js/jquery.mobile.js
+++ b/js/jquery.mobile.js
@@ -189,6 +189,14 @@
return wrapper;
}
+ //remove active classes after page transition or error
+ function removeActiveLinkClass(){
+ if(activeClickedLink){
+ activeClickedLink.removeClass( activeBtnClass );
+ activeClickedLink = null;
+ }
+ }
+
//for getting or creating a new page
function changePage( to, transition, back, changeHash){
@@ -239,11 +247,7 @@
hashListener = true;
}, 500);
}
- //remove active classes
- if(activeClickedLink){
- activeClickedLink.removeClass( activeBtnClass );
- activeClickedLink = null;
- }
+ removeActiveLinkClass();
}
if(transition){
@@ -341,7 +345,7 @@
},
error: function() {
pageLoading( true );
-
+ removeActiveLinkClass();
jQuery("
Error Loading Page ")
.css({ "display": "block", "opacity": 0.96, "top": $(window).scrollTop() + 100 })
.appendTo( $pageContainer )
From 9db9de24b502a07fb1a8002797a1446b96c02182 Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Thu, 28 Oct 2010 04:56:03 +0800
Subject: [PATCH 39/50] moved line where # is removed to prevent base url
prefixing on local anchor links
---
js/jquery.mobile.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/js/jquery.mobile.js b/js/jquery.mobile.js
index 49fdfb94c48..db7df082df2 100644
--- a/js/jquery.mobile.js
+++ b/js/jquery.mobile.js
@@ -120,8 +120,6 @@
return false;
}
- href.replace(/^#/,'');
-
activeClickedLink = $this.closest( ".ui-btn" ).addClass( activeBtnClass );
if( external ){
@@ -141,6 +139,8 @@
href = getBaseURL() + href;
}
+ href.replace(/^#/,'');
+
changePage(href, pageTransition, forceBack, changeHashOnSuccess);
}
event.preventDefault();
From 664730ea2ccff1f0a203a666becc0edd8783e082 Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Thu, 28 Oct 2010 08:43:27 +0800
Subject: [PATCH 40/50] converted customButton plugin to widget factory (note:
this is just the plugin for native button elements, not to be confused with
the buttonMarkup plugin).
renamed method to "button" and updated page.js to match
---
js/jquery.mobile.forms.button.js | 45 ++++++++++++++++++++------------
js/jquery.mobile.page.js | 2 +-
2 files changed, 30 insertions(+), 17 deletions(-)
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.page.js b/js/jquery.mobile.page.js
index bc3a2f8653d..0dd836309f8 100644
--- a/js/jquery.mobile.page.js
+++ b/js/jquery.mobile.page.js
@@ -132,7 +132,7 @@ jQuery.widget( "mobile.page", jQuery.mobile.widget, {
this.element
.find( "button, [type='button'], [type='submit'], [type='reset'], [type='image']" )
.not( ".ui-nojs" )
- .customButton();
+ .button();
this.element
.find( "input, textarea" )
From b1d03c6d8e7b8402b59111c9c82f0f1d919e7636 Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Thu, 28 Oct 2010 09:57:37 +0800
Subject: [PATCH 41/50] added check to make sure active link isn't in the new
activepage (such as when it's appended to the new page for persistence),
before removing class
---
js/jquery.mobile.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/js/jquery.mobile.js b/js/jquery.mobile.js
index db7df082df2..5f356dd2771 100644
--- a/js/jquery.mobile.js
+++ b/js/jquery.mobile.js
@@ -191,10 +191,10 @@
//remove active classes after page transition or error
function removeActiveLinkClass(){
- if(activeClickedLink){
+ if(activeClickedLink && !activeClickedLink.closest( '.ui-page-active' ).length ){
activeClickedLink.removeClass( activeBtnClass );
- activeClickedLink = null;
}
+ activeClickedLink = null;
}
From 6fb1d2a6100a45cd5be3bf5e30994f61c61c3282 Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Thu, 28 Oct 2010 09:58:00 +0800
Subject: [PATCH 42/50] rewrote navbar with widget factory
---
js/jquery.mobile.navbar.js | 64 ++++++++++++++++++--------------------
1 file changed, 30 insertions(+), 34 deletions(-)
diff --git a/js/jquery.mobile.navbar.js b/js/jquery.mobile.navbar.js
index a06af7d1ec3..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('click',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
From 79be25f2815517768dee15aee3c5435940219044 Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Thu, 28 Oct 2010 10:38:02 +0800
Subject: [PATCH 43/50] rewrote checkboxradio to use widget factory. renamed
method checkboxradio and updated page plugin to match
---
js/jquery.mobile.forms.checkboxradio.js | 146 ++++++++++++------------
js/jquery.mobile.page.js | 2 +-
2 files changed, 76 insertions(+), 72 deletions(-)
diff --git a/js/jquery.mobile.forms.checkboxradio.js b/js/jquery.mobile.forms.checkboxradio.js
index 31355f68460..d0a92d11990 100644
--- a/js/jquery.mobile.forms.checkboxradio.js
+++ b/js/jquery.mobile.forms.checkboxradio.js
@@ -4,82 +4,86 @@
* 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" );
-
- // wrap the input + label in a div
- input
- .add( label )
- .wrapAll( "
" );
-
- // 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);
- }
+ 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
});
-
- //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 );
+
+ // wrap the input + label in a div
+ input
+ .add( label )
+ .wrapAll( "
" );
+
+ 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);
+ }
+ });
+
+ //bind custom event, trigger it, bind click,focus,blur events
+ input
+ .bind({
- } else {
- label.removeClass( "ui-btn-active" );
- icon.removeClass( o.checkedicon );
- icon.addClass( o.uncheckedicon );
- }
- },
+ click: function() {
+ jQuery( "input[name='" + input.attr( "name" ) + "']" ).checkboxradio( "refresh" );
+ },
- click: function() {
- jQuery( "input[name='" + input.attr( "name" ) + "']" ).trigger( "updateState" );
- },
+ focus: function() {
+ label.addClass( "ui-focus" );
+ },
- focus: function() {
- label.addClass( "ui-focus" );
- },
+ blur: function() {
+ label.removeClass( "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);
+ }
+});
+})( jQuery );
diff --git a/js/jquery.mobile.page.js b/js/jquery.mobile.page.js
index 0dd836309f8..3b1b53e7fd0 100644
--- a/js/jquery.mobile.page.js
+++ b/js/jquery.mobile.page.js
@@ -127,7 +127,7 @@ 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']" )
From f32093ca6ffdc4581c646ea538e2dec9c2d6bb2b Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Thu, 28 Oct 2010 11:11:22 +0800
Subject: [PATCH 44/50] changed disabled class to ui-disabled, dropping the
"state" portion to fit with the new conventions
---
themes/default/jquery.mobile.theme.css | 2 +-
themes/valencia/jquery.mobile.theme.css | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/themes/default/jquery.mobile.theme.css b/themes/default/jquery.mobile.theme.css
index 1a132e796ab..974ed809e3d 100755
--- a/themes/default/jquery.mobile.theme.css
+++ b/themes/default/jquery.mobile.theme.css
@@ -139,7 +139,7 @@ a.ui-link-inherit { text-decoration: none !important; }
/* Interaction Cues
----------------------------------*/
-.ui-state-disabled { cursor: default !important; opacity: .3; }
+.ui-disabled { cursor: default !important; opacity: .3; }
/* Icons
----------------------------------*/
diff --git a/themes/valencia/jquery.mobile.theme.css b/themes/valencia/jquery.mobile.theme.css
index b8c5745fb80..6f7e4223e8d 100644
--- a/themes/valencia/jquery.mobile.theme.css
+++ b/themes/valencia/jquery.mobile.theme.css
@@ -700,7 +700,7 @@ a.ui-link-inherit {
/* Interaction Cues
----------------------------------*/
-.ui-state-disabled {
+.ui-disabled {
cursor: default !important;
opacity: .3;
}
From ed09974fc137408bf77b82f070aca5ebea7fe925 Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Thu, 28 Oct 2010 11:11:36 +0800
Subject: [PATCH 45/50] added support for enable and disable methods
---
js/jquery.mobile.forms.checkboxradio.js | 22 +++++++++++++++++++++-
1 file changed, 21 insertions(+), 1 deletion(-)
diff --git a/js/jquery.mobile.forms.checkboxradio.js b/js/jquery.mobile.forms.checkboxradio.js
index d0a92d11990..1879ee86939 100644
--- a/js/jquery.mobile.forms.checkboxradio.js
+++ b/js/jquery.mobile.forms.checkboxradio.js
@@ -33,9 +33,15 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
.wrapAll( "
" );
label.bind({
+ mouseover: function() {
+ if( $(this).parent().is('.ui-disabled') ){ return false; }
+ },
+
mousedown: function() {
+ if( $(this).parent().is('.ui-disabled') ){ return false; }
label.data( "state", input.attr( "checked" ) );
},
+
click: function() {
setTimeout(function() {
if ( input.attr( "checked" ) === label.data( "state" ) ) {
@@ -45,7 +51,6 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
}
});
- //bind custom event, trigger it, bind click,focus,blur events
input
.bind({
@@ -84,6 +89,21 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
icon.removeClass( checkedicon );
icon.addClass( uncheckedicon );
}
+
+ 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 );
From 0235bb924476ae1668af6fd0583dbb78e929ec25 Mon Sep 17 00:00:00 2001
From: Jeffrey Way
Date: Thu, 28 Oct 2010 11:10:04 +0800
Subject: [PATCH 46/50] Small improvement to keep from querying the DOM more
than once for the data-role=pages elements.
---
js/jquery.mobile.js | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/js/jquery.mobile.js b/js/jquery.mobile.js
index 5f356dd2771..44367e5ecd7 100644
--- a/js/jquery.mobile.js
+++ b/js/jquery.mobile.js
@@ -478,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();
@@ -495,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 } );
From 812568c7c7c9433d72652549f1338be41ba5c0b4 Mon Sep 17 00:00:00 2001
From: Todd Parker
Date: Fri, 29 Oct 2010 04:36:30 +0800
Subject: [PATCH 47/50] changed #fff to #ffffff in ui-body-b and ui-body-e
because IE has issues with shorthand notation in filters.
Fixes issue 327: http://github.com/jquery/jquery-mobile/issues#issue/327
---
themes/default/jquery.mobile.theme.css | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/themes/default/jquery.mobile.theme.css b/themes/default/jquery.mobile.theme.css
index 974ed809e3d..f5d69ef28df 100755
--- a/themes/default/jquery.mobile.theme.css
+++ b/themes/default/jquery.mobile.theme.css
@@ -55,7 +55,7 @@
.ui-bar-c { border: 1px solid #B3B3B3; background: #e9eaeb; color: #3E3E3E; font-weight: bold; text-shadow: 0 1px 1px #fff; background-image: -moz-linear-gradient(top, #f0f0f0, #e9eaeb); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0f0f0),color-stop(1, #e9eaeb)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f0f0f0', EndColorStr='#e9eaeb')"; }
.ui-bar-c, .ui-bar-c input, .ui-bar-c select, .ui-bar-c textarea, .ui-bar-c button { font-family: Helvetica, Arial, sans-serif; }
-.ui-body-c { border: 1px solid #B3B3B3; color: #333333; text-shadow: 0 1px 0 #fff; background: #f0f0f0; background-image: -moz-linear-gradient(top, #fff, #f0f0f0); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fff),color-stop(1, #f0f0f0)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fff', EndColorStr='#f0f0f0')"; }
+.ui-body-c { border: 1px solid #B3B3B3; color: #333333; text-shadow: 0 1px 0 #fff; background: #f0f0f0; background-image: -moz-linear-gradient(top, #fff, #f0f0f0); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fff),color-stop(1, #f0f0f0)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#f0f0f0')"; }
.ui-body-c, .ui-body-c input, .ui-body-c select, .ui-body-c textarea, .ui-body-c button { font-family: Helvetica, Arial, sans-serif; }
.ui-body-c .ui-link-inherit { color: #333333; }
.ui-body-c .ui-link { color: #2489CE; font-weight: bold; }
@@ -96,7 +96,7 @@
.ui-bar-e .ui-link-inherit { color: #333; }
.ui-bar-e .ui-link { color: #2489CE; font-weight: bold; }
-.ui-body-e { border: 1px solid #F7C942; color: #333333; text-shadow: 0 1px 0 #fff; background: #faeb9e; background-image: -moz-linear-gradient(top, #fff, #faeb9e); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fff),color-stop(1, #faeb9e)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fff', EndColorStr='#faeb9e')"; }
+.ui-body-e { border: 1px solid #F7C942; color: #333333; text-shadow: 0 1px 0 #fff; background: #faeb9e; background-image: -moz-linear-gradient(top, #fff, #faeb9e); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fff),color-stop(1, #faeb9e)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#faeb9e')"; }
.ui-body-e, .ui-body-e input, .ui-body-e select, .ui-body-e textarea, .ui-body-e button { font-family: Helvetica, Arial, sans-serif; }
.ui-body-e .ui-link-inherit { color: #333333; }
.ui-body-e .ui-link { color: #2489CE; font-weight: bold; }
From 0e8e2cfbe5d4ad9339ae924de57076d4ec9380aa Mon Sep 17 00:00:00 2001
From: "jblas@adobe.com"
Date: Fri, 29 Oct 2010 14:40:11 +0800
Subject: [PATCH 48/50] Fixed #117
"Global: blinky page transitions"
According to the CSS Animations spec as soon as an animation completes, any properties that were animated revert back to their previous values. This means that the CSS rule that refers to the animation by name must also have the "To" property values specified.
---
themes/default/jquery.mobile.transitions.css | 24 +++++++++++++++++---
1 file changed, 21 insertions(+), 3 deletions(-)
diff --git a/themes/default/jquery.mobile.transitions.css b/themes/default/jquery.mobile.transitions.css
index 46423829f2d..0c36a139cc6 100644
--- a/themes/default/jquery.mobile.transitions.css
+++ b/themes/default/jquery.mobile.transitions.css
@@ -4,9 +4,10 @@
* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
*/
.spin {
--webkit-animation-name: spin;
--webkit-animation-duration: 1s;
--webkit-animation-iteration-count: infinite;
+ -webkit-transform: rotate(360deg);
+ -webkit-animation-name: spin;
+ -webkit-animation-duration: 1s;
+ -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes spin {
from {-webkit-transform: rotate(0deg);}
@@ -22,22 +23,27 @@ Built by David Kaneda and maintained by Jonathan Stark.
}
.slide.in {
+ -webkit-transform: translateX(0);
-webkit-animation-name: slideinfromright;
}
.slide.out {
+ -webkit-transform: translateX(-100%);
-webkit-animation-name: slideouttoleft;
}
.slide.in.reverse {
+ -webkit-transform: translateX(0);
-webkit-animation-name: slideinfromleft;
}
.slide.out.reverse {
+ -webkit-transform: translateX(100%);
-webkit-animation-name: slideouttoright;
}
.slideup.in {
+ -webkit-transform: translateY(0);
-webkit-animation-name: slideinfrombottom;
z-index: 10;
}
@@ -48,6 +54,7 @@ Built by David Kaneda and maintained by Jonathan Stark.
}
.slideup.out.reverse {
+ -webkit-transform: translateY(100%);
z-index: 10;
-webkit-animation-name: slideouttobottom;
}
@@ -57,6 +64,7 @@ Built by David Kaneda and maintained by Jonathan Stark.
-webkit-animation-name: dontmove;
}
.slidedown.in {
+ -webkit-transform: translateY(0);
-webkit-animation-name: slideinfromtop;
z-index: 10;
}
@@ -67,6 +75,7 @@ Built by David Kaneda and maintained by Jonathan Stark.
}
.slidedown.out.reverse {
+ -webkit-transform: translateY(-100%);
z-index: 10;
-webkit-animation-name: slideouttotop;
}
@@ -127,6 +136,7 @@ Built by David Kaneda and maintained by Jonathan Stark.
}
.fade.in {
+ opacity: 1;
z-index: 10;
-webkit-animation-name: fadein;
}
@@ -139,20 +149,24 @@ Built by David Kaneda and maintained by Jonathan Stark.
}
.flip.in {
+ -webkit-transform: rotateY(0) scale(1);
-webkit-animation-name: flipinfromleft;
}
.flip.out {
+ -webkit-transform: rotateY(-180deg) scale(.8);
-webkit-animation-name: flipouttoleft;
}
/* Shake it all about */
.flip.in.reverse {
+ -webkit-transform: rotateY(0) scale(1);
-webkit-animation-name: flipinfromright;
}
.flip.out.reverse {
+ -webkit-transform: rotateY(180deg) scale(.8);
-webkit-animation-name: flipouttoright;
}
@@ -189,11 +203,15 @@ Built by David Kaneda and maintained by Jonathan Stark.
}
.pop.in {
+ -webkit-transform: scale(1);
+ opacity: 1;
-webkit-animation-name: popin;
z-index: 10;
}
.pop.out.reverse {
+ -webkit-transform: scale(.2);
+ opacity: 0;
-webkit-animation-name: popout;
z-index: 10;
}
From 72bc5307695cf5055700aaa503c4562fc2c8f559 Mon Sep 17 00:00:00 2001
From: Kin Blas
Date: Sat, 30 Oct 2010 04:23:04 +0800
Subject: [PATCH 49/50] Fixed 138 - transition: fix flip (and cube?)
- Added a -webkit-perspective property to the body element, since it is the container for the element (ui-page) that actually flips. We need specify this so a projection matrix gets created, giving the viewer some perspective. The 1000 represents the depth in pixels (the distance from the viewer to the z-plane). According to the CSS3 spec 1000 is a moderate value. Lower values make the effect more extreme.
---
themes/default/jquery.mobile.transitions.css | 10 ++++++++++
1 file changed, 10 insertions(+)
diff --git a/themes/default/jquery.mobile.transitions.css b/themes/default/jquery.mobile.transitions.css
index 0c36a139cc6..0ea9f54a709 100644
--- a/themes/default/jquery.mobile.transitions.css
+++ b/themes/default/jquery.mobile.transitions.css
@@ -144,6 +144,16 @@ Built by David Kaneda and maintained by Jonathan Stark.
z-index: 0;
}
+/* The properties in this body rule are only necessary for the 'flip' transition.
+ * We need specify the perspective to create a projection matrix. This will add
+ * some depth as the element flips. The depth number represents the distance of
+ * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
+ * value.
+ */
+body {
+ -webkit-perspective: 1000;
+}
+
.flip {
-webkit-animation-duration: .65s;
}
From df40dabecaab6e9ed241aab70cc419899a270fbc Mon Sep 17 00:00:00 2001
From: scottjehl
Date: Sun, 31 Oct 2010 23:18:44 +0800
Subject: [PATCH 50/50] Narrowed down first-load transition issue to ui-loading
class. Removed a selector from overflow rule that seemed to be a bit
overreaching. Fixes #336
---
themes/default/jquery.mobile.core.css | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/themes/default/jquery.mobile.core.css b/themes/default/jquery.mobile.core.css
index c82b9854bc8..fd70f1a031d 100644
--- a/themes/default/jquery.mobile.core.css
+++ b/themes/default/jquery.mobile.core.css
@@ -21,7 +21,7 @@
.ui-page-active { display: block; overflow: visible; }
/* loading screen */
-.ui-loading, .ui-loading body { overflow: hidden !important; }
+.ui-loading body { overflow: hidden !important; }
.ui-loading .ui-loader { display: block; }
.ui-loading .ui-page { overflow: hidden; }
.ui-loader { display: none; position: absolute; opacity: .85; z-index: 10; top: 75px; left: 50%; width: 200px; margin-left: -130px; padding: 20px 30px; }