jQuery Mobile基础属性与用法详解

什么是jQuery Mobile？

jQuery Mobile 是一个用于创建移动 web 应用的用户界面框架，它基于 jQuery 核心库构建，它是轻便灵活的。它不仅可以帮助开发人员创建用户界面，还可以创建标准化的用户界面，而这些界面可以在不同的移动设备和窗口大小上运行。

jQuery Mobile基础结构

在使用 jQuery Mobile 开发移动应用程序的时候，需要使用预定义的 HTML 结构标签和数据属性，这些标签和属性可以帮助开发人员轻松地建立一个符合标准的移动应用程序页面，同时，它还可以让页面跨越各种不同的设备和平台来显示。

页面结构

jQuery Mobile 通过几个不同的标签，如<div>，<header>，<footer>，<section>和<article>来创建页面结构。每个页面都应包括一个页面标记，包含一个<head>和<body>部分，示例如下：

<!doctype html>
<html>
  <head>
    <title>jQuery Mobile Example</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div data-role="page">
      <div data-role="header">
        <h1>Header Content</h1>
      </div>
      <div data-role="content">
        <p>Page Content</p>
      </div>
      <div data-role="footer">
        <h4>Footer Content</h4>
      </div>
    </div>
  </body>
</html>

页面内容

页面内容可以由其他标签组成，示例如下：

<div data-role="header">
  <h1>Header Text</h1>
</div>
<div data-role="content">
  <p>Content Text</p>
</div>
<div data-role="footer">
  <h4>Footer Text</h4>
</div>

按钮

在页面头部或底部添加一个按钮通常是非常有用和有意义的，下面的示例演示了如何创建按钮：

<a href="#" data-role="button">Button Text</a>

表单

表单是许多网站的重要组成部分，在 jQuery Mobile 中我们可以使用<form>标记来创建表单，示例如下：

<form>
  <label for="username">Username:</label>
  <input type="text" name="username" id="username">
  <label for="password">Password:</label>
  <input type="password" name="password" id="password">
  <label for="remember">Remember me:</label>
  <input type="checkbox" name="remember" id="remember">
  <input type="submit" value="Login">
</form>

示例说明

示例1：使用jQuery Mobile创建一个滚动列表

下面的代码演示了如何使用 jQuery Mobile 来创建一个滚动列表：

<!doctype html>
<html>
  <head>
    <title>jQuery Mobile Example</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div data-role="page">
      <div data-role="header">
        <h1>Header Content</h1>
      </div>
      <div data-role="content">
        <ul data-role="listview" data-inset="true">
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 6</li>
          <li>Item 7</li>
          <li>Item 8</li>
          <li>Item 9</li>
          <li>Item 10</li>
          <li>Item 11</li>
        </ul>
      </div>
      <div data-role="footer">
        <h4>Footer Content</h4>
      </div>
    </div>
  </body>
</html>

在使用<ul>标记时，特别注意添加data-role="listview"属性，以告诉 jQuery Mobile 创建一个列表视图，而data-inset="true"属性使用时，可以让列表视图包含在页面的内容块内。

示例2：使用jQuery Mobile创建一个抽屉式内导航菜单

下面的代码演示了如何使用 jQuery Mobile 来创建一个抽屉式内导航菜单：

<!doctype html>
<html>
  <head>
    <title>jQuery Mobile Example</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div data-role="page">
      <div data-role="header">
        <h1>Header Content</h1>
      </div>
      <div data-role="content">
        <div data-role="panel" data-display="push" id="nav-panel">
          <ul data-role="listview">
            <li><a href="#">Link 1</a></li>
            <li><a href="#" data-transition="flip">Link 2</a></li>
            <li><a href="#" data-transition="slide">Link 3</a></li>
          </ul>
        </div>
        <a href="#nav-panel" data-role="button" data-icon="bars" data-iconpos="left" data-inline="true">Menu</a>
        <p>Page Content</p>
      </div>
      <div data-role="footer">
        <h4>Footer Content</h4>
      </div>
    </div>
  </body>
</html>

在这个示例中，使用<div>标记和data-role="panel"属性来创建一个抽屉式导航菜单，data-display="push"属性指定了菜单的显示方式，而在<a>标记中使用data-icon和data-iconpos属性来添加菜单图标和位置，最后再使用data-inline="true"属性来使链接变成行内元素。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery-mobile基础属性与用法详解 - Python技术站

jquery-mobile基础属性与用法详解