First, Why do you want to learn Jquery Mobile
Jquerymobile is the mobile version of jquery, understand the basic jquery knowledge, will be simple html+css can complete a lot of complex functions, and there is this framework in the enterprise with a more
Second, Adobe Dreamweaver CS6 Environment building and software cracking
Software Installation steps:
Http://www.phonegap100.com/article-79-1.html
Software Download link Address:
Http://bbs.phonegap100.com/thread-135-1-1.html
Third, Jquery Mobile the basic composition of the page
1.<meta name= "viewport" content= "Width=device-width"/>
Typically, the mobile device displays the page at a width of 900px, plus this sentence allows the width of the page to be the same as the screen width of the mobile device
2. Basic composition of the page
<div data-role= "Page" > <div data-role= "Header" > Head </div> <div data-role= "Content" > Capacity </div> <div data-role= "Footer" > Bottom </div> </div> <section id= "Page1" data-role= "page" > <header data-role= "header" > <div data-role= "Content" class= "Content" > <p> This is content </p> </div> <footer data-role= "Footer" > </section>
A first example: <! Doctypehtml> <title>jquery Mobile Page Frame </title> <metaname= "Viewport" content= "Width=device-width"/> <metacharset= "Utf-8" > <linkhref= "Css/jquery.mobile-1.0.1.min.css" Rel= "Stylesheet" type= "Text/css"/> <scriptsrc= "Js/jquery-1.6.4.js" Type= "Text/javascript" ></script> <scriptsrc= "Js/jquery.mobile-1.0.1.js" Type= "Text/javascript" ></script> <body> <sectionid= "Page1" data-role= "page" > <header data-role= "header" > <div data-role= "Content" class= "Content" > <p> This is content </p> </div> <footer data-role= "Footer" > </section> </body>
|
<body>html 4.01/xhtml 1.0 <div id= "Header" >...</div> <div id= "Navigation" >...</div> <div id= "main" >...</div> <div id= "sidebar" >...</div> <div id= "Footer" >...</div> </body> <body> in HTML5 <nav>... </nav> <div id= "main" >...</div> <aside>...</aside> <footer>...</footer> </body> |
Four, page jump
First type of page jump
<a href= "dialog/index.html" data-role= "button" data-rel= "Back" data-theme= "C" >Cancel</a>
Data-rel= the "Back" property ignores the href attribute
The default data-ajax= "True" jquery Mobile is the default through the AJAX switch page
Data-ajax= "false"
<! Doctypehtml> <title>jquery Mobile Page Frame </title> <metaname= "Viewport" content= "Width=device-width"/> <metacharset= "Utf-8" > <linkhref= "Css/jquery.mobile-1.0.1.min.css" Rel= "Stylesheet" type= "Text/css"/> <scriptsrc= "Js/jquery-1.6.4.js" Type= "Text/javascript" ></script> <scriptsrc= "Js/jquery.mobile-1.0.1.js" Type= "Text/javascript" ></script> <body> <div data-role= "page" id= "page" > <div data-role= "Header" > </div> <div data-role= "Content" > <ul data-role= "ListView" > <li><ahref= "#page2" > 2nd page </a></li> <li><ahref= "#page3" > 3rd page </a></li> <li><ahref= "#page4" > 4th page </a></li> </ul> </div> <div data-role= "Footer" > </div> </div> <div data-role= "page" id= "Page2" > <div data-role= "Header" > </div> <div data-role= "Content" > <p> content Page 2nd </p> <ahref= "#page" > Back to Home </a> </div> <div data-role= "Footer" > </div> </div> <div data-role= "page" id= "Page3" > <div data-role= "Header" > </div> <div data-role= "Content" > <p> content Page 3rd </p> <ahref= "#page" > Back to Home </a> </div> <div data-role= "Footer" > </div> </div> <div data-role= "page" id= "Page4" > <div data-role= "Header" > </div> <div data-role= "Content" > <p> content Page 4th </p> <ahref= "#page" > Back to Home </a> </div> <div data-role= "Footer" > </div> </div> </body>
|
2. Second type of page jump
<a href= "index2.htm" > 2nd page </a>
Five, dialog box
Open a dialog box by setting data-rel= "dialog".
<a href= "foo.html" data-rel= "dialog" >open dialog</a>
4. Transition Effect of dialog box
<a href= "foo.html" data-rel= "dialog" data-transition= "Pop" >open dialog</a>
Property optional Value: Pop (default), Fade,flip,turn,flow,slidefade,slide,slideup,slidedown,none
02.Jquery Mobile Introduction and Jquery Mobile page and dialog box