libs/js/jquery-mobile-1.1.0/js/jquery.mobile.page.sections.js

   1 //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
   2 //>>description: Theming and layout of headers, footers, and content areas
   3 //>>label: Page Sections
   4 //>>group: Core
   5
   6 define( [ "jquery", "./jquery.mobile.page", "./jquery.mobile.core", "./jquery.mobile.buttonMarkup" ], function( $ ) {
   7 //>>excludeEnd("jqmBuildExclude");
   8 (function( $, undefined ) {
   9
  10 $.mobile.page.prototype.options.backBtnText  = "Back";
  11 $.mobile.page.prototype.options.addBackBtn   = false;
  12 $.mobile.page.prototype.options.backBtnTheme = null;
  13 $.mobile.page.prototype.options.headerTheme  = "a";
  14 $.mobile.page.prototype.options.footerTheme  = "a";
  15 $.mobile.page.prototype.options.contentTheme = null;
  16
  17 $( document ).delegate( ":jqmData(role='page'), :jqmData(role='dialog')", "pagecreate", function( e ) {
  18
  19         var $page = $( this ),
  20                 o = $page.data( "page" ).options,
  21                 pageRole = $page.jqmData( "role" ),
  22                 pageTheme = o.theme;
  23
  24         $( ":jqmData(role='header'), :jqmData(role='footer'), :jqmData(role='content')", this )
  25                 .jqmEnhanceable()
  26                 .each(function() {
  27
  28                 var $this = $( this ),
  29                         role = $this.jqmData( "role" ),
  30                         theme = $this.jqmData( "theme" ),
  31                         contentTheme = theme || o.contentTheme || ( pageRole === "dialog" && pageTheme ),
  32                         $headeranchors,
  33                         leftbtn,
  34                         rightbtn,
  35                         backBtn;
  36
  37                 $this.addClass( "ui-" + role );
  38
  39                 //apply theming and markup modifications to page,header,content,footer
  40                 if ( role === "header" || role === "footer" ) {
  41
  42                         var thisTheme = theme || ( role === "header" ? o.headerTheme : o.footerTheme ) || pageTheme;
  43
  44                         $this
  45                                 //add theme class
  46                                 .addClass( "ui-bar-" + thisTheme )
  47                                 // Add ARIA role
  48                                 .attr( "role", role === "header" ? "banner" : "contentinfo" );
  49
  50                         if( role === "header") {
  51                                 // Right,left buttons
  52                                 $headeranchors  = $this.children( "a" );
  53                                 leftbtn = $headeranchors.hasClass( "ui-btn-left" );
  54                                 rightbtn = $headeranchors.hasClass( "ui-btn-right" );
  55
  56                                 leftbtn = leftbtn || $headeranchors.eq( 0 ).not( ".ui-btn-right" ).addClass( "ui-btn-left" ).length;
  57
  58                                 rightbtn = rightbtn || $headeranchors.eq( 1 ).addClass( "ui-btn-right" ).length;
  59                         }
  60
  61                         // Auto-add back btn on pages beyond first view
  62                         if ( o.addBackBtn &&
  63                                 role === "header" &&
  64                                 $( ".ui-page" ).length > 1 &&
  65                                 $page.jqmData( "url" ) !== $.mobile.path.stripHash( location.hash ) &&
  66                                 !leftbtn ) {
  67
  68                                 backBtn = $( "<a href='#' class='ui-btn-left' data-"+ $.mobile.ns +"rel='back' data-"+ $.mobile.ns +"icon='arrow-l'>"+ o.backBtnText +"</a>" )
  69                                         // If theme is provided, override default inheritance
  70                                         .attr( "data-"+ $.mobile.ns +"theme", o.backBtnTheme || thisTheme )
  71                                         .prependTo( $this );
  72                         }
  73
  74                         // Page title
  75                         $this.children( "h1, h2, h3, h4, h5, h6" )
  76                                 .addClass( "ui-title" )
  77                                 // Regardless of h element number in src, it becomes h1 for the enhanced page
  78                                 .attr({
  79                                         "role": "heading",
  80                                         "aria-level": "1"
  81                                 });
  82
  83                 } else if ( role === "content" ) {
  84                         if ( contentTheme ) {
  85                             $this.addClass( "ui-body-" + ( contentTheme ) );
  86                         }
  87
  88                         // Add ARIA role
  89                         $this.attr( "role", "main" );
  90                 }
  91         });
  92 });
  93
  94 })( jQuery );
  95 //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
  96 });
  97 //>>excludeEnd("jqmBuildExclude");