首页 > 网络编程 > JavaScript > javascript类库 > jquery > jQueryMobileCSS类的使用

jQueryMobileCSS类的使用及说明

2026-03-18 09:57:30 作者：liyan9

这篇文章主要介绍了jQueryMobileCSS类的使用及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

jQuery Mobile CSS 类概述

jQuery Mobile 提供了一套丰富的 CSS 类，用于快速构建响应式移动界面。

这些类涵盖了布局、按钮、列表、表单等组件，通过预定义的样式简化开发流程。

布局类

jQuery Mobile 使用 ui-page 和 ui-content 类定义页面结构和内容区域。以下是一个基本页面布局示例：

<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 类实现标准化样式，配合状态类如 ui-btn-active 实现交互效果：

<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">按下状态</a>
<button class="ui-btn ui-icon-delete ui-btn-icon-left">带图标按钮</button>

列表视图类

列表使用 ui-listview 类实现移动端友好样式，支持分隔符和缩略图：

<ul data-role="listview" data-inset="true">
  <li data-role="list-divider">分类标题</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">主标题</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" >带计数器的项<span class="ui-li-count">42</span></a>
  </li>
</ul>

表单元素类

表单控件通过 ui-input-text 等类实现移动优化：

<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">选项1</option>
  <option value="2">选项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>

主题系统类

jQuery Mobile 提供 ui-bar-[a-z] 和 ui-body-[a-z] 主题类实现颜色切换：

<div class="ui-bar ui-bar-a">
  <h3>主题A的工具栏</h3>
</div>
<div class="ui-body ui-body-b">
  <p>主题B的内容区域</p>
</div>

<!-- 动态切换主题 -->
<button class="ui-btn ui-btn-c" onclick="$('#themeBox').toggleClass('ui-body-a ui-body-b')">切换主题</button>
<div id="themeBox" class="ui-body-a">
  可切换主题的内容
</div>

响应式网格类

ui-grid 类系列实现简单的响应式布局：

<div class="ui-grid-a">
  <div class="ui-block-a"><button class="ui-btn">左区块</button></div>
  <div class="ui-block-b"><button class="ui-btn">右区块</button></div>
</div>

<div class="ui-grid-solo">
  <div class="ui-block-a">
    <p>全宽区块</p>
  </div>
</div>

交互状态类

通过 ui-disabled 等类控制元素状态：

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

<!-- 加载状态 -->
<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-* 属性实现复杂的移动界面效果。开发者应参考官方文档了解完整的类列表和兼容性注意事项。实际应用中建议通过 ThemeRoller 工具定制主题样式，而不是直接修改核心 CSS 文件。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。