jquery Mobile Introduction and jquery Mobile page and dialog box
|
One, Adobe Dreamweaver CS6 Environment The latest version of CS6 will support the use of JM, with automatic prompt function, very powerful. Installation Instructions Address: http://www.phonegap100.com/article-79-1.html Description: http://bbs.phonegap100.com/thread-135-1-1.html |
ii. Description of JM The default data-ajax= "True" jquery Mobile is the default through the AJAX switch page 1, the basic composition of the Jquery mobile page <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 The files that need to be referenced are:
1 2 3 |
< 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 > |
|
2, JM main label description
1 2 3 4 5 |
< div data-role = "page" > < div data-role = "header" >头部</ div > < div data-role = "content" >被容</ div > < div data-role = "footer" >底部</ div > </ div > |
First Instance:
1 2 3 5 6 8 9 11 12 14 15 17 18 20 21 23 |
!DOCTYPEhtml>
< html > < head > < title >jQuery Mobile 页面框架</ 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 > </ head > < body > < sectionid = "page1" data-role = "page" > < header data-role = "header" >< h1 >标题</ h1 ></ header > < div data-role = "content" class = "content" > < p >这是内容</ p > </ div > < footer data-role = "footer" >< h1 >这是底部</ h1 ></ footer > </ section > </ body > </ html > |
|
3. Jump First: <a href= "#page" > Return to Home </a> will jump to id=page div The second kind: Same as normal HTML jump, <a href= "index2.htm" > 2nd page </a> |
by setting data-rel= "dialog", To open a dialog box. <a href= "foo.html" data-rel= "dialog" data-transition= "Pop" >open dialog</a > Property optional value:
1 |
pop (default), Fade,flip,turn,flow,slidefade,slid E,slideup,slidedown,none |
|
|
|
|
|
From for notes (Wiz)
(ii) jquery Mobile Introduction and jquery Mobile page and dialog box