码迷,mamicode.com
首页 > Web开发 > 详细

JqueryMobile学习记录一

时间:2015-06-04 19:03:29      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:

安装

做页面之前首先引用三个文件:

<link href="/Scripts/jquery.mobile-1.4.5/jquery.mobile-1.4.5.css" rel="stylesheet" />
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script src="/Scripts/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>

因为JqueryMobile必须jquery的基础上才能使用,所以要先引用jquery.js,再引用JqueryMobile.js

 

布局

定义样式,效果之类的,都是通过data-xx来实现的,首先介绍data-role:

<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:整个页面,所有的元素都要在这个容器中

header:页面上方的工具栏,如标题、搜索框

content:页面内容

footer:页面底部的工具栏

 

 

页面跳转

JqueryMobile中的页面跳转:

定义两个div data-role="page",分别加上不同的id

然后用a href="#id" 实现跳转

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

如果希望以对话框的形式跳转

给a标签加上 data-rel="dialog"

 

 

过渡效果

通过个a标签加一个data-transition属性来实现,不写是默认淡出淡入

fade      默认。淡出淡入

flip       从后向前翻动到下一页

flow      抛出当前页面,引入下一页

slide     从右向左滑动到下一页

.....具体百度

 

如果希望slide从左向右滑动(相反的方向), 再给a标签加一个属性:data-direction="reverse"

 

 

创建按钮

  • 使用 <button> 元素
  • 使用 <input> 元素
  • 使用 <a data-role="button"></a>元素

推荐使用<a data-role="button"></a>来创建页面之间的链接

    <input> 或 <button> 元素用于表单提交

 

行内按钮

按钮默认会占据整行的宽度,如果希望多个按钮并排显示,需要给按钮添加属性data-inline="true" (行内按钮)

组合按钮

给父级div加 data-role="controlgroup" , 并且添加data-type="horizontal | vertical"的其中一个值

<div data-role="controlgroup" data-type="horizontal">
  <a href="#anylink" data-role="button">按钮 1</a>
  <a href="#anylink" data-role="button">按钮 2</a>
  <a href="#anylink" data-role="button">按钮 3</a>
</div>

后退按钮

给按钮添加属性 data-rel="back"  会成为后退按钮并忽略href属性。

 

图标按钮

给按钮添加属性 data-icon 会成为图标按钮,其取值为:

arrow-l   左箭头

delte     删除

search   搜索

...具体百度

 

同时图标的位置可以设置为上下左右,默认是左

通过属性data-iconpos设置,其取值有4个:

top        上 

bottom   下

left        左

left        右

notext   只要图标不要文字

 

 

 

JqueryMobile学习记录一

标签:

原文地址:http://www.cnblogs.com/dengshaojun/p/4552589.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!