mobile基础属性与用法详解

引入对应的文件:

<link href="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

一、页面结构说明

页面的三要素:

页面 data-role="page"  //注意这个属性必须有 且为最外层div 否则事件注册的时候 会自动注册俩次
页头 data-role="header"  //页面头部标题 或菜单区
内容 data-role="content" //页面内容
页尾 data-role="footer"  //页尾标题 或菜单区

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

【1.页面全屏】

需要当前页面的头部和尾部留在最上和最下的时候  可以在 header 和 footer 的div 中 加上属性

data-position="fixed" data-fullscreen="true"

注意俩个必须同时加,否则将无任何效果

【2.页面标题居中】

必须在 header 或 footer的 div的下一级加上 h1 标签 其他标签无效

<div data-role="footer"> <h1>标题文字</h1> </div>

二、在HTML中创建多个页面

【页面内之间切换】

默认显示第一个页面
其他页面隐藏

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

【对话框】

如果页面中只用俩个page 默认第一个page 为主体页面
不会因为第二个标签a的data-rel 属性改变第一个页面成为对话框

当然如果有多个page,其他的也是可以更改的,但是第一个page 不会更改

<div data-role="page"> <div data-role="content"> <a href="#pagetwo" data-rel="dialog">转到对话框二</a> </div> </div> <div data-role="page"> <div data-role="header"> <h1>我是一个对话框!</h1> </div> <div data-role="content"> <p>对话框与普通页面不同,它显示在当前页面的顶端。它不会横跨整个页面宽度。对话框页眉中的图标 “X” 可关闭对话框。</p> <a href="#pageone">转到页面一</a> </div> <div data-role="footer"> <h1>页脚文本</h1> </div> </div>

三、多个页面之间的过渡效果

在a标签中添加属性

data-transition="slide"


当然可以添加滑动的反方向动作

data-direction="reverse"

fade 默认。淡入淡出到下一页。

flip 从后向前翻动到下一页。

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

pop 像弹出窗口那样转到下一页。

slide 从右向左滑动到下一页。

slidefade 从右向左滑动并淡入到下一页。

slideup 从下到上滑动到下一页。

slidedown 从上到下滑动到下一页。

turn 转向下一页。

none 无过渡效果。

四、按钮的使用

生成按钮的三种方式

<button>
<input type="submit/reset/button"/>
<a data-role="button">
(推荐)

【导航按钮】

data-role="button"

【行内按钮】

默认一个按钮占据一行,如果不想占据一行可以使用内联属性

data-inline="true"

【组合按钮】

data-role="controlgroup" data-type="horizontal/vertical"

<div data-role="controlgroup" data-type="horizontal"> <p>水平分组:</p> <a href="#" data-role="button">按钮 1</a> <a href="#" data-role="button">按钮 2</a> <a href="#" data-role="button">按钮 3</a> </div> <div data-role="controlgroup" data-type="vertical"> <p>垂直分组(默认):</p> <a href="#" data-role="button">按钮 1</a> <a href="#" data-role="button">按钮 2</a> <a href="#" data-role="button">按钮 3</a> </div>

【后退按钮】(会自动忽略 href属性)

data-rel="back"

data-corners true | false
规定按钮是否有圆角。默认true
data-mini true | false
规定是否是小型按钮。默认false
data-shadow true | false
规定按钮是否有阴影。默认true

五、图标的使用

为按钮添加图标 只要加上如下属性 即可

data-icon="search"

data-icon="arrow-l" 左箭头

data-icon="arrow-r" 右箭头

data-icon="delete" 删除

data-icon="info" 信息

data-icon="home" 首页

data-icon="back" 返回

data-icon="search" 搜索

data-icon="grid" 网格

图标定位

data-iconpos="top/left/right/bottom" 默认left

只要图标的话:

将上述属性设置为 notext

data-iconpos="notext"

六、工具栏的使用

【页眉】

向文字的左右俩测各加一个按钮

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzzzgz.html