 |
| http://jquerymobile.com/resources/devices.png |
Download its library from http://jquerymobile.com/.
Link to a jQuery Mobile library stored at a CDN (recommended).
<head><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"><script src="http://code.jquery.com/jquery-1.10.2.min.js"></script><script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script></head>NOTE: type="text/javascript" inside the <script> tag can be omitted since javascript is the default scripting language of HTML5.
jQuery Mobile Data Attributes
jQuery Mobile uses the HTML5 data-* attribute to create a "touch-friendly" and attractive look for mobile devices. For example, a standard jQuery Mobile page (displayed in the browser) is denoted by:<div data-role="page">In common, a page is the largest block to embed all contents, <div> is thus used. That is an jQM UI component is usually denoted by <div>, some smaller component like button may be specified in <a>, <li>, <span>, etc. In the SPA (Single Page Application) policy, you may define many pages in the same HTML page to be operated interactively by switching "page". While the HTML page was loaded, only the first <div ... page ...> is rendered. For example, add <a herf="#page_2"> in page_1 for switching to page_2 by click.
<div data-role="page" id="page_1"><div data-role="page" id="page_1-1"><div data-role="page" id="page_1-2"><div data-role="page" id="page_2">...Basically, a jQM page contains three parts: header, content and footer. Thus, your jQM code can be defined as:
<body>While switch pages, jQuery Mobile Transition Effects summarized useful effects that can be define as <a> attributes, e.g.
<div data-role="page" id="page_1">
<div data-role="header">
...
</div>
<div data-role="main" class="ui-content">
...
</div>
<div data-role="footer">
...
</div>
</div>
</body>
<a href="#pagetwo" data-transition="slide" data-direction="reverse">Slide</a>
The <a> link can be beautified with jQM button: jQuery Mobile Buttons. E.g. <a href="#page_2" class="ui-btn">Go to Page Two</a> looks like:
Many tiny and beautiful icons are also built in jQM: jQuery Mobile Button Icons. E.g. <a href="#page_2" class="ui-btn ui-icon-search ui-btn-icon-left">.
To popup a block within a page, popup can be used to to display small text, photos, maps or other content within the popup block.
<div data-role="popup" id="myPopup" class="ui-content">
...
</div>
Usually, we put navigation bar on the top of page, put <div data-role="navbar"> within <div data-role="header">.
<div data-role="navbar">
<ul>
<li><a href="#">Sign in</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Settings</a></li>
</ul>
</div>
Learn more useful jQM UI components from: http://www.w3schools.com/jquerymobile/default.asp.
NOTE: Don't reading or trying all these tutorials at the same time, remember "Learn by Doing"! Thinking a useful Mobile App, then just do it.
No comments :
Post a Comment