首頁 > 開發者 > JavaScript
jqueryMobile使用樣本分享，jquerymobile樣本
jQuery Mobile是用戶端代碼，但其基於ajax技術與伺服器端互動。因此擁有一個Web Service，才能更好的體驗jQuery Mobile的功能。這裡不打算介紹Web Service的搭建過程，朋友們可以根據自己的實際需要自行搭建。
樣本一：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> <title>jqueryMoblie</title> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>表徵圖</h1> </div> <div data-role="content"> <p>定位元影像標:</p> <a href="#link" data-role="button" data-icon="search" data-iconpos="top">頂部</a> <a href="#link" data-role="button" data-icon="search" data-iconpos="right">右側</a> <a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">底部</a> <a href="#link" data-role="button" data-icon="search" data-iconpos="left">左側</a> </div> <div data-role="footer"> <h1>底部文本</h1> </div></div> </body> </html>
示範圖：
樣本二：
<!DOCTYPE html><html><head><link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script></head><body><div data-role="page" id="pageone"> <div data-role="header"> <h1>可摺疊塊</h1> </div> <div data-role="content"> <div data-role="collapsible"> <h1>點擊我 - 我可以摺疊！</h1> <p>我是可摺疊的內容。</p> </div> </div> <div data-role="footer"> <h1>頁尾文本</h1> </div></div> </body></html>
示範圖
樣本三：
<!DOCTYPE html><html lang="zh_CN"><head><meta charset="utf-8"><!-- <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.css"><script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script><script src="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script> --><link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script></head><body><div data-role="page" id="pageone"> <div data-role="header"> <h1>可摺疊集合</h1> </div> <div data-role="content"> <div data-role="collapsible-set"> <div data-role="collapsible"> <h3>點擊我 - 我可以摺疊！</h3> <p>我是可摺疊的內容。</p> </div> <div data-role="collapsible"> <h3>點擊我 - 我可以摺疊！</h3> <p>我是可摺疊的內容。</p> </div> <div data-role="collapsible"> <h3>點擊我 - 我可以摺疊！</h3> <p>我是可摺疊的內容。</p> </div> <div data-role="collapsible"> <h3>點擊我 - 我可以摺疊！</h3> <p>我是可摺疊的內容。</p> </div> </div> </div> <div data-role="footer"> <h1>在此插入底部文本</h1> </div></div> </body></html>
示範圖：
樣本四：
<html lang="zh_CN"><head><meta charset="utf-8"><link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.css"><script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script><script src="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script><style>.ui-block-a, .ui-block-b, .ui-block-c {background-color: lightgray;border: 1px solid black;height: 100px;font-weight: bold;text-align: center;padding: 30px;}</style></head><body><div data-role="page" id="pageone"> <div data-role="header"> <h1>自訂的列</h1> </div> <div data-role="content"> <p>三列樣式布局：</p> <div class="ui-grid-b"> <div class="ui-block-a"><span>第一個列</span></div> <div class="ui-block-b"><span>第二個列</span></div> <div class="ui-block-c"><span>第三個列</span></div> </div> </div></div> </body></html>
示範圖
樣本五：
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.css"><script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script><script src="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script></head><body><div data-role="page" id="pageone"> <div data-role="content"> <h2>有序列表：</h2> <ol data-role="listview"> <li><a href="#">清單項目</a></li> <li><a href="#">清單項目</a></li> <li><a href="#">清單項目</a></li> </ol> <h2>無序列表：</h2> <ul data-role="listview"> <li><a href="#">清單項目</a></li> <li><a href="#">清單項目</a></li> <li><a href="#">清單項目</a></li> </ul> </div></div> </body></html>
示範圖
在介紹過程中有不對的地方或不嚴謹的地方，歡予以糾正。感謝大家！
與其他教程不同的是，本教程都是通一個個執行個體進行展示。關鍵性介紹都會在代碼中穿插。
您可能感興趣的文章:Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
