PhoneGap中文网
标题: Jquery mobile 基础知识有哪些 [打印本页]
作者: admin 时间: 2013-7-3 21:06
标题: Jquery mobile 基础知识有哪些
Jquery mobile 基础知识有哪些，想学Jquery mobile不知道从哪里下手
一、按钮
1.按钮基础
（1）设置链接的data-role，使其变成按钮。
<a href="index.html"data-role="button">Link button</a>
（2）设置data-mini，使按钮变小。
<a href="index.html"data-role="button" data-mini="true">Link button</a>
（3）HTML 5的button
<button>Button element</button>
（4）普通button、提交button、重置button
<input type="button"value="Button" />
<input type="submit"value="Submit Button" />
<input type="reset"value="Reset Button" />
2.带图标的按钮
（1）设置data-icon，为按钮添加图标
<a href="index.html"data-role="button" data-icon="delete">Delete</a>
（2）常见的data-icon
| Left arrow | |
| Right arrow | |
| Up arrow | |
| Down arrow | |
| Delete | |
| Plus | |
| Minus | |
| Check | |
| Gear | |
| Refresh | |
| Forward | |
| Back | |
| Grid | |
| Star | |
| Alert | |
| Info | |
| Home | |
| Search | |
（3）图标显示位置
设置data-iconpos来设置图标的显示位置
<a href="index.html"data-role="button" data-icon="delete"data-iconpos="right">Delete</a>
属性可选值：left（默认值）,right,top,bottom, notext
3.内联按钮
默认情况下按钮式会占据整个网页一行的，如果想要按钮只占据本身的大小，则需要设置为内联，设置data-inline="true"即可。
4.按钮组
通过在多个按钮外添加一个DIV，并设置data-role="controlgroup"，这样就可以组成一个按钮组。
默认按钮组是垂直显示的，如果要使其水平显示，需要设置DIV的data-type="horizontal"。
二、页面和对话框
1.页面的基本组成
<div data-role="page">
<divdata-role="header">...</div>
<divdata-role="content">...</div>
<divdata-role="footer">...</div>
</div>
2.页面跳转
<body>
<divdata-role="page" id="home">
<divdata-role="header">
<h1>PhoneGap实战</h1>
</div>
<divdata-role="content">
<ahref="#lesson01" data-role="button"data-icon="arrow-r" data-iconpos="right">第一讲：跨平台的移动应用开发</a>
<ahref="#lesson02" data-role="button"data-icon="arrow-r" data-iconpos="right">第二讲：开发环境搭建</a>
<ahref="#lesson03" data-role="button" data-icon="arrow-r" data-iconpos="right">第三讲：整合jQueryMobile开发</a>
</div>
<divdata-role="footer">
<h4> </h4>
</div>
</div>
<divdata-role="page" id="lesson01">
<divdata-role="header">
<h1>第一讲：跨平台的移动应用开发</h1>
</div>
<divdata-role="content">
<ahref="#home" data-role="button">返回目录</a>
</div>
<divdata-role="footer">
<h4> </h4>
</div>
</div>
<divdata-role="page" id="lesson02">
<divdata-role="header">
<h1>第二讲：开发环境搭建</h1>
</div>
<divdata-role="content">
<ahref="#home" data-role="button">返回目录</a>
</div>
<divdata-role="footer">
<h4> </h4>
</div>
</div>
<divdata-role="page" id="lesson03">
<divdata-role="header">
<h1>第三讲：整合jQueryMobile开发</h1>
</div>
<divdata-role="content">
<ahref="#home" data-role="button">返回目录</a>
</div>
<divdata-role="footer">
<h4> </h4>
</div>
</div>
</body>
3.对话框
通过设置data-rel="dialog"，来打开一个对话框。
<a href="foo.html"data-rel="dialog">Open dialog</a>
4.对话框过渡效果
<a href="foo.html" data-rel="dialog"data-transition="pop">Open dialog</a>
属性可选值：pop（默认）,slidedown,flip
三、工具栏
工具栏分为两种：顶部工具栏和底部工具栏，工具栏默认采用了内联的方式进行显示。
1、顶部工具栏
<divdata-role="header">
<ahref="index.html" data-icon="back">返回</a>
<h1>PhoneGap实战</h1>
<ahref="index.html" data-icon="gear">配置</a>
</div>
通过设置class为ui-btn-left或者ui-btn-right可以设置按钮的显示位置。
自动为页面添加back工具栏按钮。
<div data-role="page" id="lesson01"data-add-back-btn="true">
3、底部工具栏
<div data-role="footer"class="ui-bar">
<ahref="index.html" data-role="button"data-icon="plus">Add</a>
<ahref="index.html" data-role="button"data-icon="arrow-u">Up</a>
<ahref="index.html" data-role="button"data-icon="arrow-d">Down</a>
</div>
按钮组
<divdata-role="footer" class="ui-bar">
<divdata-role="controlgroup" data-type="horizontal">
<ahref="index.html" data-role="button"data-icon="plus">Add</a>
<ahref="index.html" data-role="button"data-icon="arrow-u">Up</a>
<ahref="index.html" data-role="button"data-icon="arrow-d">Down</a>
</div>
</div>
4、导航栏
（1）最基本的导航栏
<div data-role="navbar">
<ul>
<li><ahref="#">One</a></li>
<li><ahref="#">Two</a></li>
<li><ahref="#">Three</a></li>
</ul>
</div>
（2）带图标的导航栏
<divdata-role="navbar">
<ul>
<li><ahref="#" data-icon="grid">One</a></li>
<li><ahref="#" data-icon="grid">Two</a></li>
<li><ahref="#" data-icon="grid">Three</a></li>
</ul>
</div>
（3）图标显示位置
通过data-iconpos="bottom"进行设置
属性可选值：left,right,top（默认值）,buttom
四、表单
1、单行输入框
<input type="text"name="name" id="basic" value="" />
2、单行容器（在Android下面，目前还不行）
<divdata-role="fieldcontain">
<label for="name">Text Input:</label>
<input type="text"name="name" id="name" value="" />
</div>
3、多行输入框
<divdata-role="fieldcontain">
<labelfor="textarea">Textarea:</label>
<textareaname="textarea"id="textarea"></textarea>
</div>
4、搜索输入框
<divdata-role="fieldcontain">
<label for="search-2">Search Input:</label>
<input type="search"name="search-2" id="search-2" value="" />
</div>
5、滑块输入
<div data-role="fieldcontain">
<label for="slider-2">Input slider:</label>
<input type="range" name="slider-2"id="slider-2" value="25" min="0"max="100" />
</div>
6、替换开关
<divdata-role="fieldcontain">
<label for="flip-2">Flipswitch:</label>
<selectname="flip-2" id="flip-2" data-role="slider">
<optionvalue="nope">Nope</option>
<optionvalue="yep">Yep</option>
</select>
</div>
7、单选框
<divdata-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose apet:</legend>
<input type="radio"name="radio-choice-2" id="radio-choice-21"value="choice-1" checked="checked" />
<labelfor="radio-choice-21">Cat</label>
<inputtype="radio" name="radio-choice-2"id="radio-choice-22" value="choice-2" />
<label for="radio-choice-22">Dog</label>
<inputtype="radio" name="radio-choice-2"id="radio-choice-23" value="choice-3" />
<labelfor="radio-choice-23">Hamster</label>
<inputtype="radio" name="radio-choice-2"id="radio-choice-24" value="choice-4" />
<labelfor="radio-choice-24">Lizard</label>
</fieldset>
</div>
8、多选框
<divdata-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Agree to theterms:</legend>
<input type="checkbox"name="checkbox-2" id="checkbox-2" class="custom"/>
<label for="checkbox-2">Iagree</label>
</fieldset>
</div>
9、下拉选择框
<divdata-role="fieldcontain">
<label for="select-choice-1"class="select">Shipping method:</label>
<selectname="select-choice-1" id="select-choice-1">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
五、列表
1、基础列表
<ul data-role="listview"data-theme="g">
<li><ahref="acura.html">Acura</a></li>
<li><ahref="audi.html">Audi</a></li>
<li><ahref="bmw.html">BMW</a></li>
</ul>
2、带序号的列表
使用ol替换ul即可
3、带分隔的列表
<ul data-role="listview"data-split-icon="gear">
4、分类列表
<lidata-role="list-divider">A</li>
5、父子列表，显示子列表数目。
<span class="ui-li-count"></spn>
<ul data-role="listview">
<li><ahref="index.html">Inbox <spanclass="ui-li-count">12</span></a></li>
<li><ahref="index.html">Outbox <spanclass="ui-li-count">0</span></a></li>
<li><ahref="index.html">Drafts <spanclass="ui-li-count">4</span></a></li>
<li><ahref="index.html">Sent <spanclass="ui-li-count">328</span></a></li>
<li><ahref="index.html">Trash <spanclass="ui-li-count">62</span></a></li>
</ul>
6、带图标的列表
<img src="images/gf.png"alt="France" class="ui-li-icon">
六、主题模版
jQuery Mobile除默认之外提供了五种主题，通过data-theme来进行设置。a/b/c/d/e
针对按钮：<a href="index.html" data-icon="back"data-theme="c">
返回</a>
针对页面，<div data-role="page" id="home"data-theme="a">
针对工具栏，<div data-role="header" data-theme="b">
针对表单：
<input type="range"name="slider-2" id="slider-2" value="25"min="0" max="100" data-theme="b"/>
针对列表：<ul data-role="listview" data-inset="true"data-theme="a">
作者: 小雪 时间: 2013-7-4 20:15
学习了，Jquery mobile 也不难啊
作者: admin 时间: 2013-7-10 17:51
谢谢支持
作者: 小雪 时间: 2013-9-27 15:40
帮你顶下哈！！
作者: woniu 时间: 2013-10-25 20:26
都挺基础的。。。呵呵
作者: 童小辉 时间: 2013-10-30 10:14
前段技术还是挺简单的，主要还是要懂js，jquery框架，时间的处理流程，以及最主要的东西，云端开发（就是数据交互过程，怎么得到数据，怎么得到通信）
作者: taomaotao 时间: 2013-10-30 16:26
不错不错啊，， 给你个副博主当当啊
作者: 少先队来了 时间: 2013-10-31 14:56
使劲学啊。
作者: ymhsky 时间: 2014-1-14 11:59
很好， 学习了
| 欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/) |
Powered by Discuz! X3.2 |