- 浏览: 7255963 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (1546)
- 企业中间件 (236)
- 企业应用面临的问题 (236)
- 小布Oracle学习笔记汇总 (36)
- Spring 开发应用 (54)
- IBatis开发应用 (16)
- Oracle基础学习 (23)
- struts2.0 (41)
- JVM&ClassLoader&GC (16)
- JQuery的开发应用 (17)
- WebService的开发应用 (21)
- Java&Socket (44)
- 开源组件的应用 (254)
- 常用Javascript的开发应用 (28)
- J2EE开发技术指南 (163)
- EJB3开发应用 (11)
- GIS&Mobile&MAP (36)
- SWT-GEF-RCP (52)
- 算法&数据结构 (6)
- Apache开源组件研究 (62)
- Hibernate 学习应用 (57)
- java并发编程 (59)
- MySQL&Mongodb&MS/SQL (15)
- Oracle数据库实验室 (55)
- 搜索引擎的开发应用 (34)
- 软件工程师笔试经典 (14)
- 其他杂项 (10)
- AndroidPn& MQTT&C2DM&推技术 (29)
- ActiveMQ学习和研究 (38)
- Google技术应用开发和API分析 (11)
- flex的学习总结 (59)
- 项目中一点总结 (20)
- java疑惑 java面向对象编程 (28)
- Android 开发学习 (133)
- linux和UNIX的总结 (37)
- Titanium学习总结 (20)
- JQueryMobile学习总结 (34)
- Phonegap学习总结 (32)
- HTML5学习总结 (41)
- JeeCMS研究和理解分析 (9)
最新评论
-
lgh1992314:
[u][i][b][flash=200,200][url][i ...
看看mybatis 源代码 -
尼古拉斯.fwp:
图片根本就不出来好吧。。。。。。
Android文件图片上传的详细讲解(一)HTTP multipart/form-data 上传报文格式实现手机端上传 -
ln94223:
第一个应该用排它网关吧 怎么是并行网关, 并行网关是所有exe ...
工作流Activiti的学习总结(八)Activiti自动执行的应用 -
ZY199266:
获取不到任何消息信息,请问这是什么原因呢?
ActiveMQ 通过JMX监控Connection,Queue,Topic的信息 -
xiaoyao霄:
DestinationSourceMonitor 报错 应该导 ...
ActiveMQ 通过JMX监控Connection,Queue,Topic的信息
总页面框架:<div data-role="page"></div>
引用js:
<script src="js/jquery-1.6.4.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>
让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0:
<meta name="viewport" content="width=device-width, initial-scale=1">
详细的控件下面一一记录哈~~
>>>>>Toolbar:
<div data-role="header | footer | navbar"></div>
例:
<div data-role="header" data-position="inline">
<h1>Page Title</h1>
<a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
</div>
主题样式:data-theme="a | b | c | d | e"
位置固定:data-pisition="fixed"
全屏样式:data-fullscreen="true"
返回按钮:data-rel="back"
反向过渡:data-direction="reverse"
按钮位置:data-role="button" class="ui-btn-right"
自定义导航菜单: class="ui-bar ui-bar-b"
例:
<div class="ui-bar ui-bar-b">
<h3>I'm just a div with bar classes and a <a href="#" data-role="button">Button</a></h3>
</div>
<div data-role="navbar">
<ul>
<li><a href="a.html" class="ui-btn-active">One</a></li>
<li><a href="b.html">Two</a></li>
</ul>
</div>
链接:
打开对话框:<a href="#" data-rel="dialog">Dialog link</a>
对话框大小设置:
.ui-dialog .ui-header, .ui-dialog .ui-content, .ui-dialog .ui-footer { max-width: 500px; margin: 10% auto 15px auto; }
对话框遮罩主题:data-overlay-theme="a | b | c | d | e"
页面过渡:data-transition="fade | pop | flip | turn | flow | slide | slideup | slidedown | none"
>>>>>Buttons:
<a href="index.html" data-role="button">Link button</a>
小按钮:data-mini="true"
按钮上的图标:data-icon="arrow-l | arrow-r | arrow-u | arrow-d | delete | plus | minus | check | gear | refresh | forward | back | grid | star | alert | info | home | search"
图标位置:data-iconpos="top | bottom | left | right"
无文字按钮:data-iconpos="notext"
自定义图标:data-icon="myicon" .ui-icon-myicon{ }
按钮并列:data-inline="true"
按钮组:data-role="controlgroup"
水平按钮组:data-type="horizontal"
例:
<div data-role="controlgroup" data-type="horizontal">
<a href="index.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Maybe</a>
</div>
>>>>>Content:
标题:h1 、h2。。。;文本区域;图片;
可折叠: data-role="collapsible"
内容主题:data-content-theme=“a”
默认展开:data-collapsed="false"
小号折叠:data-mini="true"
可折叠组:data-role="collapsible-set"
例:
<div data-role="collapsible-set"><div data-role="collapsible" data-collapsed="false"><h3>Section 1</h3><p>I'm the collapsible set content for section B.</p></div><div data-role="collapsible"><h3>Section 2</h3><p>I'm the collapsible set content for section B.</p></div></div>
网格:class="ui-grid"
- 两列 (ui-grid-a)
- 三列(ui-grid-b)
- 四列 (ui-grid-c)
- 五列 (ui-grid-d)
例:
<div class="ui-grid-a"><div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div><div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div></div>
>>>>>List Views:
列表:data-role="listview"
普通列表:
<ul data-role="listview" data-theme="g"><li><a href="acura.html">Acura</a></li><li><a href="audi.html">Audi</a></li><li><a href="bmw.html">BMW</a></li></ul>
嵌套列表,点击某行可以进入嵌套列表:
<ul data-role="listview"><li><h3>Animals</h3><p>All your favorites from aarkvarks to zebras.</p><ul><li>Pets<ul><li><a href="">Canary</a></li><li><a href="">Cat</a></li></ul></li>
编号列表:<ol data-role="listview"><li></li><li></li></ol>
只读列表:没有<a>链接
拆分按钮列表:
<ul data-role="listview" data-split-icon="gear" data-split-theme="d"><li><a href="#链接地址1"><img src="" /><h3>Broken Bells</h3><p>Broken Bells</p></a><a href="#链接地址2" data-rel="dialog" data-transition="slideup">Purchase album</a></li></ul>列表分隔:<li data-role="list-divider"data-dividertheme=“a”>A</li>搜索过滤:<ul data-role="listview" data-filter="true" data-filter-theme=“a”></ul>数字区:<ul data-role="listview" data-theme="g"><li><a href="#">Acura</a><span class="ui-li-count">12</span></li><li><a href="#">Audi</a><span class="ui-li-count">12</span></li></ul>列表格式:<ul data-role="listview" data-theme="d" data-divider-theme="d"><li data-role="list-divider">列表标题<span class="ui-li-count">2</span></li><li><a href="#"><h3>标题</h3> <p><strong>副标题</strong></p><p>简介</p><p class="ui-li-aside"><strong>6:24</strong>PM</p></a></li></ul>图标/图标列表:<ul data-role="listview"><li><a href="#"><img src="" /><h3>Broken Bells</h3><p>Broken Bells</p></a></li></ul>列表块:<ul data-role="listview" data-inset="true">调用ListView的插件:$('#mylist').listview();更新列表:$('#mylist').listview('refresh');>>>>>Form Elements: 表单结构:<form action="form.php" method="post"> ... </form>隐藏标签:<label for="username" class="ui-hidden-accessible">Username:</label><input type="text" name="username" id="username" value="" placeholder="Username"/>或者<div data-role="fieldcontain" class="ui-hide-label"><label for="username">Username:</label><input type="text" name="username" id="username" value="" placeholder="Username"/></div>禁用表单元素:disable & enable表单容器: data-role="fieldcontain"刷新表单元素:复选框:
$("input[type='checkbox']").prop("checked",true).checkboxradio("refresh");单选框:
$("input[type='radio']").prop("checked",true).checkboxradio("refresh");下拉菜单:
var myselect = $("#selectfoo");myselect[0].selectedIndex = 3;myselect.selectmenu("refresh");Sliders:
$("input[type='range']").val(60).slider("refresh");开关:
var myswitch = $("#selectbar");myswitch[0].selectedIndex = 1;myswitch.slider("refresh");
保持原生态:data-role="none"
滑块:
<label for="slider-0">Input slider:</label>
<input type="range" name="slider" id="slider-0" value="60" min="0" max="100" step="50"data-highlight="true"data-theme="a" data-track-theme="b"/>
开关:
<div data-role="fieldcontain">
<label for="flip-c">Flip switch:</label>
<select name="slider" id="flip-c" data-role="slider" data-theme="a">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
</div>
单选复选:type="radio" type="checkbox"水平排列<fieldset data-role="controlgroup" data-type="horizontal"> ,单选框name要一致。
<div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>Choose a pet:</legend> <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" /> <label for="radio-choice-1">Cat</label> <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" /> <label for="radio-choice-2">Dog</label> <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" /> <label for="radio-choice-3">Pig</label> </fieldset> </div>
下拉菜单:弹出式data-native-menu="false"
<div data-role="fieldcontain"><label for="select-choice-5" class="select">Shipping method:</label> <select name="select-choice-5" id="select-choice-5" data-native-menu="false"> <option>Choose one...</option> <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>
发表评论
-
phonegap contact API的使用
2012-07-10 14:23 2845没事开发一个phonegap通讯录使用: js如 ... -
phonegap开发中必备的帮助文档android apk
2012-07-08 16:48 2605在phonegap配置jquerymobile开发的人 ... -
jquerymobile 开发中几个样式问题
2012-07-07 15:16 24121.在jquerymobile开发中如果遇到中文乱码处理如下 ... -
【转】JavaScript编程模式:模块的力量
2012-07-06 12:50 1835块模式是一个常用的JavaScript编程模式。它 ... -
【转】JavaScript闭包和模块模式
2012-07-06 12:45 2012原文:http://www.joezimj ... -
【转】PhoneGap域名白名单说明书(Domain Whitelist Guide)
2012-07-05 17:31 9843概述Cordova项目中的域名白名单是一个用来控制外部域名访问 ... -
phonegap拍照的获取图片和设置问题
2012-07-05 17:10 12686目前项目中Android中第一次加载使用用 ... -
Native+WebApp中Phonegap调用Android Activity
2012-07-05 16:10 10935在项目采用Native+Web方式开发,A ... -
IOS Xcode4.3使用中几个问题
2012-07-04 15:36 18181. xcode 4.3.2 编译生成的app放在哪里? ... -
PhoneGap Xcode iOS入门教程
2012-07-04 15:30 7762文介绍了利用Xcode建立PhoneGap应用程 ... -
phonegap底层原理学习和研究(四)
2012-06-12 17:34 3045在phonegap ... -
phonegap底层原理学习和研究(三)
2012-06-12 17:08 6219针对Phonegap开发中常用的D ... -
phonegap底层原理学习和研究(二)
2012-06-11 11:07 3128转载自IBM中国开发网站: http://www.ibm ... -
【转】手机应用开发者需注意的20个事项
2012-05-30 10:54 1754你想要成为手机开发者吗?你的目标可能是从应用商店中赚取大 ... -
【转】8 个移动产品设计必备网站
2012-05-30 09:49 2105本文整理了8个移动设计资源丰富的网站,希望对你的开发设计工作有 ... -
HTML5 canvas实现电子签名
2012-05-29 17:27 225841.为什么要用到BASE64编码的图片信息 Base6 ... -
HTML5 的GEOLocation的API
2012-05-29 10:15 7109Geolocation API用于将用户当前地理位 ... -
jquerymobile 一个简单的九宫格实现(Gallery)
2012-05-28 11:10 9231jquerymobile实现一个简单的九宫格代码如下: ... -
phonegap底层原理学习和研究(一)
2012-05-21 14:16 12007在phonegap中,通过android和ip ... -
jquerymobile google地图插件jquery-ui-map
2012-05-20 16:12 5842最近要开发地图相关的功能,学习一下jquerymob ...
相关推荐
Jquery学习笔记 Jquery学习笔记 Jquery学习笔记
jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery ...
“JQuery Mobile学习助手”包含了对JQuery Mobile中的所有组件、接口的详细介绍。对于JQuery Mobile的初学者,可以从中学习JQuery Mobile的所有接口与组件的功能,同时通过范例进行练习;对于JQuery Mobile开发人员...
JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记
JQuery学习笔记.txtJQuery学习笔记.txtJQuery学习笔记.txt
资源名称:jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介:《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库,从...
JQuery学习笔记 JQuery学习笔记 JQuery学习笔记 JQuery学习笔记 JQuery学习笔记
2.jQuery Mobile 构建于 jQuery 以及 jQuery UI类库之上,如果您了解 jQuery,您可以很容易的学习 jQuery Mobile。 3.jQuery Mobile 使用了极少的 HTML5、CSS3、JavaScript 和 AJAX 脚本代码来完成页面的布局渲染。...
jquery mobile用来学习的项目,适合新手使用学习
jQuery mobile相册的一种样式
jQuery Mobile 是用于创建移动 Web 应用的前端开发框架。 jQuery Mobile 可以应用于智能手机与平板电脑。 jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页。
锋利的jquery (学习笔记) 学习jquery
jQuery Mobile API文档。jQuery Mobile是jQuery框架的一个组件(而非jquery的移动版本)。jQuery Mobile是一款基于HTML5的用户界面系统,旨在使所有智能手机,平板电脑和桌面设备上都可以访问的响应网站和应用。...
通过本书的学习,读者将会获悉jQuery Mobile的核心特性,以及如何创建可主题化的设计,还会掌握jQuery Mobile的API,以及如何使用PhoneGap来扩展jQuery Mobile。 《jQuery Mobile快速入门》适合想要掌握jQuery ...
jQuery Mobile音乐播放代码 为什么使用 jQuery Mobile? 通过使用jQuery Mobile 可以 "写更少的代码,做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页,且兼容所有移动设备。 lamp 不同设备使用了...
jQuery基础教程笔记jQuery基础教程笔记jQuery基础教程笔记jQuery基础教程笔记
Jquery教程学习笔记
本资源以Hello Word为例,里面包含了jQuery Mobile框架所需要的部署文件。
jquery 学习笔记jquery 学习笔记jquery 学习笔记jquery 学习笔记
JQUERYMOBILE 提示框 用语JQUERYMOBILE 移动开发的提示框