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-3-3-22.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>
          <style>
  .content div div p {
          background-color: #ccc;
          height: 50px;
          border: 1px solid #333;
          margin: 0px;
  }
  p {
  }
          </style>
    </head>
    <body>
  
          <section id="page1" data-role="page">
            <header data-role="header"><h1>jQuery Mobile</h1></header>
            <div class="content" data-role="content">
                  <h4>2 Colums</h4>
                  <div class="ui-grid-b">
                    <div class="ui-block-a"><p>Block A</p></div>
                    <div class="ui-block-b"><p>Block B</p></div>
                  </div>
                  
                  <h4>3 Columns</h4>
                  <div class="ui-grid-b">
                    <div class="ui-block-a"><p>Block A</p></div>
                    <div class="ui-block-b"><p>Block B</p></div>
                    <div class="ui-block-c"><p>Block C</p></div>
                  </div>
                  
                  <h4>4 Columns</h4>
                  <div class="ui-grid-c">
                    <div class="ui-block-a"><p>Block A</p></div>
                    <div class="ui-block-b"><p>Block B</p></div>
                    <div class="ui-block-c"><p>Block C</p></div>
                    <div class="ui-block-d"><p>Block D</p></div>
                  </div>
                  
                  <h4>5 Columns</h4>
                  <div class="ui-grid-d">
                    <div class="ui-block-a"><p>Block A</p></div>
                    <div class="ui-block-b"><p>Block B</p></div>
                    <div class="ui-block-c"><p>Block C</p></div>
                    <div class="ui-block-d"><p>Block D</p></div>
                    <div class="ui-block-e"><p>Block E</p></div>
                  </div>
                  
                  
                  <h4>2 Rows of 3 Columns</h4>
                  <div class="ui-grid-d">
                    <div class="ui-block-a"><p>Block A</p></div>
                    <div class="ui-block-b"><p>Block B</p></div>
                    <div class="ui-block-c"><p>Block C</p></div>
                    <div class="ui-block-a"><p>Block A</p></div>
                    <div class="ui-block-b"><p>Block B</p></div>
                    <div class="ui-block-c"><p>Block C</p></div>
                  </div>
                  
            </div>
            <footer data-role="footer"><h1>O'Reilly</h1></footer>
          </section>
  
    </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.