Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-05-04 12:54:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

header and footer links will now remain unstyled, Fixes #524

Browse source
This commit is contained in:
John Bender 2010-12-08 00:12:05 -08:00
parent 4882c068b0
commit 970f46c5e0
3 changed files with 115 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
js/jquery.mobile.page.js
View file

@ -27,46 +27,46 @@ $.widget( "mobile.page", $.mobile.widget, {
},
keepNative: null
},
_create: function() {
var $elem = this.element,
o = this.options;
this.keepNative = "[data-role='none'], [data-role='nojs']" + (o.keepNative ? ", " + o.keepNative : "");
this.keepNative = "[data-role='none'], [data-role='nojs']" + (o.keepNative ? ", " + o.keepNative : "");
if ( this._trigger( "beforeCreate" ) === false ) {
return;
}
//some of the form elements currently rely on the presence of ui-page and ui-content
// classes so we'll handle page and content roles outside of the main role processing
// loop below.
$elem.find( "[data-role='page'], [data-role='content']" ).andSelf().each(function() {
$(this).addClass( "ui-" + $(this).data( "role" ) );
});
$elem.find( "[data-role='nojs']" ).addClass( "ui-nojs" );
this._enchanceControls();
// pre-find data els
var $dataEls = $elem.find( "[data-role]" ).andSelf().each(function() {
var $this = $( this ),
role = $this.data( "role" ),
theme = $this.data( "theme" );
//apply theming and markup modifications to page,header,content,footer
if ( role === "header" || role === "footer" ) {
$this.addClass( "ui-bar-" + (theme || $this.parent('[data-role=page]').data( "theme" ) || "a") );
// add ARIA role
$this.attr( "role", role === "header" ? "banner" : "contentinfo" );
//right,left buttons
var $headeranchors = $this.children( "a" ),
leftbtn = $headeranchors.hasClass( "ui-btn-left" ),
rightbtn = $headeranchors.hasClass( "ui-btn-right" );
if ( !leftbtn ) {
leftbtn = $headeranchors.eq( 0 ).not( ".ui-btn-right" ).addClass( "ui-btn-left" ).length;
}
@ -74,7 +74,7 @@ $.widget( "mobile.page", $.mobile.widget, {
if ( !rightbtn ) {
rightbtn = $headeranchors.eq( 1 ).addClass( "ui-btn-right" ).length;
}
// auto-add back btn on pages beyond first view
if ( o.addBackBtn && role === "header" &&
($.mobile.urlStack.length > 1 || $(".ui-page").length > 1) &&
@ -87,8 +87,8 @@ $.widget( "mobile.page", $.mobile.widget, {
})
.prependTo( $this );
}
//page title
//page title
$this.children( "h1, h2, h3, h4, h5, h6" )
.addClass( "ui-title" )
//regardless of h element number in src, it becomes h1 for the enhanced page
@ -105,7 +105,7 @@ $.widget( "mobile.page", $.mobile.widget, {
} else if ( role === "page" ) {
$this.addClass( "ui-body-" + (theme || "c") );
}
switch(role) {
case "header":
case "footer":
@ -122,41 +122,41 @@ $.widget( "mobile.page", $.mobile.widget, {
break;
}
});
//links in bars, or those with data-role become buttons
$elem.find( "[data-role='button'], .ui-bar a, .ui-header a, .ui-footer a" )
$elem.find( "[data-role='button'], .ui-bar a, .ui-header > a, .ui-footer > a" )
.not( ".ui-btn" )
.not(this.keepNative)
.buttonMarkup();
$elem
$elem
.find("[data-role='controlgroup']")
.controlgroup();
//links within content areas
$elem.find( "a:not(.ui-btn):not(.ui-link-inherit)" )
.not(this.keepNative)
.addClass( "ui-link" );
.addClass( "ui-link" );
//fix toolbars
$elem.fixHeaderFooter();
},
_enchanceControls: function() {
var o = this.options;
// degrade inputs to avoid poorly implemented native functionality
this.element.find( "input" ).not(this.keepNative).each(function() {
var type = this.getAttribute( "type" ),
optType = o.degradeInputs[ type ] || "text";
if ( o.degradeInputs[ type ] ) {
$( this ).replaceWith(
$( "<div>" ).html( $(this).clone() ).html()
.replace( /type="([a-zA-Z]+)"/, "type="+ optType +" data-type='$1'" ) );
}
});
// enchance form controls
this.element
.find( "[type='radio'], [type='checkbox']" )

67
tests/unit/page/index.html Normal file
View file

@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery Mobile Page Test Suite</title>
<script type="text/javascript" src="../../../js/jquery.js"></script>
<script type="text/javascript" src="../../../js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../../js/jquery.mobile.widget.js"></script>
<script type="text/javascript" src="../../../js/jquery.mobile.media.js"></script>
<script type="text/javascript" src="../../../js/jquery.mobile.support.js"></script>
<script type="text/javascript" src="../../../js/jquery.mobile.event.js"></script>
<script type="text/javascript" src="../../../js/jquery.mobile.hashchange.js"></script>
<script type="text/javascript" src="../../../js/jquery.mobile.core.js"></script>
<script type="text/javascript" src="../../../js/jquery.mobile.navigation.js"></script>
<script type="text/javascript" src="../../../js/jquery.mobile.page.js"></script>
<script type="text/javascript" src="../../../js/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../../js/jquery.mobile.fixHeaderFooter.js"></script>
<script type="text/javascript" src="../../../js/jquery.mobile.forms.checkboxradio.js"></script>
<script type="text/javascript" src="../../../js/jquery.mobile.forms.textinput.js"></script>
<script type="text/javascript" src="../../../js/jquery.mobile.forms.select.js"></script>
<script type="text/javascript" src="../../../js/jquery.mobile.buttonMarkup.js"></script>
<script type="text/javascript" src="../../../js/jquery.mobile.forms.button.js"></script>
<script type="text/javascript" src="../../../js/jquery.mobile.forms.slider.js"></script>
<script type="text/javascript" src="../../../js/jquery.mobile.collapsible.js"></script>
<script type="text/javascript" src="../../../js/jquery.mobile.controlGroup.js"></script>
<script type="text/javascript" src="../../../js/jquery.mobile.fieldContain.js"></script>
<script type="text/javascript" src="../../../js/jquery.mobile.listview.js"></script>
<script type="text/javascript" src="../../../js/jquery.mobile.listview.filter.js"></script>
<script type="text/javascript" src="../../../js/jquery.mobile.dialog.js"></script>
<script type="text/javascript" src="../../../js/jquery.mobile.navbar.js"></script>
<script type="text/javascript" src="../../../js/jquery.mobile.grid.js"></script>
<script type="text/javascript" src="../../../tests/jquery.testHelper.js"></script>
<link rel="stylesheet" href="../../../external/qunit.css" type="text/css"/>
<script type="text/javascript" src="../../../external/qunit.js"></script>
<script type="text/javascript" src="page_core.js"></script>
</head>
<body>
<h1 id="qunit-header">jQuery Mobile Page Test Suite</h1>
<h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests">
</ol>
<div id="main" style="position: absolute; top: -10000px; left: -10000px;">
<div data-role="page">
<div data-role="header">
<div>
<a href="foo">foo</a>
</div>
<a href="foo">foo</a>
</div><!-- /header -->
<div data-role="footer">
<div>
<a href="foo">foo</a>
</div>
<a href="foo">foo</a>
</div><!-- /header -->
</div>
</body>
</html>

24
tests/unit/page/page_core.js Normal file
View file

@ -0,0 +1,24 @@
/*
* mobile page unit tests
*/
(function( $ ) {
module('jquery.mobile.page.js');
test( "nested header anchors aren't altered", function(){
ok(!$('.ui-header > div > a').hasClass('ui-btn'));
});
test( "nested footer anchors aren't altered", function(){
ok(!$('.ui-footer > div > a').hasClass('ui-btn'));
});
test( "unnested footer anchors are styled", function(){
ok($('.ui-footer > a').hasClass('ui-btn'));
});
test( "unnested footer anchors are styled", function(){
ok($('.ui-footer > a').hasClass('ui-btn'));
});
})(jQuery);