自学jQueryMobile之简单创建页面

时间：2021-08-02 07:52:02

首先简答介绍一下JQueryMobile吧，我觉得用一句话来讲就是可以 "写更少的代码，做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页，且兼容所有移动设备。这也是我自学jQuery Mobile的原因之一吧。

废话不多说，下面一起来看看如何使用它吧！

首先你可以从jQuerymobile.com 下载 jQuery Mobile库

1、安装，把下载的这三个文件导入进来

jquery.mobile-1.4.5.css

jquery-1.10.2.js

jquery.mobile-1.4.5.js

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
<script src="jquery.js"></script>
<script src="jquery.mobile-1.4.5.js"></script>
</head>

2、导入三个文件以后，下面就来简单的船建一个页面吧！

<body>
<div data-role="page">

  <div data-role="header">
    <h1>这是主页</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>我在自学jQuery Mobile</p>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>

</div>
</body>

这样就能创建一个简单的页面了，效果图如下

自学jQueryMobile之简单创建页面

解释一下几个属性吧

data-role="page" 是显示在浏览器中的页面
data-role="header" 创建页面上方的工具栏（常用于标题和搜索按钮）
data-role="content" 定义页面的内容，比如文本、图像、表单和按钮，等等
data-role="footer" 创建页面底部的工具栏

创建完一个界面以后，下面我们来看看如何添加一个页面

在 jQuery Mobile，您可以在单一 HTML 文件中创建多个页面。
通过唯一的 id 来分隔每张页面，并使用 href 属性来连接彼此：
例如 <a href="#pagetwo" data-transition="turn">转到页面二</a>
data-rel="dialog":点击（轻触）链接时创建一个对话框

上代码

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>欢迎来到我的主页</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>欢迎! 点击以下链接跳转到第二个页面。 </p>
    <a href="#pagetwo">跳转到第二个页面</a>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 

<div data-role="page" id="pagetwo">
  <div data-role="header">
    <h1>欢迎来到我的主页</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>这是第二个页面。点击以下链接跳转到第一个页面。</p>
    <a href="#pageone">跳转到第一个页面</a>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div>

效果图的话，自己试试上面的代码就可以了。

翻页的时候还可以给页面添加过滤效果

例如：

<a href="#anylink" data-transition="slide">切换到第二个页面</a>

想要了解更多的过滤效果请参考官网教程，这里就不一一演示了。

这次先介绍到这里吧，因为我也在自学中，暂时先介绍这么多吧。下次重点介绍一下jQueryMobile的组件的各种事件。

相关文章