jquery-mobile基础属性与用法详解

2024-03-09 00:47:03 41

本文实例讲述了jquery-mobile基础属性与用法。分享给大家供大家参考，具体如下：

写在前面

本文是根据w3c学习轨迹，自己研习过程中记录下的笔记，只供自己学习轨迹记录之用，不喜勿喷。

0.引入库

引入对应的文件：

<linkrel="stylesheet"href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<scriptsrc="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<scriptsrc="http://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" //页尾标题或菜单区

<divdata-role="page"id="pageone">
<divdata-role="header">
<h1>在此处写入标题</h1>
</div>
<divdata-role="content">
<p>在此处写入正文</p>
</div>
<divdata-role="footer">
<h1>在此处写入页脚文本</h1>
</div>
</div>

【1.页面全屏】

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

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

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

【2.页面标题居中】

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

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

二、在HTML中创建多个页面

【页面内之间切换】

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

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

【对话框】

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

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

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

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

在a标签中添加属性

data-transition="slide"

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

data-direction="reverse"

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

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

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

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

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

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

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

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

turn转向下一页。

none无过渡效果。

四、按钮的使用

生成按钮的三种方式

<button>
<inputtype="submit/reset/button"/>
<adata-role="button">(推荐)

【导航按钮】

data-role="button"

【行内按钮】

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

data-inline="true"

【组合按钮】

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

<divdata-role="controlgroup"data-type="horizontal">
<p>水平分组：</p>
<ahref="#"data-role="button">按钮1</a>
<ahref="#"data-role="button">按钮2</a>
<ahref="#"data-role="button">按钮3</a>
</div>
<divdata-role="controlgroup"data-type="vertical">
<p>垂直分组（默认）：</p>
<ahref="#"data-role="button">按钮1</a>
<ahref="#"data-role="button">按钮2</a>
<ahref="#"data-role="button">按钮3</a>
</div>

【后退按钮】（会自动忽略href属性）

data-rel="back"

data-cornerstrue|false
规定按钮是否有圆角。默认true
data-minitrue|false
规定是否是小型按钮。默认false
data-shadowtrue|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"

六、工具栏的使用

【页眉】

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

<divdata-role="page">
<divdata-role="header">
<ahref="#"data-role="button"data-icon="home">首页</a>
<h1>欢迎访问我的主页</h1>
<ahref="#"data-role="button"data-icon="search">搜索</a>
</div>
</div>

[单个按钮居右]（默认居左）

如果只加一个按钮，不管是加在h1的前面还是后面都会默认放在左侧，如果想放在右侧，需在按钮上添加

如下属性

class="ui-btn-right"

[注意]：页眉只可以包含一到俩个按钮，页脚无限制

【页脚】

页脚和页眉不同，他省去了一些内联样式且不会居中
如果需要居中，则可以在footer上添加

class="ui-btn" (并且只能在footer上添加)

当然也可以选择水平或垂直的组合方式

<divdata-role="footer"class="ui-btn">
<divdata-role="controlgroup"data-type="horizontal">
<ahref="#"data-role="button"data-icon="plus">转播到新浪微博</a>
<ahref="#"data-role="button"data-icon="plus">转播到腾讯微博</a>
<ahref="#"data-role="button"data-icon="plus">转播到QQ空间</a>
</div>
</div>

【页眉和页脚的定位】

[inline]默认

页眉页脚与页面内容平行即内容多高页眉和页脚随内容的高度增加

data-position="inline"

[fixed]

根据滚动条的位置分别显示或隐藏页眉或页脚

data-position="fixed"

[fullscreen]

需要同时定义俩个属性会同时显示隐藏页眉或页脚

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

七、导航栏的使用

【导航栏】

使用navbar定义导航栏

data-role="navbar"

注意：navbar下面的a标签可以免去
data-role="button"自动会添加类似属性

<divdata-role="header">
<h1>标题可不要</h1>
<divdata-role="navbar">
<ul>
<li><ahref="#a">首页</a></li>
<li><ahref="#a">导航</a></li>
<li><ahref="#a">搜索</a></li>
</ul>
</div>
</div>

【选中按钮】

在不点击的情况下激活选中

class="ui-btn-active"

点击后激活选中（这个预先放入按钮属性中点击时会被激活）

class="ui-state-persist"

[注意]：

导航按钮可以放在footercontentheader中

需要使用的时候：

必须按照

div:data-role="footer">div:data-role="navbar">ul>li>a的层级来展示

八、可折叠的使用

【单个可折叠】

data-role="collapsible"

格式：

<divdata-role="collapsible">
<h1>标题</h1>
<p>内容</p>
</div>

折叠默认是关闭的，需要默认打开可添加属性

data-collapsed="false"

【嵌套的可折叠】

此格式可以去掉内容保留标题，制作无限极菜单

<divdata-role="collapsible">
<h1>点击我-我可以折叠！</h1>
<p>我是被展开的内容。</p>
<divdata-role="collapsible">
<h1>点击我-我是嵌套的可折叠块！</h1>
<p>我是嵌套的可折叠块中被展开的内容。</p>
</div>
</div>

【集合可折叠】

