CS 696 Emerging Web and Mobile TechnologiesSpring Semester, 2011Doc 10 jQuery Mobile 2Mar 3, 2011Copyright ©, All rights reserved. 2011 SDSU & Roger Whitney, 5500 Campanile Drive, San Diego, CA 92182-7700 USA. OpenContent (http://www.opencontent.org/opl.shtml) license defines the copyright on this document.Thursday, March 3, 2011References2jQuery Mobile documentation, http://jquerymobile.com/demos/1.0a3/Thursday, March 3, 2011Buttons3<a href="index.html" data-role="button">Button Example</a> <a href="index.html" data-role="button" data-icon="delete">Delete</a> <a href="index.html" data-role="button" data-icon="check" data-iconpos="right">Check</a> <input name="Input" id="Input" type="submit" value="Submit Example" />Thursday, March 3, 2011Icons4Left arrow - data-icon="arrow-l"Right arrow - data-icon="arrow-r"Up arrow - data-icon="arrow-u"etc,Thursday, March 3, 2011Inline Buttons5<a href="index.html" data-role="button" data-inline="true">Button Example</a> <div> <a href="index.html" data-role="button" data-inline="true">Cancel</a> <a href="index.html" data-role="button" data-theme="b" data-inline="true">Save</a> </div>Thursday, March 3, 2011Note the documentation seems to be incorrect. It claims that the data-inline attribute goes with in the div for multiple button on same line, but the attribute has to go in each button tag.Grouped Buttons6 <div data-role="controlgroup"> <a href="index.html" data-role="button">Yes</a> <a href="index.html" data-role="button">No</a> <a href="index.html" data-role="button">Maybe</a> </div> <div data-role="controlgroup" data-type="horizontal"> <a href="index.html" data-role="button">Yes</a> <a href="index.html" data-role="button">No</a> <a href="index.html" data-role="button">Maybe</a> </div>Thursday, March 3, 2011Grid Layout7up to 5 columns <div data-role="content"> <div class="ui-grid-a"> <div class="ui-block-a"> <strong>I'm Block A</strong> and text inside will wrap </div> <div class="ui-block-b"> <strong>I'm Block B</strong> and text inside will wrap </div> </div> <fieldset class="ui-grid-b"> <div class="ui-block-a"> <button type="submit" data-theme="c">Cancel</button> </div> <div class="ui-block-b"> <button type="submit" data-theme="a">Maybe</button> </div> <div class="ui-block-c"> <button type="submit" data-theme="b">Submit</button> </div> </fieldset> </div>use any containerThursday, March 3, 2011Collapsable Content8<div data-role="collapsible"> <h3> I'm a header </h3> <p> I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me. </p></div><div data-role="collapsible" data-collapsed="true"> <h3> I'm a header Content hidden </h3> <p> I'm the collapsible content. By default I'm am hidden, clicking in the header to show the content. </p></div>Collapsable section can contain any HTMLThursday, March 3, 2011Form Elements9Slightly enhanced lookThursday, March 3, 2011fieldcontain - Adds thin line10<form action="form.php" method="post"> <div data-role="fieldcontain"> <label for="bar">Name</label> <input name="name" id="bar" type="text" value="name" /> </div> <div data-role="fieldcontain"> <label for="foo">Foo</label> <select name="foo" id="foo"> <option value="a">A</option> <option value="b">B</option> <option value="c">C</option> </select> </div></form>Thursday, March 3, 2011data-role="none"11<form action="form.php" method="post"> <div data-role="fieldcontain"> <label for="bar">Name</label> <input name="name" id="bar" type="text" value="name" data-role="none"/> </div> <div data-role="fieldcontain"> <label for="foo">Foo</label> <select name="foo" id="foo" data-role="none"> <option value="a">A</option> <option value="b">B</option> <option value="c">C</option> </select> </div></form>Don't enhanceThursday, March 3, 2011Input Types12<form action="form.php" method="post"> <div data-role="fieldcontain"> <label for="bar">Number</label> <input name="name" id="bar" type="number" value="123"/> </div> <div data-role="fieldcontain"> <label for="bar">Tel</label> <input name="name" id="bar" type="tel"/> </div> <div data-role="fieldcontain"> <label for="textarea">Textarea:</label> <textarea cols="40" rows="20" name="textarea" id="textarea"></textarea></div>Thursday, March 3, 2011Select Menus13Small Number items - overlayLarge Number items - New pageThursday, March 3, 2011Native Menus14Thursday, March 3, 2011Native Menus15<div data-role="fieldcontain"> <label for="select-choice-2" class="select">Native:</label> <select name="select-choice-2" id="select-choice-2" data-native-menu="true"> <option value="standard">Standard: 7 day</option> <option value="rush">Rush: 3 days</option> <option value="express">Express: next day</option> <option value="overnight">Overnight</option> </select></div>Thursday, March 3, 2011Lists16Lots of options <ul data-role="listview" data-theme="g"> <li><a href="acura.html">Acura</a></li> <li><a href="audi.html">Audi</a></li> <li><a href="bmw.html">BMW</a></li> </ul>Thursday, March 3, 2011Nested Lists17<ul data-role="listview" data-theme="a"> <li>Cars <ul data-role="listview" data-theme="a"> <li>Acura</li> <li>Audi</li> <li>BMW</li> </ul> </li> <li>Pets <ul data-role="listview" data-theme="a"> <li>Cat</li> <li>Dog</li> <li>Mouse</li> </ul> </li></ul>Thursday, March 3, 2011Search filter18<ul data-role="listview" data-theme="a" data-filter="true"> <li>Acura</li> <li>Audi</li> <li>BMW</li> <li>Cat</li> <li>Dog</li> <li>Mouse</li></ul>Thursday, March 3, 2011HTML, CSS & JavaScript19All still work with jQuery MobileThursday, March 3, 2011And there is more20See docs at:http://jquerymobile.com/Thursday, March 3,
View Full Document