Make data-role=page elements optional. This change makes the framework more lenient with markup, and will ease integration with existing sites, as well as mashups with external content. Unit tests included. Fixes #2096

This commit is contained in:
scottjehl 2011-07-17 14:52:49 -04:00
parent 53a8023b14
commit 259815d480
4 changed files with 51 additions and 0 deletions

View file

@ -73,6 +73,12 @@
initializePage: function(){
//find present pages
var $pages = $( ":jqmData(role='page')" );
//if no pages are found, create one with body's inner html
if( !$pages.length ){
$pages = $( "body" ).wrapInner( "<div data-" + $.mobile.ns + "role='page'></div>" ).children( 0 );
console.log("page wasn't needed")
}
//add dialogs, set data-url attrs
$pages.add( ":jqmData(role='dialog')" ).each(function(){

View file

@ -648,6 +648,9 @@
&& RegExp.$1 ) {
url = fileUrl = path.getFilePath( RegExp.$1 );
}
else{
}
if ( base ) {
base.set( fileUrl );
@ -656,6 +659,11 @@
//workaround to allow scripts to execute when included in page divs
all.get( 0 ).innerHTML = html;
page = all.find( ":jqmData(role='page'), :jqmData(role='dialog')" ).first();
//if page elem couldn't be found, create one and insert the body element's contents
if( !page.length ){
page = $( "<div data-" + $.mobile.ns + "role='page'>" + html.split( /<\/?body[^>]*>/gmi )[1] + "</div>" );
}
if ( newPageTitle && !page.jqmData( "title" ) ) {
page.jqmData( "title", newPageTitle );

View file

@ -212,5 +212,27 @@
}, 500);
});
asyncTest( "page element is generated when not present in initial markup", function(){
expect( 1 );
$("<iframe src='nopage.html'>").appendTo("body").load(function(){
ok( $(this).contents().find( ".ui-page" ).length, 1 );
$(this).remove();
start();
});
});
asyncTest( "page element is generated when not present in ajax'd markup", function(){
expect( 1 );
$.mobile.changePage( "nopage.html" );
$( ":jqmData(url$='nopage.html')" ).live( "pagecreate", function(){
ok(true, "page was created from dynamically loaded HTML that contained no page div" );
start();
} );
});
});
})(jQuery);

View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery Mobile Init Test Suite</title>
<script src="../../../js/jquery.js"></script>
<script src="../jquery.setNameSpace.js"></script>
<script src="../../../js/"></script>
</head>
<p>testing</p>
</body>
</html>