父：data-role="collapsible-set"
子：data-role="collapsible"

<divdata-role="collapsible-set">
<divdata-role="collapsible">
<h3>点击我-我可以折叠！</h3>
<p>我是可折叠的内容。</p>
</div>
<divdata-role="collapsible">
<h3>点击我-我可以折叠！</h3>
<p>我是可折叠的内容。</p>
</div>
<divdata-role="collapsible">
<h3>点击我-我可以折叠！</h3>
<p>我是可折叠的内容。</p>
</div>
<divdata-role="collapsible">
<h3>点击我-我可以折叠！</h3>
<p>我是可折叠的内容。</p>
</div>
</div>

【去掉标题圆角】

data-inset="false"

【小化按钮】

data-mini="true"

【改变图标】

data-expanded-icon

九、网格布局

【四种网格布局】

网格类列列宽度
对应实例
ui-grid-a2 50%/50% ui-block-a|b

ui-grid-b3 33%/33%/33% ui-block-a|b|c

ui-grid-c4 25%/25%/25%/25% ui-block-a|b|c|d

ui-grid-d5 20%/20%/20%/20%/20%ui-block-a|b|c|d|e

父类行row
ui-grid-a俩列
ui-block-a
ui-block-b

注意子类每一个新的类ui-block-a都会另起一行

十、列表视图

在ul或ol上增加属性

data-role="listview"

【特定列分割】

li列表中增加分隔符手动分割

data-role="list-divider"

【按字母自动分割】

ul/ol增加属性

data-autodividers="true"

【圆角】

data-inset="true"

【搜索与过滤】

data-role="listview" 列表属性
data-autodividers="true" 按字母自动分组属性
data-inset="true" 圆角属性
data-filter="true" 数据过滤属性
data-filter-placeholder="搜索姓名..." 过滤文本框默认文字属性

<uldata-role="listview"data-autodividers="true"data-inset="true"data-filter="true"data-filter-placeholder="搜索姓名...">
<li><ahref="#">Adele</a></li>
<li><ahref="#">Agnes</a></li>
<li><ahref="#">Albert</a></li>
<li><ahref="#">Billy</a></li>
<li><ahref="#">Bob</a></li>
<li><ahref="#">Calvin</a></li>
<li><ahref="#">Cameron</a></li>
<li><ahref="#">Chloe</a></li>
<li><ahref="#">Christina</a></li>
<li><ahref="#">Diana</a></li>
<li><ahref="#">Gabriel</a></li>
<li><ahref="#">Glen</a></li>
<li><ahref="#">Ralph</a></li>
<li><ahref="#">Valarie</a></li>
</ul>

【只读属性】

去掉li里的a标签保留文字即可

【列表内容】

1.包含缩略图的列表

<uldata-role="listview"data-inset="true">
<li>
<ahref="#">
<imgsrc="/i/chrome.png">
<h2>GoogleChrome</h2>
<p>GoogleChromeisafree,open-sourcewebbrowser.Releasedin2008.</p>
</a>
</li>
<li>
<ahref="#">
<imgsrc="/i/firefox.png">
<h2>MozillaFirefox</h2>
<p>FirefoxisawebbrowserfromMozilla.Releasedin2004.</p>
</a>
</li>
</ul>

2.列表图标

如果是16*16的图标加上

class="ui-li-icon"

<li>
<ahref="#">
<imgsrc="us.png"alt="USA"class="ui-li-icon">
USA
</a>
</li>

不是就同上。

3.拆分按钮

<uldata-role="listview">
<li>
<ahref="#"><imgsrc="chrome.png"></a>
<ahref="#download"data-rel="dialog">下载浏览器</a>
</li>
</ul>

4.计数泡沫

a标签里的sapn加上类名

class="ui-li-count"

<uldata-role="listview">
<li><ahref="#">Inbox<spanclass="ui-li-count">335</span></a></li>
<li><ahref="#">Sent<spanclass="ui-li-count">123</span></a></li>
<li><ahref="#">Trash<spanclass="ui-li-count">7</span></a></li>
</ul>

5.更改默认图标

li里添加属性

data-icon="minus"

6.日历事件

列表>分隔列表
>列表内容

<uldata-role="listview"data-inset="true">
<lidata-role="list-divider">星期三,1月2日,2013<spanclass="ui-li-count">2</span></li>
<li><ahref="#">
<h2>医生</h2>
<p><b>ToPeterGriffin</b></p>
<p>Well,Mr.Griffin,I'velookedintophysicalresults.</p>
<p>Ah,Mr.Griffin,I'mnotquitesurehowtosaythis.KimBassinger?Basssinger?Bassinger?</p>
<p>Butnow,ontothecancer</p>
<p>YouareaCancer,right?YouwereborninJuly?Nowontothesetestresults.</p>
<pclass="ui-li-aside">Re:Appointment</p></a>
</li>
<li><ahref="#">
<h2>GlenQuagmire</h2>
<p>Remembermethisweekend!</p>
<br>
<p>-giggitygiggitygoo</p>
<pclass="ui-li-aside">Re:Camping</p></a>
</li>
</ul>

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jquery-mobile基础属性与用法详解

热门推荐

随机推荐