您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > jqueryMobile使用方法及實(shí)例分享

jqueryMobile使用方法及實(shí)例分享

文章來源：365jz.com 點(diǎn)擊數(shù)：382 更新時(shí)間：2017-08-13 10:23 參與評論

jQuery Mobile是客戶端代碼，但其基于ajax技術(shù)與服務(wù)器端交互。因此擁有一個(gè)Web Service，才能更好的體驗(yàn)jQuery Mobile的功能。這里不打算介紹Web Service的搭建過程，朋友們可以根據(jù)自己的實(shí)際需要自行搭建。

示例一：

<!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>圖標(biāo)</h1>
 </div>

 <div data-role="content">
  <p>定位圖標(biāo):</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">右側(cè)</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">左側(cè)</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>點(diǎn)擊我 - 我可以折疊！</h1>
   <p>我是可折疊的內(nèi)容。</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>點(diǎn)擊我 - 我可以折疊！</h3>
     <p>我是可折疊的內(nèi)容。</p>
   </div>
   <div data-role="collapsible">
    <h3>點(diǎn)擊我 - 我可以折疊！</h3>
    <p>我是可折疊的內(nèi)容。</p>
   </div>
   <div data-role="collapsible">
    <h3>點(diǎn)擊我 - 我可以折疊！</h3>
    <p>我是可折疊的內(nèi)容。</p>
   </div>
   <div data-role="collapsible">
    <h3>點(diǎn)擊我 - 我可以折疊！</h3>
    <p>我是可折疊的內(nèi)容。</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>第一個(gè)列</span></div>
   <div class="ui-block-b"><span>第二個(gè)列</span></div>
   <div class="ui-block-c"><span>第三個(gè)列</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="#">列表項(xiàng)</a></li>
   <li><a href="#">列表項(xiàng)</a></li>
   <li><a href="#">列表項(xiàng)</a></li>
  </ol>
  <h2>無序列表：</h2>
  <ul data-role="listview">
   <li><a href="#">列表項(xiàng)</a></li>
   <li><a href="#">列表項(xiàng)</a></li>
   <li><a href="#">列表項(xiàng)</a></li>
  </ul>
 </div>
</div> 

</body>
</html>

演示圖