|
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"> </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">
| 
/1 
发表于 2013-7-3 21:06:20
收藏
转播
淘帖
发表于 2013-7-4 20:15:11
楼主