您现在的地位: 365体育备用网址 > bet365体育在线, > jQuery Mobile 教程 > jQuery Mobile 页面

jQuery Mobile 页面_365体育备用网址官网资讯

您现在的地位: 365体育备用网址 > bet365体育在线, > jQuery Mobile 教程 > jQuery Mobile 页面

jQuery Mobile 页面

此节有 155 人学习过     参与评论

使用 jQuery Mobile 入门

提示:尽管 jQuery Mobile 适用于一切移动设施,它在台式计算机上依旧可能存在兼容性问题(由于有限的 CSS3 撑腰)。

因此在本教程中,我们推举您使用谷歌的 Chrome 扫瞄器,以获得最好的阅读体验。

实例

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

  <div data-role="header">
    <h1>欢迎访问我的主页</h1>
  </div>

  <div data-role="content">
    <p>我是一名移动开拓者!</p>
  </div>

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

</div>
</body>

亲自试一试

例子解释:

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

在这些容器中,您能够添加任意 HTML 元素 - 段落、图像、标题、列表等等。

提示:HTML5 data-* 属性用于通过 jQuery Mobile 为移动设施创建“对触控友好的”交互外观。

在 jQuery Mobile 中添加页面

在 jQuery Mobile,您能够在单一 HTML 文件中创建多个页面。

请通过唯一的 id 来分隔每张页面,并使用 href 属性来连接彼此:

实例

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo">转到页面二</a>
  </div>
</div>

<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">转到页面一</a>
  </div>
</div>

亲自试一试

注释:包含大批内容的 web 应用程序会影响加载时间(比如文本、链接、图像和脚本等等)。如果您不希望在内部链接页面,请使用外部文件:

<a href="externalfile.html">转到外部页面</a>

将页面用作对话框

对话框是用来显示信息或要求输入的视窗类型。

如需在用户点击(轻触)链接时创建一个对话框,请向该链接添加 data-rel="dialog":

实例

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo" data-rel="dialog">转到页面二</a>
  </div>
</div>

<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">转到页面一</a>
  </div>
</div>

亲自试一试

如对本文有疑问,请提交到交流百家乐在线娱 娱乐场,广大热心网友会为你解答!! 点击进入百家乐在线娱 娱乐场


公布评论 (155人察看0条评论)
请自觉遵守互联网相关的政策法规,严禁公布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换天将图库手机版
最新评论
------分隔线----------------------------
条评论
Sitemap