libs/js/jquery-mobile-1.2.0/docs/about/getting-started.html

   1 <!DOCTYPE html>
   2 <html>
   3         <head>
   4         <meta charset="utf-8">
   5         <meta name="viewport" content="width=device-width, initial-scale=1">
   6         <title>jQuery Mobile Docs - Quick start</title>
   7         <link rel="stylesheet"  href="../../css/themes/default/jquery.mobile.css" />
   8         <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
   9
  10         <script src="../../js/jquery.js"></script>
  11         <script src="../../docs/_assets/js/jqm-docs.js"></script>
  12         <script src="../../js/"></script>
  13
  14 </head>
  15 <body>
  16
  17 <div data-role="page" class="type-interior">
  18
  19         <div data-role="header" data-theme="f">
  20                 <h1>Quick start guide</h1>
  21
  22
  23                 <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
  24                 <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
  25         </div><!-- /header -->
  26
  27         <div data-role="content">
  28
  29                 <div class="content-primary">
  30
  31                 <h2>Getting Started with jQuery Mobile</h2>
  32
  33                 <p>jQuery Mobile provides a set of touch-friendly UI widgets and an AJAX-powered navigation system to support animated page transitions. Building your first jQuery Mobile page is easy. Here's how:</p>
  34
  35                 <h2>Create a basic page template</h2>
  36                 <p>Pop open your favorite text editor, paste in the <a href="../pages/page-anatomy.html" id="" title="page-anatomy">page template</a> below, save and open in a browser. You are now a mobile developer!</p>
  37                 <p>Here's what's in the template. In the <code>head</code>, a meta <code>viewport</code> tag sets the screen width to the pixel width of the device and references to jQuery, jQuery Mobile and the mobile theme stylesheet from the CDN add all the styles and scripts. jQuery Mobile 1.2 (1.2.0) works with versions of jQuery core from 1.7.0 to 1.8.2.</p>
  38                 <p>In the <code>body</code>, a div with a <code>data-role</code> of <code>page</code> is the wrapper used to delineate a page, and the header bar (<code>data-role="header"</code>) and content region (<code>data-role="content"</code>) are added inside to create a basic page (these are both optional). These <code>data-</code> attributes are HTML5 attributes used throughout jQuery Mobile to transform basic markup into an enhanced and styled widget.</p>
  39
  40 <pre><code>
  41 &lt;!DOCTYPE html&gt;
  42 &lt;html&gt;
  43 &lt;head&gt;
  44         &lt;title&gt;My Page&lt;/title&gt;
  45         &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  46         &lt;link rel=&quot;stylesheet&quot; href=&quot;http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css&quot; /&gt;
  47         &lt;script src=&quot;http://code.jquery.com/jquery-1.8.2.min.js&quot;&gt;&lt;/script&gt;
  48         &lt;script src=&quot;http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js&quot;&gt;&lt;/script&gt;
  49 &lt;/head&gt;
  50 &lt;body&gt;
  51
  52 &lt;div <strong>data-role=&quot;page&quot;</strong>&gt;
  53
  54         &lt;div <strong>data-role=&quot;header&quot;</strong>&gt;
  55                 &lt;h1&gt;My Title&lt;/h1&gt;
  56         &lt;/div&gt;&lt;!-- /header --&gt;
  57
  58         &lt;div <strong>data-role=&quot;content&quot;</strong>&gt;
  59                 &lt;p&gt;Hello world&lt;/p&gt;
  60         &lt;/div&gt;&lt;!-- /content --&gt;
  61
  62 &lt;/div&gt;&lt;!-- /page --&gt;
  63
  64 &lt;/body&gt;
  65 &lt;/html&gt;
  66 </code></pre>
  67
  68
  69                 <h2>Add your content</h2>
  70                 <p>Inside your content container, you can add any standard <a href="../content/content-html.html">HTML elements</a> - headings, lists, paragraphs, etc. You can write your own custom styles to create custom layouts by adding an additional stylesheet to the <code>head</code> after the jQuery Mobile stylesheet.</p>
  71
  72                 <h2>Make a listview</h2>
  73                 <p>jQuery Mobile includes a diverse set of common <a href="../lists/docs-lists.html" id="" title="docs-lists">listviews</a> that are coded as lists with a <code>data-role="listview"</code> added. Here is a simple linked list that has a role of <code>listview</code>. We're going to make this look like an inset module by adding a <code>data-inset="true"</code> and add a dynamic search filter with the <code>data-filter="true"</code> attributes.</p>
  74
  75 <pre><code>
  76 &lt;ul <strong>data-role=&quot;listview&quot; data-inset=&quot;true&quot; data-filter=&quot;true&quot</strong>&gt;
  77         &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Acura&lt;/a&gt;&lt;/li&gt;
  78         &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Audi&lt;/a&gt;&lt;/li&gt;
  79         &lt;li&gt;&lt;a href=&quot;#&quot;&gt;BMW&lt;/a&gt;&lt;/li&gt;
  80         &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Cadillac&lt;/a&gt;&lt;/li&gt;
  81         &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Ferrari&lt;/a&gt;&lt;/li&gt;
  82 &lt;/ul&gt;
  83
  84 </code></pre>
  85                 <ul data-role="listview" data-inset="true" data-filter="true">
  86                         <li><a href="#">Acura</a></li>
  87                         <li><a href="#">Audi</a></li>
  88                         <li><a href="#">BMW</a></li>
  89                         <li><a href="#">Cadillac</a></li>
  90                         <li><a href="#">Ferrari</a></li>
  91                 </ul>
  92
  93
  94
  95
  96                 <h2>Add a slider</h2>
  97                 <p>The framework contains a full set of <a href="../forms/forms-all.html">form elements</a> that automatically are enhanced into touch-friendly styled widgets. Here's a slider made with the new HTML5 input type of range, no <code>data-role</code> needed. Be sure to wrap these in a <code>form</code> element and always properly associate a <code>label</code> to every form element.</p>
  98
  99 <pre><code>
 100 &lt;form&gt;
 101    &lt;label for=&quot;slider-0&quot;&gt;Input slider:&lt;/label&gt;
 102    &lt;input <strong>type=&quot;range&quot;</strong> name=&quot;slider&quot; id=&quot;slider-0&quot; value=&quot;25&quot; min=&quot;0&quot; max=&quot;100&quot;  /&gt;
 103 &lt;/form&gt;
 104 </code></pre>
 105
 106                 <form>
 107                         <label for="slider-0">Input slider:</label>
 108                         <input type="range" name="slider-1" id="slider-0" value="25" min="0" max="100"  />
 109                 </form>
 110
 111
 112
 113                 <h2>Make a button</h2>
 114                 <p>There are a few ways to make <a href="../buttons/buttons-types.html" title="buttons-types">buttons</a>, but lets turn a link into a button so it's easy to click. Just start with a link and add a <code>data-role="button"</code> attribute to it.  You can add an <a href="../buttons/buttons-icons.html">icon</a> with the <code>data-icon</code> attribute and optionally set its position with the <code>data-iconpos</code> attribute.</p>
 115
 116 <pre><code>
 117 &lt;a href=&quot;#&quot; <strong>data-role=&quot;button&quot; data-icon=&quot;star&quot;</strong>&gt;Star button&lt;/a&gt;
 118 </code></pre>
 119
 120                 <a href="#" data-role="button" data-icon="star">Star button</a>
 121
 122
 123
 124                 <h2>Play with theme swatches</h2>
 125                 <p>jQuery Mobile has a robust <a href="../api/themes.html" id="">theme framework</a> that supports up to 26 sets of toolbar, content and button colors, called a "swatch". Just add a <code>data-theme="e"</code> attribute to any of the widgets on this page: page, header, list, input for the slider, or button to turn it yellow. Try different swatch letters in default theme from a-e to mix and match swatches. </p>
 126                 <p>Cool party trick: add the theme swatch to the page and see how all the widgets inside the content will automatically inherit the theme (headers and footers don't inherit, they default to swatch "a").</p>
 127
 128 <code>&lt;a href=&quot;#&quot; data-role=&quot;button&quot; data-icon=&quot;star&quot; <strong>data-theme=&quot;a&quot;</strong>&gt;Button&lt;/a&gt;</code>
 129
 130                 <a href="#" data-role="button" data-icon="star" data-theme="a">data-theme="a"</a>
 131                 <a href="#" data-role="button" data-icon="star" data-theme="b">data-theme="b"</a>
 132                 <a href="#" data-role="button" data-icon="star" data-theme="c">data-theme="c"</a>
 133                 <a href="#" data-role="button" data-icon="star" data-theme="d">data-theme="d"</a>
 134                 <a href="#" data-role="button" data-icon="star" data-theme="e">data-theme="e"</a>
 135
 136         <p>When you're ready to build a custom theme, use <a href="http://www.jquerymobile.com/themeroller" rel="external">ThemeRoller</a> to drag and drop, then download a custom theme.</p>
 137
 138         <h2>Go forth and build stuff</h2>
 139         <p>This is just scratching the surface of all the cool things you can build with jQuery Mobile with little effort. Be sure to explore <a href="../pages/page-links.html" id="" title="page-links">linking pages</a>, <a href="../pages/page-transitions.html" id="" title="page-transitions">adding animated page transitions</a>, and <a href="../pages/dialog/index.html" id="" title="page-dialogs">creating dialogs</a>. Use the <a href="../api/data-attributes.html" id="" title="data-attributes">data-attribute reference</a> to try out some of the other <code>data-</code> attributes you can play with. </p>
 140
 141         <p><strong>More of a developer?</strong> Great, forget everything we just covered (kidding). If you don't want to use the <code>data-</code> attribute configuration system, you can take full control of everything and call plugins directly because these are all just standard jQuery plugins built with the UI widget factory. Be sure to dig into <a href="../api/globalconfig.html" id="" title="globalconfig">global configuration</a>, <a href="../api/events.html" id="" title="events">events</a>, and <a href="../api/methods.html" id="" title="methods">methods</a>. Then read up on <a href="../pages/page-scripting.html" id="" title="page-scripting">scripting pages</a>, <a href="../pages/page-dynamic.html" id="" title="page-dynamic">generating dynamic pages</a>, and <a href="../pages/phonegap.html" id="" title="phonegap">building PhoneGap apps</a>.</p>
 142                 </div><!--/content-primary -->
 143
 144                 <div class="content-secondary">
 145
 146                         <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
 147
 148                                         <h3>More in this section</h3>
 149
 150                                         <ul data-role="listview"  data-theme="c" data-dividertheme="d">
 151                                                 <li data-role="list-divider">Overview</li>
 152                                                 <li><a href="../../docs/about/intro.html">Intro to jQuery Mobile</a></li>
 153                                                 <li data-theme="a"><a href="../../docs/about/getting-started.html">Quick start guide</a></li>
 154                                                 <li><a href="../../docs/about/features.html">Features</a></li>
 155                                                 <li><a href="../../docs/about/accessibility.html">Accessibility</a></li>
 156                                                 <li><a href="../../docs/about/platforms.html">Supported platforms</a></li>
 157                                         </ul>
 158                         </div>
 159                 </div>
 160
 161         </div><!-- /content -->
 162
 163         <div data-role="footer" class="footer-docs" data-theme="c">
 164                 <p class="jqm-version"></p>
 165                 <p>&copy; 2012 jQuery Foundation and other contributors</p>
 166         </div>
 167
 168
 169 </div><!-- /page -->
 170
 171 </body>
 172 </html>