2010-05-08 19 views

回答

2

使用此jQuery插件工作對於iscroll, 用法:將data-iscroll =「enable」添加到您的頁面。

<div style="height:as u need;> 
      <div data-iscroll="scroller"> 

     // your table put here. 
     </div> 
    </div> 

    (function($) { 
    $(function() { 

     var SafariWindowHeightFix = 34; // XXX: 

     function fixed(elm) { 
     if (elm.data("iscroll-plugin")) { 
     return; 
     } 

     elm.css({ 
       overflow: 'hidden' 
       }); 

     var barHeight = 0; 
     var $header = elm.find('[data-role="header"]'); 
     if ($header.length) { 
     $header.css({ 
        "z-index": 1000, 
        padding: 0, 
        width: "100%" 
        }); 
     barHeight += $header.height(); 
     } 

     var $footer = elm.find('[data-role="footer"]'); 
     if ($footer.length) { 
     $footer.css({ 
        "z-index": 1000, 
        padding: 0, 
        width: "100%" 
        }); 
     barHeight += $footer.height(); 
     } 

     var $wrapper = elm.find('[data-role="content"]'); 
     if ($wrapper.length) { 
     $wrapper.css({ 
        "z-index": 1,"height":"600px" 
        }); 
     $wrapper.height($(window).height() - barHeight - SafariWindowHeightFix); 
     $wrapper.bind('touchmove', function (e) { e.preventDefault(); }); 
     } 
     var scroller = elm.find('[data-iscroll="scroller"]').get(1); 
     var scroller1 = elm.find('[data-iscroll="scroller"]').get(0); 

     if (scroller) { 
     var iscroll = new iScroll(scroller, {desktopCompatibility:true}); 
     elm.data("iscroll-plugin", iscroll); 
     } 
     if (scroller1) { 
     var iscroll1 = new iScroll(scroller1, {desktopCompatibility:true}); 
     elm.data("iscroll-plugin", iscroll1); 
     } 
     } 
     $('[data-role="page"][data-iscroll="enable"]').live("pageshow", function() { 
                  fixed($(this)); 
                  }); 
     $('[data-role="dialog"][data-iscroll="enable"]').live("pageshow", function() { 
                  fixed($(this)); 
                  }); 
     if ($.mobile.activePage.data("iscroll") == "enable") { 
     fixed($.mobile.activePage); 
     } 
     }); 
    })(jQuery);