├── index.html └── jquery.mobile.iscroll.js /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jQuery Mobile in a iScroll Plugin: Demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 |

INDEX PAGE

17 |
18 | 19 |
20 |
21 |
    22 |
  1. foo
    2. 23 |
  2. foo
    3. 24 |
  3. foo
    4. 25 |
  4. foo
    5. 26 |
  5. foo
    6. 27 |
  6. foo
    7. 28 |
  7. foo
    8. 29 |
  8. foo
    9. 30 |
  9. foo
    10. 31 |
  10. foo
    11. 32 |
  11. foo
    12. 33 |
  12. foo
    13. 34 |
  13. foo
    14. 35 |
  14. foo
    15. 36 |
  15. foo
    16. 37 |
  16. foo
    17. 38 |
  17. foo
    18. 39 |
  18. foo
    19. 40 |
  19. foo
    20. 41 |
  20. foo
    21. 42 |
  21. foo
    22. 43 |
  22. foo
    23. 44 |
45 |
46 |
47 | 48 |
49 |
50 | 57 |
58 |
59 | 60 |
61 | 62 | 63 | -------------------------------------------------------------------------------- /jquery.mobile.iscroll.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery Mobile in a iScroll plugin 3 | * Copyright (c) Kazuhiro Osawa 4 | * Dual licensed under the MIT or GPL Version 2 licenses. 5 | * dependency: iScroll 3.7.1 http://cubiq.org/iscroll 6 | */ 7 | /* 8 | 9 | -head1 name 10 | 11 | iPhone like 'position fixed' header/footer manager 12 | 13 | =head1 EXAMPLE 14 | 15 |
16 |
17 |

INDEX PAGE

18 |
19 | 20 |
21 |
22 | some contents. 23 |
24 |
25 | 26 |
27 |
28 | 35 |
36 |
37 |
38 | 39 | 40 | =cut 41 | 42 | */ 43 | (function($) { 44 | $(function() { 45 | 46 | var SafariWindowHeightFix = 34; // XXX: 47 | 48 | function fixed(elm) { 49 | if (elm.data("iscroll-plugin")) { 50 | return; 51 | } 52 | 53 | // XXX: fix crumbled css in transition changePage 54 | // for jquery mobile 1.0a3 in jquery.mobile.navigation.js changePage 55 | // in loadComplete in removeContainerClasses in .removeClass(pageContainerClasses.join(" ")); 56 | elm.css({ 57 | overflow: 'hidden' 58 | }); 59 | 60 | var barHeight = 0; 61 | var $header = elm.find('[data-role="header"]'); 62 | if ($header.length) { 63 | $header.css({ 64 | "z-index": 1000, 65 | padding: 0, 66 | width: "100%" 67 | }); 68 | barHeight += $header.height(); 69 | } 70 | 71 | var $footer = elm.find('[data-role="footer"]'); 72 | if ($footer.length) { 73 | $footer.css({ 74 | "z-index": 1000, 75 | padding: 0, 76 | width: "100%" 77 | }); 78 | barHeight += $footer.height(); 79 | } 80 | 81 | var $wrapper = elm.find('[data-role="content"]'); 82 | if ($wrapper.length) { 83 | $wrapper.css({ 84 | "z-index": 1 85 | }); 86 | $wrapper.height($(window).height() - barHeight - SafariWindowHeightFix); 87 | $wrapper.bind('touchmove', function (e) { e.preventDefault(); }); 88 | } 89 | 90 | var scroller = elm.find('[data-iscroll="scroller"]').get(0); 91 | if (scroller) { 92 | var iscroll = new iScroll(scroller, {desktopCompatibility:true}); 93 | elm.data("iscroll-plugin", iscroll); 94 | } 95 | } 96 | $('[data-role="page"][data-iscroll="enable"]').live("pageshow", function() { 97 | fixed($(this)); 98 | }); 99 | if ($.mobile.activePage.data("iscroll") == "enable") { 100 | fixed($.mobile.activePage); 101 | } 102 | 103 | }); 104 | })(jQuery); --------------------------------------------------------------------------------