欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jqueryMobile使用示例分享

 更新時間：2016年01月12日 15:51:11   投稿：hebedich  
這里是本人學(xué)習(xí)jQuery Mobile的過程，現(xiàn)在將學(xué)習(xí)過程中的實例一一展現(xiàn)出來，希望能幫到更多的新手。本系列中實例都經(jīng)過了本人的親自測試。

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

示例一：

<!DOCTYPE html>
 <html lang="zh-CN">
 <head>
   <meta charset="UTF-8">
   <link rel="stylesheet" >
   <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" >
    <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>我是可折疊的內(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" >
<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" >
  <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>我是可折疊的內(nèi)容。</p>
   </div>
   <div data-role="collapsible">
    <h3>點擊我 - 我可以折疊！</h3>
    <p>我是可折疊的內(nèi)容。</p>
   </div>
   <div data-role="collapsible">
    <h3>點擊我 - 我可以折疊！</h3>
    <p>我是可折疊的內(nèi)容。</p>
   </div>
   <div data-role="collapsible">
    <h3>點擊我 - 我可以折疊！</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" >
<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" >
<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>

演示圖

在介紹過程中有不對的地方或不嚴謹?shù)牡胤?，歡予以糾正。感謝大家！

與其他教程不同的是，本教程都是通一個個實例進行展示。關(guān)鍵性介紹都會在代碼中穿插。

相關(guān)文章

  • JS和JQUERY獲取頁面大小,滾動條位置,元素位置(示例代碼)

    JS和JQUERY獲取頁面大小,滾動條位置,元素位置(示例代碼)

    這篇文章主要是對JS和JQUERY獲取頁面大小,滾動條位置,元素位置的示例代碼進行了介紹。需要的朋友可以過來參考下，希望對大家有所幫助
    2013-12-12
  • jQuery之簡單的表單驗證實例

    jQuery之簡單的表單驗證實例

    下面小編就為大家?guī)硪黄猨Query之簡單的表單驗證實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-07
  • jquery實現(xiàn)簡易驗證插件封裝

    jquery實現(xiàn)簡易驗證插件封裝

    這篇文章主要為大家詳細介紹了jquery實現(xiàn)簡易驗證插件的封裝，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-09-09
  • jQuery?獲取與設(shè)置元素屬性的詳細方法(看完這篇文章就搞明白了)

    jQuery?獲取與設(shè)置元素屬性的詳細方法(看完這篇文章就搞明白了)

    這篇文章帶領(lǐng)大家熟練掌握?jQuery?的屬性方面的操作，包括固有屬性的獲取與設(shè)置，自定義屬性的獲取與設(shè)置等等，走進?jQuery?的更深層次階段，這也是腳本之家小編發(fā)現(xiàn)的一篇比較實用的文章
    2023-06-06
  • 基于jquery animate操作css樣式屬性小結(jié)

    基于jquery animate操作css樣式屬性小結(jié)

    昨天突然有網(wǎng)友問我animate()方法可以來操作所有css屬性嗎？是的，我告訴他可以的。不過，在此有需要注意點需要大家搞清楚。接下來通過本篇文章給大家介紹基于jquery animate操作css樣式屬性小結(jié)，對jquery animate css相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧
    2015-11-11
  • jQuery調(diào)取jSon數(shù)據(jù)并展示的方法

    jQuery調(diào)取jSon數(shù)據(jù)并展示的方法

    這篇文章主要介紹了jQuery調(diào)取jSon數(shù)據(jù)并展示的方法,實例分析了jQuery調(diào)用json數(shù)據(jù)及展示的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-01-01
  • jquery的ajaxSubmit()異步上傳圖片并保存表單數(shù)據(jù)演示代碼

    jquery的ajaxSubmit()異步上傳圖片并保存表單數(shù)據(jù)演示代碼

    使用jquery的ajaxSubmit()異步上傳圖片的捅死實現(xiàn)保存表單數(shù)據(jù)，具體演示代碼如下,感興趣的朋友可以參考下哈，希望對大家有所幫助
    2013-06-06
  • jQuery 導(dǎo)航自動跟隨滾動的實現(xiàn)代碼

    jQuery 導(dǎo)航自動跟隨滾動的實現(xiàn)代碼

    這篇文章主要介紹了jQuery 導(dǎo)航自動跟隨滾動的實現(xiàn)代碼,需要的朋友可以參考下
    2018-05-05
  • jQuery中index()方法用法實例

    jQuery中index()方法用法實例

    這篇文章主要介紹了jQuery中index()方法用法,實例分析了index()方法返回索引值的幾種常見使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2014-12-12
  • jquery插件實現(xiàn)搜索歷史

    jquery插件實現(xiàn)搜索歷史

    這篇文章主要為大家詳細介紹了jquery插件實現(xiàn)搜索歷史，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-04-04

最新評論