jQueryMobileCSS類的使用及說明

更新時(shí)間：2026年03月18日 09:57:29 作者：liyan9

這篇文章主要介紹了jQueryMobileCSS類的使用及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

jQuery Mobile CSS 類概述

jQuery Mobile 提供了一套豐富的 CSS 類，用于快速構(gòu)建響應(yīng)式移動(dòng)界面。

這些類涵蓋了布局、按鈕、列表、表單等組件，通過預(yù)定義的樣式簡(jiǎn)化開發(fā)流程。

布局類

jQuery Mobile 使用 ui-page 和 ui-content 類定義頁(yè)面結(jié)構(gòu)和內(nèi)容區(qū)域。以下是一個(gè)基本頁(yè)面布局示例：

<div data-role="page" id="home">
  <div data-role="header">
    <h1>Page Title</h1>
  </div>
  <div role="main" class="ui-content">
    <p>Page content goes here.</p>
  </div>
  <div data-role="footer">
    <h4>Footer</h4>
  </div>
</div>

按鈕樣式類

按鈕通過 ui-btn 類實(shí)現(xiàn)標(biāo)準(zhǔn)化樣式，配合狀態(tài)類如 ui-btn-active 實(shí)現(xiàn)交互效果：

<a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="ui-btn ui-btn-inline ui-corner-all">普通按鈕</a>
<a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="ui-btn ui-btn-b ui-shadow ui-btn-active">按下狀態(tài)</a>
<button class="ui-btn ui-icon-delete ui-btn-icon-left">帶圖標(biāo)按鈕</button>

列表視圖類

列表使用 ui-listview 類實(shí)現(xiàn)移動(dòng)端友好樣式，支持分隔符和縮略圖：

<ul data-role="listview" data-inset="true">
  <li data-role="list-divider">分類標(biāo)題</li>
  <li>
    <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
      <img src="icon.png" class="ui-li-thumb">
      <h2 class="ui-li-heading">主標(biāo)題</h2>
      <p class="ui-li-desc">描述文本</p>
    </a>
  </li>
  <li class="ui-li-has-count">
    <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >帶計(jì)數(shù)器的項(xiàng)<span class="ui-li-count">42</span></a>
  </li>
</ul>

表單元素類

表單控件通過 ui-input-text 等類實(shí)現(xiàn)移動(dòng)優(yōu)化：

<div class="ui-field-contain">
  <label for="name">姓名:</label>
  <input type="text" name="name" id="name" class="ui-input-text ui-body-inherit">
</div>

<select class="ui-select" name="choice" id="choice" data-native-menu="false">
  <option value="1">選項(xiàng)1</option>
  <option value="2">選項(xiàng)2</option>
</select>

<div class="ui-checkbox">
  <label for="agree" class="ui-btn ui-corner-all ui-btn-inherit">同意條款</label>
  <input type="checkbox" name="agree" id="agree">
</div>

主題系統(tǒng)類

jQuery Mobile 提供 ui-bar-[a-z] 和 ui-body-[a-z] 主題類實(shí)現(xiàn)顏色切換：

<div class="ui-bar ui-bar-a">
  <h3>主題A的工具欄</h3>
</div>
<div class="ui-body ui-body-b">
  <p>主題B的內(nèi)容區(qū)域</p>
</div>

<!-- 動(dòng)態(tài)切換主題 -->
<button class="ui-btn ui-btn-c" onclick="$('#themeBox').toggleClass('ui-body-a ui-body-b')">切換主題</button>
<div id="themeBox" class="ui-body-a">
  可切換主題的內(nèi)容
</div>

響應(yīng)式網(wǎng)格類

ui-grid 類系列實(shí)現(xiàn)簡(jiǎn)單的響應(yīng)式布局：

<div class="ui-grid-a">
  <div class="ui-block-a"><button class="ui-btn">左區(qū)塊</button></div>
  <div class="ui-block-b"><button class="ui-btn">右區(qū)塊</button></div>
</div>

<div class="ui-grid-solo">
  <div class="ui-block-a">
    <p>全寬區(qū)塊</p>
  </div>
</div>

交互狀態(tài)類

通過 ui-disabled 等類控制元素狀態(tài)：

<!-- 禁用元素 -->
<a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="ui-btn ui-disabled">禁用按鈕</a>

<!-- 加載狀態(tài) -->
<div class="ui-loader ui-corner-all ui-body-b ui-loader-verbose">
  <span class="ui-icon ui-icon-loading"></span>
  <h1>加載中...</h1>
</div>

這些 CSS 類可以組合使用，配合 data-* 屬性實(shí)現(xiàn)復(fù)雜的移動(dòng)界面效果。開發(fā)者應(yīng)參考官方文檔了解完整的類列表和兼容性注意事項(xiàng)。實(shí)際應(yīng)用中建議通過 ThemeRoller 工具定制主題樣式，而不是直接修改核心 CSS 文件。