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-4-4-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>
    
          <section id="swatch-default" data-role="page">
            <header data-role="header"><h1>jQuery Mobile</h1></header>
            <div class="content" data-role="content">
                  <h3>Default Swatch</h3>
                  <ul data-role="listview">
                          <li><a href="#swatch-a">View swatch a</a></li>
                          <li><a href="#swatch-b">View swatch b</a></li>
                          <li><a href="#swatch-c">View swatch c</a></li>
                          <li><a href="#swatch-d">View swatch d</a></li>
                          <li><a href="#swatch-e">View swatch e</a></li>
                  </ul>
                  <p>Some sample form elements and buttons:</p>
                  <form  action=<formprocessor.php> method="post">
                <div data-role="fieldcontain">
                  <label for="select-restaurants">Select Your Restaurants:</label>
                          <select id="select-restaurants" name="select-restaurants" data-native-menu="false" multiple="multiple">
                            <option value="choose" data-placeholder="true">Choose...</option>
                            <optgroup label="French">
                              <option value="lecentral">Le Central</option>
                                  <option value="bistrovandome">Bistro Vandome</option>
                                  <option value="antoines">Antoine's</option>
                            </optgroup>
                            <optgroup label="Cajun">
                              <option value="bayoubobs">Bayou Bob's</option>
                                  <option value="pappadeaux" disabled="disabled">Pappadeaux</option>
                                  <option value="luciles">Lucile's</option>
                            </optgroup>
                          </select>
                </div>
                  </form>
                  <div data-role="controlgroup" data-type="horizontal">
                    <a href="#" data-role="button">Yes</a>
                    <a href="#" data-role="button">No</a>
                    <a href="#" data-role="button">Cancel</a>
                  </div>
            </div>
            <footer data-role="footer"><h1>O'Reilly</h1></footer>
          </section>
  
          <section id="swatch-a" data-role="page" data-theme="a">
            <header data-role="header"><h1>jQuery Mobile</h1></header>
            <div class="content" data-role="content">
                  <h3>Swatch A</h3>
                  <ul data-role="listview">
                          <li><a href="#swatch-default">View default swatch</a></li>
                          <li><a href="#swatch-b">View swatch b</a></li>
                          <li><a href="#swatch-c">View swatch c</a></li>
                          <li><a href="#swatch-d">View swatch d</a></li>
                          <li><a href="#swatch-e">View swatch e</a></li>
                  </ul>
                  <p>Some sample form elements and buttons:</p>
                  <form  action=<formprocessor.php> method="post">
                <div data-role="fieldcontain">
                  <label for="select-restaurants">Select Your Restaurants:</label>
                          <select id="select-restaurants" name="select-restaurants" data-native-menu="false" multiple="multiple">
                            <option value="choose" data-placeholder="true">Choose...</option>
                            <optgroup label="French">
                              <option value="lecentral">Le Central</option>
                                  <option value="bistrovandome">Bistro Vandome</option>
                                  <option value="antoines">Antoine's</option>
                            </optgroup>
                            <optgroup label="Cajun">
                              <option value="bayoubobs">Bayou Bob's</option>
                                  <option value="pappadeaux" disabled="disabled">Pappadeaux</option>
                                  <option value="luciles">Lucile's</option>
                            </optgroup>
                          </select>
                </div>
                  </form>
                  <div data-role="controlgroup" data-type="horizontal">
                    <a href="#" data-role="button">Yes</a>
                    <a href="#" data-role="button">No</a>
                    <a href="#" data-role="button">Cancel</a>
                  </div>
            </div>
            <footer data-role="footer"><h1>O'Reilly</h1></footer>
          </section>
  
          <section id="swatch-b" data-role="page" data-theme="b">
            <header data-role="header"><h1>jQuery Mobile</h1></header>
            <div class="content" data-role="content">
                  <h3>Swatch B</h3>
                  <ul data-role="listview">
                          <li><a href="#swatch-default">View default swatch</a></li>
                          <li><a href="#swatch-a">View swatch a</a></li>
                          <li><a href="#swatch-c">View swatch c</a></li>
                          <li><a href="#swatch-d">View swatch d</a></li>
                          <li><a href="#swatch-e">View swatch e</a></li>
                  </ul>
                  <p>Some sample form elements and buttons:</p>
                  <form  action=<formprocessor.php> method="post">
                <div data-role="fieldcontain">
                  <label for="select-restaurants">Select Your Restaurants:</label>
                          <select id="select-restaurants" name="select-restaurants" data-native-menu="false" multiple="multiple">
                            <option value="choose" data-placeholder="true">Choose...</option>
                            <optgroup label="French">
                              <option value="lecentral">Le Central</option>
                                  <option value="bistrovandome">Bistro Vandome</option>
                                  <option value="antoines">Antoine's</option>
                            </optgroup>
                            <optgroup label="Cajun">
                              <option value="bayoubobs">Bayou Bob's</option>
                                  <option value="pappadeaux" disabled="disabled">Pappadeaux</option>
                                  <option value="luciles">Lucile's</option>
                            </optgroup>
                          </select>
                </div>
                  </form>
                  <div data-role="controlgroup" data-type="horizontal">
                    <a href="#" data-role="button">Yes</a>
                    <a href="#" data-role="button">No</a>
                    <a href="#" data-role="button">Cancel</a>
                  </div>
            </div>
            <footer data-role="footer"><h1>O'Reilly</h1></footer>
          </section>
          
          
          <section id="swatch-c" data-role="page" data-theme="c">
            <header data-role="header"><h1>jQuery Mobile</h1></header>
            <div class="content" data-role="content">
                  <h3>Swatch C</h3>
                  <ul data-role="listview">
                          <li><a href="#swatch-default">View default swatch</a></li>
                          <li><a href="#swatch-a">View swatch a</a></li>
                          <li><a href="#swatch-b">View swatch b</a></li>
                          <li><a href="#swatch-d">View swatch d</a></li>
                          <li><a href="#swatch-e">View swatch e</a></li>
                  </ul>
                  <p>Some sample form elements and buttons:</p>
                  <form  action=<formprocessor.php> method="post">
                <div data-role="fieldcontain">
                  <label for="select-restaurants">Select Your Restaurants:</label>
                          <select id="select-restaurants" name="select-restaurants" data-native-menu="false" multiple="multiple">
                            <option value="choose" data-placeholder="true">Choose...</option>
                            <optgroup label="French">
                              <option value="lecentral">Le Central</option>
                                  <option value="bistrovandome">Bistro Vandome</option>
                                  <option value="antoines">Antoine's</option>
                            </optgroup>
                            <optgroup label="Cajun">
                              <option value="bayoubobs">Bayou Bob's</option>
                                  <option value="pappadeaux" disabled="disabled">Pappadeaux</option>
                                  <option value="luciles">Lucile's</option>
                            </optgroup>
                          </select>
                </div>
                  </form>
                  <div data-role="controlgroup" data-type="horizontal">
                    <a href="#" data-role="button">Yes</a>
                    <a href="#" data-role="button">No</a>
                    <a href="#" data-role="button">Cancel</a>
                  </div>
            </div>
            <footer data-role="footer"><h1>O'Reilly</h1></footer>
          </section>
  
          <section id="swatch-d" data-role="page" data-theme="d">
            <header data-role="header"><h1>jQuery Mobile</h1></header>
            <div class="content" data-role="content">
                  <h3>Swatch D</h3>
                  <ul data-role="listview">
                          <li><a href="#swatch-default">View default swatch</a></li>
                          <li><a href="#swatch-a">View swatch a</a></li>
                          <li><a href="#swatch-b">View swatch b</a></li>
                          <li><a href="#swatch-c">View swatch c</a></li>
                          <li><a href="#swatch-e">View swatch e</a></li>
                  </ul>
                  <p>Some sample form elements and buttons:</p>
                  <form  action=<formprocessor.php> method="post">
                <div data-role="fieldcontain">
                  <label for="select-restaurants">Select Your Restaurants:</label>
                          <select id="select-restaurants" name="select-restaurants" data-native-menu="false" multiple="multiple">
                            <option value="choose" data-placeholder="true">Choose...</option>
                            <optgroup label="French">
                              <option value="lecentral">Le Central</option>
                                  <option value="bistrovandome">Bistro Vandome</option>
                                  <option value="antoines">Antoine's</option>
                            </optgroup>
                            <optgroup label="Cajun">
                              <option value="bayoubobs">Bayou Bob's</option>
                                  <option value="pappadeaux" disabled="disabled">Pappadeaux</option>
                                  <option value="luciles">Lucile's</option>
                            </optgroup>
                          </select>
                </div>
                  </form>
                  <div data-role="controlgroup" data-type="horizontal">
                    <a href="#" data-role="button">Yes</a>
                    <a href="#" data-role="button">No</a>
                    <a href="#" data-role="button">Cancel</a>
                  </div>
            </div>
            <footer data-role="footer"><h1>O'Reilly</h1></footer>
          </section>
  
          <section id="swatch-e" data-role="page" data-theme="e">
            <header data-role="header"><h1>jQuery Mobile</h1></header>
            <div class="content" data-role="content">
                  <h3>Swatch E</h3>
                  <ul data-role="listview">
                          <li><a href="#swatch-default">View default swatch</a></li>
                          <li><a href="#swatch-a">View swatch a</a></li>
                          <li><a href="#swatch-b">View swatch b</a></li>
                          <li><a href="#swatch-c">View swatch c</a></li>
                          <li><a href="#swatch-d">View swatch d</a></li>
                  </ul>
                  <p>Some sample form elements and buttons:</p>
                  <form  action=<formprocessor.php> method="post">
                <div data-role="fieldcontain">
                  <label for="select-restaurants">Select Your Restaurants:</label>
                          <select id="select-restaurants" name="select-restaurants" data-native-menu="false" multiple="multiple">
                            <option value="choose" data-placeholder="true">Choose...</option>
                            <optgroup label="French">
                              <option value="lecentral">Le Central</option>
                                  <option value="bistrovandome">Bistro Vandome</option>
                                  <option value="antoines">Antoine's</option>
                            </optgroup>
                            <optgroup label="Cajun">
                              <option value="bayoubobs">Bayou Bob's</option>
                                  <option value="pappadeaux" disabled="disabled">Pappadeaux</option>
                                  <option value="luciles">Lucile's</option>
                            </optgroup>
                          </select>
                </div>
                  </form>
                  <div data-role="controlgroup" data-type="horizontal">
                    <a href="#" data-role="button">Yes</a>
                    <a href="#" data-role="button">No</a>
                    <a href="#" data-role="button">Cancel</a>
                  </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.