Jquery Mobile 入门

最新推荐文章于 2024-03-30 07:52:30 发布

qq396225997

最新推荐文章于 2024-03-30 07:52:30 发布

阅读量397

点赞数

分类专栏： Jquery Mobile

本文链接：https://blog.csdn.net/qq396225997/article/details/38798633

版权

Jquery Mobile 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Jquery Mobile是一个移动设备端的JS框架。是Jquery do more,write less一个新的阐释。

Jquery Mobile是html5 css3 以及Jquery 的集合。这些技术都可以用在jqm上。

阅读以下代码：

<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>

Jquery 每个页面就是一个data-role="page" 。 header 是页面的顶部，footer是页面的地部.

header 和footer 也可以不写在page 里面，有属性可以制定header 和 footer 的。

<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>

一个html 可以有多个pager ,在<a href="#"> 跳转过程中，#号地方几时所需要制定的page id.如果跳转到其他页面，

也有调用jQuery.mobile.changePage(to[,options])函数.

或者直接在herf 制定html 的相对路径。这样需要在html加上data-ajax="false" .但是链接用到的对应的js 会失效。

在w3c的文档，

Page

带有 data-role="page" 属性的容器。

Data 属性	值	描述
data-add-back-btn	true \| false	自动添加后退按钮，仅用于页眉。
data-back-btn-text	sometext	规定后退按钮的文本。
data-back-btn-theme	letter (a-z)	规定后退按钮的主题颜色。
data-close-btn-text	letter (a-z)	规定对话上的关闭按钮的文本。
data-dom-cache	true \| false	规定是否清除个别页面的 jQuery DOM 缓存（如果设置为 true，则您需要注意对 DOM 的管理，并全面测试所有移动设备）。
data-overlay-theme	letter (a-z)	规定对话页面的叠加（背景）色。
data-theme	letter (a-z)	规定页面的主题颜色。默认是 "c"。
data-title	sometext	规定页面的标题。
data-url	url	该值用于更新 URL，而不是用于请求页面。