DOC PREVIEW
SDSU CS 696 - jQuery Mobile 2

This preview shows page 1-2-19-20 out of 20 pages.

Save
View full document
View full document
Premium Document
Do you want full access? Go Premium and unlock all 20 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 20 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 20 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 20 pages.
Access to all documents
Download any document
Ad free experience
Premium Document
Do you want full access? Go Premium and unlock all 20 pages.
Access to all documents
Download any document
Ad free experience

Unformatted text preview:

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

SDSU CS 696 - jQuery Mobile 2

Download jQuery Mobile 2
Our administrator received your request to download this document. We will send you the file to your email shortly.
Loading Unlocking...
Login

Join to view jQuery Mobile 2 and access 3M+ class-specific study document.

or
We will never post anything without your permission.
Don't have an account?
Sign Up

Join to view jQuery Mobile 2 2 2 and access 3M+ class-specific study document.

or

By creating an account you agree to our Privacy Policy and Terms Of Use

Already a member?