jQuery Mobile 页面 - jquery Mobile教程 - 科蚁网
请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

jQuery Mobile 页面

2015-6-3 01:17| 发布者: admin| 查看: 2360| 评论: 2|来自: w3school

摘要: 使用 jQuery Mobile 入门提示:尽管 jQuery Mobile 适用于所有移动设备,它在台式计算机上仍然可能存在兼容性问题(由于有限的 CSS3 支持)。因此在本教程中,我们推荐您使用谷歌的 Chrome 浏览器,以获得最好的阅读 ...

使用 jQuery Mobile 入门

提示:尽管 jQuery Mobile 适用于所有移动设备,它在台式计算机上仍然可能存在兼容性问题(由于有限的 CSS3 支持)。

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

实例

data-role="page">
data-role="header">

欢迎访问我的主页

data-role="content">

我是一名移动开发者!

data-role="footer">

页脚文本

亲自试一试

例子解释:

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

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

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

在 jQuery Mobile 中添加页面

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

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

实例

id="pageone">
id="pagetwo">

亲自试一试

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

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

将页面用作对话框

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

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

实例




鲜花

握手
1

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

发表评论

最新评论

引用 QQ群521595826 2016-1-6 15:51
【怎么学好HTML5】想学习HTML5注重的是实战,如果你真的想学习HTML5可以来这个群【521-595-826】这里有很多人指导你一起学习,还有免费的课程分享给你
引用 筑墙碎梦 2015-10-21 17:24
感谢分享

查看全部评论(2)

月度热门文章


关闭

站长推荐上一条 /1 下一条

客服中心 官方QQ群