下面是一个简单的 jQuery Mobile 实例,其中包含一个页面,一个表单以及一些基本的 UI 组件。这个实例演示了如何使用 jQuery Mobile 创建一个移动端网页:
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<!-- 第一页 -->
<div data-role="page" id="page1">

  <div data-role="header">
    <h1>jQuery Mobile 实例</h1>
  </div>

  <div data-role="content">
    <p>欢迎来到 jQuery Mobile 实例页面!</p>

    <!-- 按钮链接到第二页 -->
    <a href="#page2" data-role="button" data-transition="slide">进入第二页</a>

    <!-- 表单 -->
    <form>
      <label for="username">用户名:</label>
      <input type="text" name="username" id="username" placeholder="请输入用户名">

      <label for="password">密码:</label>
      <input type="password" name="password" id="password" placeholder="请输入密码">

      <button type="submit" data-theme="b">登录</button>
    </form>
  </div>

  <div data-role="footer">
    <h4>页脚文本</h4>
  </div>
</div>

<!-- 第二页 -->
<div data-role="page" id="page2">

  <div data-role="header">
    <h1>第二页</h1>
  </div>

  <div data-role="content">
    <p>这是第二页的内容。</p>

    <!-- 返回按钮 -->
    <a href="#page1" data-role="button" data-rel="back" data-transition="slide">返回第一页</a>
  </div>

  <div data-role="footer">
    <h4>页脚文本</h4>
  </div>
</div>

</body>
</html>

在这个例子中,有两个页面(#page1 和 #page2)。第一页包含一个简单的欢迎信息、一个按钮链接到第二页以及一个登录表单。第二页包含一些示例内容和一个返回按钮。这个实例演示了如何使用 jQuery Mobile 创建页面、按钮和表单,并进行页面之间的导航。你可以根据需求扩展和修改这个例子。


转载请注明出处:http://www.pingtaimeng.com/article/detail/14468/jQuery Mobile