Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-03-16 22:10:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

jQuery core style guide conformance: jquery.mobile.page.js

Browse source
This commit is contained in:
Rick Waldron 2011-06-29 09:27:58 -04:00
parent a7074bc86f
commit dfea9e2b83
1 changed files with 58 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,7 +4,8 @@
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*/
(function($, undefined ) {
(function( $, undefined ) {
$.widget( "mobile.page", $.mobile.widget, {
options: {
@ -33,38 +34,43 @@ $.widget( "mobile.page", $.mobile.widget, {
var $elem = this.element,
o = this.options;
this.keepNative = ":jqmData(role='none'), :jqmData(role='nojs')" + (o.keepNative ? ", " + o.keepNative : "");
this.keepNative = ":jqmData(role='none'), :jqmData(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
// 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( ":jqmData(role='page'), :jqmData(role='content')" ).andSelf().each(function() {
$(this).addClass( "ui-" + $(this).jqmData( "role" ) );
var $this = $( this );
$this.addClass( "ui-" + $this.jqmData( "role" ) );
});
$elem.find( ":jqmData(role='nojs')" ).addClass( "ui-nojs" );
// pre-find data els
// Pre-find data els
var $dataEls = $elem.find( ":jqmData(role)" ).andSelf().each(function() {
var $this = $( this ),
role = $this.jqmData( "role" ),
theme = $this.jqmData( "theme" );
theme = $this.jqmData( "theme" ),
$headeranchors,
leftbtn, rightbtn, backBtn;
//apply theming and markup modifications to page,header,content,footer
if ( role === "header" || role === "footer" ) {
$this.addClass( "ui-bar-" + (theme || $this.parent( ":jqmData(role='page')" ).jqmData( "theme" ) || "a") );
// add ARIA role
// 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" );
// Right,left buttons
$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,39 +80,44 @@ $.widget( "mobile.page", $.mobile.widget, {
rightbtn = $headeranchors.eq( 1 ).addClass( "ui-btn-right" ).length;
}
// auto-add back btn on pages beyond first view
// Auto-add back btn on pages beyond first view
if ( o.addBackBtn && role === "header" &&
$( ".ui-page" ).length > 1 &&
$elem.jqmData( "url" ) !== $.mobile.path.stripHash( location.hash ) &&
!leftbtn && $this.jqmData( "backbtn" ) !== false ) {
var backBtn = $( "<a href='#' class='ui-btn-left' data-"+ $.mobile.ns +"rel='back' data-"+ $.mobile.ns +"icon='arrow-l'>"+ o.backBtnText +"</a>" ).prependTo( $this );
//if theme is provided, override default inheritance
if( o.backBtnTheme ){
backBtn = $( "<a href='#' class='ui-btn-left' data-"+ $.mobile.ns +"rel='back' data-"+ $.mobile.ns +"icon='arrow-l'>"+ o.backBtnText +"</a>" ).prependTo( $this );
// If theme is provided, override default inheritance
if ( o.backBtnTheme ) {
backBtn.attr( "data-"+ $.mobile.ns +"theme", o.backBtnTheme );
}
}
//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
.attr({ "tabindex": "0", "role": "heading", "aria-level": "1" });
// Regardless of h element number in src, it becomes h1 for the enhanced page
.attr({
"tabindex": "0",
"role": "heading",
"aria-level": "1"
});
} else if ( role === "content" ) {
if ( theme ) {
$this.addClass( "ui-body-" + theme );
}
// add ARIA role
// Add ARIA role
$this.attr( "role", "main" );
} else if ( role === "page" ) {
$this.addClass( "ui-body-" + (theme || "c") );
}
switch(role) {
switch ( role ) {
case "header":
case "footer":
case "page":
@ -129,36 +140,41 @@ $.widget( "mobile.page", $.mobile.widget, {
//links in bars, or those with data-role become buttons
$elem.find( ":jqmData(role='button'), .ui-bar > a, .ui-header > a, .ui-footer > a" )
.not( ".ui-btn" )
.not(this.keepNative)
.not( this.keepNative )
.buttonMarkup();
$elem
.find(":jqmData(role='controlgroup')")
.controlgroup({dontFilterOutInvisible: true});
$elem.find( ":jqmData(role='controlgroup')" )
.controlgroup({
dontFilterOutInvisible: true
});
//links within content areas
// Links within content areas
$elem.find( "a:not(.ui-btn):not(.ui-link-inherit)" )
.not(this.keepNative)
.not( this.keepNative )
.addClass( "ui-link" );
//fix toolbars
// Fix toolbars
$elem.fixHeaderFooter();
},
_typeAttributeRegex: /\s+type=["']?\w+['"]?/,
_enhanceControls: function() {
var o = this.options, self = this;
var o = this.options, self = this,
$this = $( this ),
type, optType,
allControls, nonNativeControls, textInputs;
// 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";
type = this.getAttribute( "type" );
optType = o.degradeInputs[ type ] || "text";
if ( o.degradeInputs[ type ] ) {
$( this ).replaceWith(
$( "<div>" ).html( $(this).clone() ).html()
.replace( self._typeAttributeRegex, " type=\""+ optType +"\" data-" + $.mobile.ns + "type=\""+type+"\" " ) );
$this.replaceWith(
$( "<div>" ).html( $this.clone() ).html()
.replace( self._typeAttributeRegex, " type=\"" + optType + "\" data-" + $.mobile.ns + "type=\"" + type + "\" " )
);
}
});
@ -166,21 +182,22 @@ $.widget( "mobile.page", $.mobile.widget, {
// may have injected new elements. We cache the non-native control
// query to reduce the number of times we search through the entire page.
var allControls = this.element.find("input, textarea, select, button"),
nonNativeControls = allControls.not(this.keepNative);
allControls = this.element.find("input, textarea, select, button");
nonNativeControls = allControls.not(this.keepNative);
// XXX: Temporary workaround for issue 785. Turn off autocorrect and
// autocomplete since the popup they use can't be dismissed by
// the user. Note that we test for the presence of the feature
// by looking for the autocorrect property on the input element.
var textInputs = allControls.filter( "input[type=text]" );
if (textInputs.length && typeof textInputs[0].autocorrect !== "undefined") {
textInputs.each(function(){
textInputs = allControls.filter( "input[type=text]" );
if ( textInputs.length && typeof textInputs[0].autocorrect !== "undefined" ) {
textInputs.each(function() {
// Set the attribute instead of the property just in case there
// is code that attempts to make modifications via HTML.
this.setAttribute("autocorrect", "off");
this.setAttribute("autocomplete", "off");
this.setAttribute( "autocorrect", "off" );
this.setAttribute( "autocomplete", "off" );
});
}