topical media & game development

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) _
mobile-js-jquery-ch03.txt / txt

  chapter: UI Components
  ==================
  <div data-role="header">
     <h1>Page's title</h1>
  </div>
      
      
  ====================================
  <div data-role="footer">
  
  </div>
      
      
  ====================================
  <div data-role="page" data-fullscreen="true">
  
    <div data-role="header" data-position="fixed">
     <h1>Page's title</h1>
    </div>
  
    <div data-role="content">
  
    </div>
  
    <div data-role="footer" data-position="fixed">
  
    </div>
  
  </div>
      
      
  ====================================
  .mobile.touchOverflowEnabled = true;
      
      
  ====================================
  <div data-role="header">
     <a href="logout">Log out</a>
     <h1>Title</h1>
  </div>
      
      
  ====================================
  <div data-role="header">
     <a href="logout">Log out</a>
     <h1>Title</h1>
     <a href="settings" data-icon="gear">Settings</a>
  </div>
      
      
  ====================================
  <div data-role="header">
     <a href="cancel" data-icon="delete">Cancel</a>
     <h1>New record</h1>
     <a href="save" data-icon="check" data-theme="b">Save</a>
  </div>
      
      
  ====================================
  <div data-role="header">
     <a href="cancel" data-icon="delete">Cancel</a>
     <h1><img src="images/logo.png"></h1>
     <a href="save" data-icon="check" data-theme="b">Save</a>
  </div>
      
      
  ====================================
  <div data-role="header">
     <div>
         <h1>A custom title</h1>
         <a href="#">A non-button link</a>
     </div>
  </div>
      
      
  ====================================
  <div data-role="footer" class="ui-bar">
     <a href="refresh">Refresh</a>
     <a href="filter">Filter</a>
     <a href="search">Search</a>
     <a href="add" data-theme="b">New Item</a>
  </div>
      
      
  ====================================
  <div data-role="navbar">
    <ul>
      <li><a href="link1">Option 1</a>
        <!-- ... -->
      <li><a href="linkn">Option n</a>
    </ul>
  </div>
      
      
  ====================================
  <div data-role="header" data-position="fixed">
    <h1>Home</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#index" data-icon="home">Home</a>
        <li><a href="#contacts" data-icon="search">Contacts</a>
        <li><a href="#events" data-icon="info">Events</a>
        <li><a href="#news" data-icon="grid">News</a>
      </ul>
    </div>
  </div>
      
      
  ====================================
  <div data-role="footer" data-position="fixed">
    <div data-role="navbar">
      <ul>
        <li><a href="#index" class="ui-btn-active">Home</a>
        <li><a href="#contacts">Contacts</a>
        <li><a href="#events">Events</a>
        <li><a href="#news">News</a>
      </ul>
    </div>
  </div>
      
      
  ====================================
  <!DOCTYPE html>
  <html>
   <head>
       <!-- Typical jQuery Mobile header goes here -->
   </head>
  
   <body>
      <div data-role="page" id="home">
  
      <div data-role="header">
              <h1>Home</h1>
  
      </div>
  
      <div data-role="content">
              <p>This is content for the home</p>
      </div>
  
      <div data-role="footer" data-id="main" position="fixed">
        <div data-role="navbar">
         <ul>
           <li><a data-icon="home" class="ui-btn-active ui-state-persist">Home</a></li>
           <li><a href="#help" data-icon="alert">Help</a></li>
         </ul>
        </div>
       </div>
  
   </div>
  
   <div data-role="page" id="help">
  
      <div data-role="header">
              <h1>Help</h1>
       </div>
  
      <div data-role="content">
              <p>This is content for Help</p>
       </div>
  
      <div data-role="footer" data-id="main"  position="fixed">
        <div data-role="navbar">
         <ul>
           <li><a href="#home" data-icon="home">Home</a></li>
           <li><a data-icon="alert" class="ui-btn-active ui-state-persist">Help</a></li>
         </ul>
        </div>
       </div>
  
      </div>
  
   </body>
   </html>
      
      
  ====================================
  <div data-role="content">
  
  <div data-role="collapsible">
    <h2>History of Rome</h2>
    <p>There is archaeological evidence of human occupation of the Rome area from at 
       least 14,000 years, but the dense layer of much younger debris obscures 
       Palaeolithic and Neolithic sites.[11] Evidence of stone tools, pottery and 
       stone weapons attest to at least 10,000 years of human presence.
    </p>
  </div>
  
  <div data-role="collapsible" data-collapsed="true">
    <h2>Government of Rome</h2>
    <p>Rome constitutes one of Italy's 8,101 communes, and is the largest both in terms 
       of land area and population. It is governed by a mayor, currently Gianni Alemanno, 
       and a city council.
    </p>
  </div>
  
  </div>
      
      
  ====================================
  <div data-role="content">
    <div data-role="collapsible">
       <h2>Rome</h2>
       <div data-role="collapsible">
         <h3>History</h3>
         <p>There is archaeological evidence of human occupation of the Rome area from 
            at least 14,000 years, but the dense layer of much younger debris obscures 
            Palaeolithic and Neolithic sites.[11] Evidence of stone tools, pottery and 
            stone weapons attest to at least 10,000 years of human presence. </p>
       </div>
       <div data-role="collapsible" data-collapsed="true">
         <h3>Government</h3>
         <p>Rome constitutes one of Italy's 8,101 communes, and is the largest both in 
            terms of land area and population. It is governed by a mayor, currently  
            Gianni Alemanno, and a city council. </p>
       </div>
     </div>
  
     <div data-role="collapsible">
       <h2>Madrid</h2>
       <div data-role="collapsible">
         <h3>History</h3>
         <p>Although the site of modern-day Madrid has been occupied since pre-historic 
            times,[23] in the Roman era this territory belonged to the diocese of 
            Complutum (present-day Alcalá de Henares).</p>
       </div>
       <div data-role="collapsible" data-collapsed="true">
         <h3>Government</h3>
         <p>The City Council consists of 57 members, one of them being the Mayor, 
            currently Alberto Ruiz-Gallardón Jiménez. The Mayor presides over the 
            Council.</p>
       </div>
     </div>
  </div>
      
      
  ====================================
  <div data-role="collapsible-set">
     <div data-role="collapsible">
           <!-- Collapsible title & content -->
     </div>
     <!-- any collapsible content quantity -->
     <div data-role="collapsible">
           <!-- Collapsible title & content -->
     </div>
  </div>
      
      
  ====================================
  <div data-role="page" id="home">
  
     <div data-role="header">
          <h1>@firt</h1>
     </div>
  
     <div data-role="content" data-theme="b">
  
        <!-- This defines the whole collapsible set (accordion) -->
          <div data-role="collapsible-set">
           <div data-role="collapsible" data-collapsed="false">
                  <h2>Books</h2>
               <ul>
                  <li>Programming the Mobile Web</li>
                  <li>jQuery Mobile: Up & Running</li>
                  <li>Mobile HTML5</li>
               </ul>
           </div>
           <div data-role="collapsible" data-collapsed="true">
                  <h2>Talks</h2>
               <ul>
                  <li>Velocity Conference</li>
                  <li>OSCON</li>
                  <li>Mobile World Congress</li>
                  <li>Google DevFest</li>
               </ul>
           </div>
         </div>
        <!-- end of collapsible set (accordion) -->
  
     </div>
  
  </div>
      
      
  ====================================
  <div data-role="content">
    <section class="ui-grid-a">
      <div class="ui-block-a">Column 1</div>
      <div class="ui-block-b">Column 2</div>
    </section>
  </div>
      
      
  ====================================
  <div data-role="content">
    <section class="ui-grid-b">
      <!-- Row 1 -->
      <div class="ui-block-a">Cell 1.1</div>
      <div class="ui-block-b">Cell 1.2</div>
      <div class="ui-block-c">Cell 1.3</div>
      <!-- Row 2 -->
      <div class="ui-block-a">Cell 2.1</div>
      <div class="ui-block-b">Cell 2.2</div>
      <div class="ui-block-c">Cell 2.3</div>
    </section>
  </div>
      
      
  ====================================
  <a href="#" data-role="button">Click me!</a>
  <button data-theme="b">Click me too!</button>
  <input type="button" value="Don't forget about me!">
      
      
  ====================================
  <a href="#" data-role="button" data-inline="true">Button 1</a>
  <a href="#" data-role="button" data-inline="true">Button 2</a>
  <a href="#" data-role="button" data-inline="true">Button 2</a>
      
      
  ====================================
  <div data-role="controlgroup">
    <a href="#" data-role="button">Button 1</a>
    <a href="#" data-role="button">Button 2</a>
    <a href="#" data-role="button">Button 2</a>
  </div>
      
      
  ====================================
  <div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" data-inline="true">Button 1</a>
    <a href="#" data-role="button" data-inline="true">Button 2</a>
    <a href="#" data-role="button" data-inline="true">Button 2</a>
  </div>
      
      
  ====================================
  <a href="#” data-role="button” data-shadow="false” data-corners="false">Help</a>
      
      
  ====================================
  <style>
     .ui-icon-myapp-tweet {
         background-image: url(icons/tweet.png);
     }
  </style>
      
      
  ====================================
  <style>
     .ui-icon-myapp-tweet {
         background-image: url(icons/tweet.png);
     }
  
     @media only screen and (-webkit-min-device-pixel-ratio: 2) {
        .ui-icon-myapp-tweet {
            background-image: url(icons-hd/tweet.png) !important;
              background-size: 18px 18px;
        }
  }
  
  </style>
      
      
  ====================================
  <a href="#" data-role="button" data-icon="gear">Help</a>
  <a href="#" data-role="button" data-icon="myapp-tweet">Tweet</a>
      
      
  ====================================
  <a href="#" data-role="button" data-icon="help" data-iconpos="right">Help</a>
  <a href="#" data-role="button" data-icon="help" data-iconpos="left">Help</a>
  
  <div data-role="controlgroup">
    <a href="#" data-role="button" data-icon="help" data-iconpos="bottom">Help</a>
    <a href="#" data-role="button" data-icon="help" data-iconpos="top">Help</a>
  </div>
      
      
  ==================
[] 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) _
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.