libs/js/jquery-mobile-1.0.1pre/experiments/scrollview/scrollview.js

   1 function ResizePageContentHeight(page) {
   2         var $page = $(page),
   3                 $content = $page.children( ".ui-content" ),
   4                 hh = $page.children( ".ui-header" ).outerHeight() || 0,
   5                 fh = $page.children( ".ui-footer" ).outerHeight() || 0,
   6                 pt = parseFloat($content.css( "padding-top" )),
   7                 pb = parseFloat($content.css( "padding-bottom" )),
   8                 wh = window.innerHeight;
   9
  10         $content.height(wh - (hh + fh) - (pt + pb));
  11 }
  12
  13 $( ":jqmData(role='page')" ).live( "pageshow", function(event) {
  14         var $page = $( this );
  15
  16         // For the demos that use this script, we want the content area of each
  17         // page to be scrollable in the 'y' direction.
  18
  19         $page.find( ".ui-content" ).attr( "data-" + $.mobile.ns + "scroll", "y" );
  20
  21         // This code that looks for [data-scroll] will eventually be folded
  22         // into the jqm page processing code when scrollview support is "official"
  23         // instead of "experimental".
  24
  25         $page.find( ":jqmData(scroll):not(.ui-scrollview-clip)" ).each(function () {
  26                 var $this = $( this );
  27                 // XXX: Remove this check for ui-scrolllistview once we've
  28                 //      integrated list divider support into the main scrollview class.
  29                 if ( $this.hasClass( "ui-scrolllistview" ) ) {
  30                         $this.scrolllistview();
  31                 } else {
  32                         var st = $this.jqmData( "scroll" ) + "",
  33                                 paging = st && st.search(/^[xy]p$/) != -1,
  34                                 dir = st && st.search(/^[xy]/) != -1 ? st.charAt(0) : null,
  35
  36                                 opts = {
  37                                         direction: dir || undefined,
  38                                         paging: paging || undefined,
  39                                         scrollMethod: $this.jqmData("scroll-method") || undefined
  40                                 };
  41
  42                         $this.scrollview( opts );
  43                 }
  44         });
  45
  46         // For the demos, we want to make sure the page being shown has a content
  47         // area that is sized to fit completely within the viewport. This should
  48         // also handle the case where pages are loaded dynamically.
  49
  50         ResizePageContentHeight( event.target );
  51 });
  52
  53 $( window ).bind( "orientationchange", function( event ) {
  54         ResizePageContentHeight( $( ".ui-page" ) );
  55 });