topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

mobile-js-sample-chapter-5-5-1.htm / htm



  <!DOCTYPE html>
  <html>
    <head>
      <title>jQuery Mobile Application</title>
  
          <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
          <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
          <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
  
    </head>
    <body>
  
          <!-- begin first page -->
          <section id="page1" data-role="page">
            <header data-role="header"><h1>jQuery Mobile</h1></header>
            <div  data-role="content" class="content">
              <p>First page!</p>
            </div>
            <footer data-role="footer"><h1>Footer</h1></footer>
          </section>
          <!-- end first page -->
          
          <!-- Begin second page -->
          <section id="page2" data-role="page">
            <header data-role="header"><h1>Header</h1></header>
            <div data-role="content" class="content">
              <p>Second page!</p>
            </div>
            <footer data-role="footer"r><h1>Footer</h1></footer>
          </section>
          <!-- end second page -->
          
          <!-- begin third page -->
          <section id="page3" data-role="page">
            <header data-role="header"><h1>Header</h1></header>
            <div data-role="content" class="content">
              <p>Third page!</p>
            </div>
            <footer data-role="footer"><h1>O'Reilly</h1></footer>
          </section>
          <!-- end third page -->
          
  <script>
  (function() {
    var methods = {
      init : function(options) {
        var settings = {
          callback: function() {}
        };
        if ( options ) {
          .extend( settings, options );
        }
                          
        $(":jqmData(role='page')").each(function() {
          this.bind("swipeleft", function() {
            // Get the current page number from the id and increment it by 1.
            var nextPage = parseInt(this.attr("id").split("page")[1]) +1;
            if (nextPage > 3) nextPage = 1;
                                          
            // Transition the page.
            .mobile.changePage("#page"+nextPage, "slide");
                                          
          });
          this.bind("swiperight", function() {
                                          
            // Get the current page number from the id and decrement it by 1.
            var nextPage = parseInt(this.attr("id").split("page")[1]) -1;
            if (nextPage === 0) nextPage = 3;
                                          
            // Transition the page.
            .mobile.changePage("#page"+nextPage, "slide", true);
          })
        })
  
      }
    }
          
    .fn.initApp = function(method) {
      // Method calling logic
      if ( methods[method] ) {
        return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
      } else if ( typeof method === 'object' || ! method ) {
        return methods.init.apply( this, arguments );
      } else {
        .error( 'Method ' +  method + ' does not exist' );
      } 
    }
  })(jQuery);
  
  document.ready(function() {
    $().initApp();
  })
  </script>
    </body>
  </html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.