一、安裝css
1 <head> 2 <meta charset="utf-8"> 3 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> 4 <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 5 <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 6 </head>
下載的jQuery Mobile【下載地址:http://jquerymobile.com/download/ 】html
1 <head> 2 <link rel=stylesheet href=jquery.mobile-1.3.2.css> 3 <script src=jquery.js></script> 4 <script src=jquery.mobile-1.3.2.js></script> 5 </head>
二、頁面jquery
1 data-role="page" 是顯示在瀏覽器中的頁面 2 data-role="header" 建立頁面上方的工具欄(經常使用於標題和搜索按鈕) 3 data-role="content" 定義頁面的內容,好比文本、圖像、表單和按鈕,等等 4 data-role="footer" 建立頁面底部的工具欄
1 <div data-role="header"> 2 <div data-role="navbar"> 3 <ul> 4 <li><a href="#anylink">首頁</a></li> 5 <li><a href="#anylink">頁面二</a></li> 6 <li><a href="#anylink">搜索</a></li> 7 </ul> 8 </div> 9 </div>
1 <div data-role="collapsible"> 2 <h1>點擊我 - 我能夠摺疊!</h1> 3 <p>我是可摺疊的內容。</p> 4 </div>
1 <div data-role="collapsible-set"> 2 <div data-role="collapsible"> 3 <h1>點擊我 - 我能夠摺疊!</h1> 4 <p>我是被展開的內容。</p> 5 </div> 6 <div data-role="collapsible"> 7 <h1>點擊我 - 我能夠摺疊!</h1> 8 <p>我是被展開的內容。</p> 9 </div> 10 </div>