mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-28 19:50:27 +00:00
Merge remote branch 'upstream/master'
This commit is contained in:
ehynds
commit
8286eccabd
11 changed files with 87 additions and 76 deletions
|
|
@ -1,7 +1,7 @@
|
|||
//set up the theme switcher on the homepage
|
||||
$('div').live('pagecreate',function(event){
|
||||
if( !$(this).is('.ui-dialog')){
|
||||
$('<a href="#">Switch theme</a>')
|
||||
$('<a href="#themeswitcher" data-rel="dialog" data-transition="pop">Switch theme</a>')
|
||||
.buttonMarkup({
|
||||
'icon':'gear',
|
||||
'inline': true,
|
||||
|
|
@ -12,7 +12,6 @@ $('div').live('pagecreate',function(event){
|
|||
.wrap('<div class="jqm-themeswitcher">')
|
||||
.click(function(){
|
||||
$.themeswitcher();
|
||||
return false;
|
||||
});
|
||||
}
|
||||
event.stopPropagation();
|
||||
|
|
|
|||
|
|
@ -95,10 +95,33 @@ $('div').live('pagehide',function(event, ui){
|
|||
<dd>Triggered on the page being initialized, after initialization occurs.</dd>
|
||||
</dl>
|
||||
|
||||
|
||||
<pre>
|
||||
<code>
|
||||
$('#aboutPage').live('pagebeforecreate',function(event){
|
||||
alert('This page was just inserted into the dom!');
|
||||
});
|
||||
|
||||
$('#aboutPage').live('pagecreate',function(event){
|
||||
alert('This page was just enhanced by jQuery Mobile!');
|
||||
});
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
<p>Note that by binding to <code>pagebeforecreate</code> and returning <code>false</code>, you can prevent the page plugin from making its manipulations.</p>
|
||||
|
||||
<pre>
|
||||
<code>
|
||||
$('#aboutPage').live('pagebeforecreate',function(event){
|
||||
//run your own enhancement scripting here...
|
||||
return false;
|
||||
});
|
||||
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
<div class="ui-body ui-body-e">
|
||||
<p><strong>Note on Page IDs: </strong> Page elements in jQuery Mobile utilize the <code>ID</code> attribute for storing the location from which they came. When you place an <code>ID</code> attribute on a page that is brought into jQuery Mobile's single-page environment through Ajax, jQuery Mobile wraps that page with a new "page" <code>div</code> element, preserving any CSS references to your <code>ID</code>. However, this means that your <code>ID</code> attribute is no longer on the "page" element, so you must keep this in mind when binding to page events (<code>pagebeforecreate</code>, <code>pagecreate</code>, etc). To avoid issues, try using a class if possible. </p>
|
||||
<p><strong>Note on Page IDs in Alpha 2 release (<em>no longer an issue</em>): </strong> In jQuery Mobile Alpha 2 and older, page elements utilized the <code>ID</code> attribute for storing the location from which they came. When you place an <code>ID</code> attribute on a page that is brought into jQuery Mobile's single-page environment through Ajax, jQuery Mobile wraps that page with a new "page" <code>div</code> element, preserving any CSS references to your <code>ID</code>. However, this means that your <code>ID</code> attribute is no longer on the "page" element, so you must keep this in mind when binding to page events (<code>pagebeforecreate</code>, <code>pagecreate</code>, etc). To avoid issues, try using a class if possible. </p>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -160,7 +160,7 @@
|
|||
</body>
|
||||
</code></pre>
|
||||
|
||||
<a href="multipage-template.html" data-inline="true" data-theme="b" data-role="button" rel="external">View multi-page template</a>
|
||||
<a href="multipage-template.html" data-inline="true" data-theme="b" data-role="button">View multi-page template</a>
|
||||
|
||||
<p> </p>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,9 +3,8 @@
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Page Title</title>
|
||||
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
|
||||
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
|
||||
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
|
||||
<link rel="stylesheet" href="../../themes/default" />
|
||||
<script type="text/javascript" src="../../js/"></script>
|
||||
<body>
|
||||
|
||||
<!-- Start of first page -->
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
//quick & dirty theme switcher, written to potentially work as a bookmarklet
|
||||
(function($){
|
||||
$.themeswitcher = function(){
|
||||
if( $('[data-url=themeswitcher]').length ){ return; }
|
||||
var themesDir = 'http://jquerymobile.com/test/themes/',
|
||||
themes = ['default','valencia'],
|
||||
currentPage = $.mobile.activePage,
|
||||
menuPage = $( '<div data-role=\'dialog\' data-theme=\'a\'>' +
|
||||
menuPage = $( '<div data-url="themeswitcher" data-role=\'dialog\' data-theme=\'a\'>' +
|
||||
'<div data-role=\'header\' data-theme=\'b\'>' +
|
||||
'<div class=\'ui-title\'>Switch Theme:</div>'+
|
||||
'</div>'+
|
||||
|
|
@ -32,8 +33,6 @@
|
|||
|
||||
//create page, listview
|
||||
menuPage.page();
|
||||
|
||||
//change page now
|
||||
$.mobile.changePage([currentPage, menuPage], 'pop', false);
|
||||
|
||||
};
|
||||
})(jQuery);
|
||||
|
|
|
|||
|
|
@ -120,6 +120,10 @@
|
|||
//find present pages
|
||||
var $pages = $("[data-role='page']");
|
||||
|
||||
$pages.each(function(){
|
||||
$(this).attr('data-url', $(this).attr('id'));
|
||||
});
|
||||
|
||||
//set up active page
|
||||
$.mobile.startPage = $.mobile.activePage = $pages.first();
|
||||
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ $.widget( "mobile.dialog", $.mobile.widget, {
|
|||
if( $el.is('.ui-page-active') ){
|
||||
self.close();
|
||||
$el.bind('pagehide',function(){
|
||||
$.mobile.updateHash( $prevPage.attr('id'), true);
|
||||
$.mobile.updateHash( $prevPage.attr('data-url'), true);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -17,36 +17,11 @@ $.widget( "mobile.button", $.mobile.widget, {
|
|||
},
|
||||
_create: function(){
|
||||
var $el = this.element,
|
||||
o = this.options,
|
||||
type = $el.attr('type');
|
||||
$el
|
||||
.addClass('ui-btn-hidden')
|
||||
.attr('tabindex','-1');
|
||||
o = this.options;
|
||||
|
||||
//add ARIA role
|
||||
this.button = $( "<a>", {
|
||||
"href": "#",
|
||||
"role": "button",
|
||||
"aria-label": $el.attr( "type" )
|
||||
} )
|
||||
this.button = $( "<div></div>" )
|
||||
.text( $el.text() || $el.val() )
|
||||
.insertBefore( $el )
|
||||
.click(function(e){
|
||||
if(!o.disabled){
|
||||
if ( $el.attr("type") !== "reset" ){
|
||||
var $buttonPlaceholder = $("<input>",
|
||||
{type: "hidden", name: $el.attr("name"), value: $el.attr("value")})
|
||||
.insertBefore($el);
|
||||
|
||||
}
|
||||
$el.submit();
|
||||
$buttonPlaceholder.remove();
|
||||
}
|
||||
else{
|
||||
$el.trigger("click")
|
||||
}
|
||||
e.preventDefault();
|
||||
})
|
||||
.buttonMarkup({
|
||||
theme: o.theme,
|
||||
icon: o.icon,
|
||||
|
|
@ -55,7 +30,24 @@ $.widget( "mobile.button", $.mobile.widget, {
|
|||
corners: o.corners,
|
||||
shadow: o.shadow,
|
||||
iconshadow: o.iconshadow
|
||||
})
|
||||
.insertBefore( $el )
|
||||
.append( $el.addClass('ui-btn-hidden') );
|
||||
|
||||
//add hidden input during submit
|
||||
if( $el.attr('type') !== 'reset' ){
|
||||
$el.click(function(){
|
||||
var $buttonPlaceholder = $("<input>",
|
||||
{type: "hidden", name: $el.attr("name"), value: $el.attr("value")})
|
||||
.insertBefore($el);
|
||||
|
||||
//bind to doc to remove after submit handling
|
||||
$(document).submit(function(){
|
||||
$buttonPlaceholder.remove();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
enable: function(){
|
||||
|
|
|
|||
|
|
@ -290,7 +290,7 @@ $.widget( "mobile.listview", $.mobile.widget, {
|
|||
_createSubPages: function() {
|
||||
var parentList = this.element,
|
||||
parentPage = parentList.closest( ".ui-page" ),
|
||||
parentId = parentPage.attr( "id" ),
|
||||
parentId = parentPage.data( "url" ),
|
||||
o = this.options,
|
||||
self = this,
|
||||
persistentFooterID = parentPage.find( "[data-role='footer']" ).data( "id" );
|
||||
|
|
@ -308,7 +308,7 @@ $.widget( "mobile.listview", $.mobile.widget, {
|
|||
.after( persistentFooterID ? $( "<div>", { "data-role": "footer", "data-id": persistentFooterID, "class": "ui-footer-duplicate" } ) : "" )
|
||||
.parent()
|
||||
.attr({
|
||||
id: id,
|
||||
"data-url": id,
|
||||
"data-theme": theme,
|
||||
"data-count-theme": countTheme
|
||||
})
|
||||
|
|
|
|||
|
|
@ -20,14 +20,19 @@
|
|||
newPath = location.hash;
|
||||
}
|
||||
newPath = newPath.replace(/#/,'').split('/');
|
||||
newPath.pop();
|
||||
if(newPath.length){
|
||||
var lastSegment = newPath[newPath.length-1];
|
||||
if( lastSegment.indexOf('.') > -1 || lastSegment == ''){
|
||||
newPath.pop();
|
||||
}
|
||||
}
|
||||
return newPath.join('/') + (newPath.length ? '/' : '');
|
||||
},
|
||||
|
||||
//return the substring of a filepath before the sub-page key, for making a server request
|
||||
getFilePath: function( path ){
|
||||
var splitkey = '&' + $.mobile.subPageUrlKey;
|
||||
return path.indexOf( splitkey ) > -1 ? path.split( splitkey )[0] : path;
|
||||
return path && path.indexOf( splitkey ) > -1 ? path.split( splitkey )[0] : path;
|
||||
},
|
||||
|
||||
set: function( path, disableListening){
|
||||
|
|
@ -36,7 +41,7 @@
|
|||
},
|
||||
|
||||
//location pathname from intial directory request
|
||||
origin: null,
|
||||
origin: '',
|
||||
|
||||
setOrigin: function(){
|
||||
path.origin = path.get( location.protocol + '//' + location.host + location.pathname );
|
||||
|
|
@ -85,7 +90,6 @@
|
|||
|
||||
//set location pathname from intial directory request
|
||||
path.setOrigin();
|
||||
|
||||
|
||||
/*
|
||||
internal utility functions
|
||||
|
|
@ -134,7 +138,7 @@
|
|||
|
||||
// changepage function
|
||||
$.mobile.changePage = function( to, transition, back, changeHash){
|
||||
|
||||
|
||||
//from is always the currently viewed page
|
||||
var toIsArray = $.type(to) === "array",
|
||||
from = toIsArray ? to[0] : $.mobile.activePage,
|
||||
|
|
@ -147,11 +151,13 @@
|
|||
back = (back !== undefined) ? back : ( urlStack.length > 1 && urlStack[ urlStack.length - 2 ].url === url ),
|
||||
transition = (transition !== undefined) ? transition : $.mobile.defaultTransition;
|
||||
|
||||
|
||||
//If we are trying to transition to the same page that we are currently on ignore the request.
|
||||
if(urlStack.length > 1 && url === urlStack[urlStack.length -1].url) {
|
||||
if(urlStack.length > 1 && url === urlStack[urlStack.length -1].url && !toIsArray ) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
if( $.type(to) === "object" && to.url ){
|
||||
url = to.url,
|
||||
data = to.data,
|
||||
|
|
@ -163,6 +169,9 @@
|
|||
data = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
//reset base to pathname for new request
|
||||
if(base){ base.reset(); }
|
||||
|
|
@ -243,9 +252,12 @@
|
|||
function enhancePage(){
|
||||
|
||||
//set next page role, if defined
|
||||
if ( nextPageRole ) {
|
||||
to.attr( "data-role", nextPageRole );
|
||||
nextPageRole = undefined;
|
||||
if ( nextPageRole || to.data('role') == 'dialog' ) {
|
||||
changeHash = false;
|
||||
if(nextPageRole){
|
||||
to.attr( "data-role", nextPageRole );
|
||||
nextPageRole = null;
|
||||
}
|
||||
}
|
||||
|
||||
//run page plugin
|
||||
|
|
@ -254,11 +266,11 @@
|
|||
|
||||
//if url is a string
|
||||
if( url ){
|
||||
to = $( "[id='" + url + "']" ),
|
||||
to = $( "[data-url='" + url + "']" );
|
||||
fileUrl = path.getFilePath(url);
|
||||
}
|
||||
else{ //find base url of element, if avail
|
||||
var toID = to.attr('id'),
|
||||
var toID = to.attr('data-url'),
|
||||
toIDfileurl = path.getFilePath(toID);
|
||||
|
||||
if(toID != toIDfileurl){
|
||||
|
|
@ -287,13 +299,12 @@
|
|||
type: type,
|
||||
data: data,
|
||||
success: function( html ) {
|
||||
|
||||
if(base){ base.set(fileUrl); }
|
||||
|
||||
var all = $("<div></div>");
|
||||
//workaround to allow scripts to execute when included in page divs
|
||||
all.get(0).innerHTML = html;
|
||||
to = all.find('[data-role="page"]');
|
||||
to = all.find('[data-role="page"], [data-role="dialog"]').first();
|
||||
|
||||
//rewrite src and href attrs to use a base url
|
||||
if( !$.support.dynamicBaseTag ){
|
||||
|
|
@ -310,24 +321,9 @@
|
|||
}
|
||||
});
|
||||
}
|
||||
|
||||
//preserve ID on a retrieved page
|
||||
if ( to.attr('id') ) {
|
||||
//wrap page and transfer data-attrs if it has an ID
|
||||
var copyAttrs = ['data-role', 'data-theme', 'data-fullscreen'], //TODO: more page-level attrs?
|
||||
wrapper = to.wrap( "<div>" ).parent();
|
||||
|
||||
$.each(copyAttrs,function(i){
|
||||
if( to.attr( copyAttrs[ i ] ) ){
|
||||
wrapper.attr( copyAttrs[ i ], to.attr( copyAttrs[ i ] ) );
|
||||
to.removeAttr( copyAttrs[ i ] );
|
||||
}
|
||||
});
|
||||
to = wrapper;
|
||||
}
|
||||
|
||||
to
|
||||
.attr( "id", fileUrl )
|
||||
.attr( "data-url", fileUrl )
|
||||
.appendTo( $.mobile.pageContainer );
|
||||
|
||||
enhancePage();
|
||||
|
|
@ -336,6 +332,7 @@
|
|||
error: function() {
|
||||
$.mobile.pageLoading( true );
|
||||
removeActiveLinkClass(true);
|
||||
base.set(path.get());
|
||||
$("<div class='ui-loader ui-overlay-shadow ui-body-e ui-corner-all'><h1>Error Loading Page</h1></div>")
|
||||
.css({ "display": "block", "opacity": 0.96, "top": $(window).scrollTop() + 100 })
|
||||
.appendTo( $.mobile.pageContainer )
|
||||
|
|
@ -349,8 +346,6 @@
|
|||
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
/* Event Bindings - hashchange, submit, and click */
|
||||
|
||||
|
|
@ -386,6 +381,7 @@
|
|||
|
||||
//click routing - direct to HTTP or Ajax, accordingly
|
||||
$( "a" ).live( "click", function(event) {
|
||||
|
||||
if( !$.mobile.ajaxLinksEnabled ){ return; }
|
||||
var $this = $(this),
|
||||
//get href, remove same-domain protocol and host
|
||||
|
|
@ -418,8 +414,7 @@
|
|||
else {
|
||||
//use ajax
|
||||
var transition = $this.data( "transition" ),
|
||||
back = $this.data( "back" ),
|
||||
changeHashOnSuccess = !$this.is( "[data-rel="+ $.mobile.nonHistorySelectors +"]" );
|
||||
back = $this.data( "back" );
|
||||
|
||||
nextPageRole = $this.attr( "data-rel" );
|
||||
|
||||
|
|
@ -430,7 +425,7 @@
|
|||
|
||||
href.replace(/^#/,'');
|
||||
|
||||
$.mobile.changePage(href, transition, back, changeHashOnSuccess);
|
||||
$.mobile.changePage(href, transition, back);
|
||||
}
|
||||
event.preventDefault();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -50,4 +50,4 @@
|
|||
.ui-btn-icon-top .ui-icon { top: 5px; }
|
||||
.ui-btn-icon-bottom .ui-icon { bottom: 5px; }
|
||||
/*hiding native button,inputs */
|
||||
.ui-btn-hidden { position: absolute; left: -9999px; }
|
||||
.ui-btn-hidden { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-appearance: button; opacity: 0; cursor: pointer; }
|
||||
|
|
|
|||
Loading…
Reference in a new issue