jquery mobile 前言
引用js:
<link rel="stylesheet" href="../jquery.mobile-1.1.0/jquery.mobile-1.1.0.css" />
<script src="../jquery.mobile-1.1.0/jquery-1.7.2.js"></script>
<script src="../jquery.mobile-1.1.0/jquery.mobile-1.1.0.js"></script> page:
<div data-role="page"></div> 设置设备的适配:
让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0: <meta name="viewport" content="width=device-width, initial-scale=1"> <div data-role="header |content| 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>
jquery mobile 前言的更多相关文章
- jquery mobile自己定义webapp开发实例(一)——前言篇
用jquery mobile做了一段时间的webapp开发,准备用自己的一个小demo做一个模块化的分享 点击demo演示 手机演示二维码: 此demo已经是比較老的版本号,用户体验流畅度确实还存在非 ...
- 【初探移动前端开发05】jQuery Mobile (整合版)
前言 为了方便大家看的方便,我这里将这几天的东西整合一下发出. 里面的例子请使用手机浏览器查看. 什么是jQuery Mobile? jquery mobile是jquery在移动设备上的版本,他是基 ...
- 【初探移动前端开发05】jQuery Mobile (下)
前言 继续我们移动端的学习,今天到了List相关了. 本文例子请使用手机查看 List列表 在移动设备平台下,由于移动设备屏幕比较小,我们又是用手在上面点击的触屏方式,传统的列表模式在手机上就不太友好 ...
- 【初探移动前端开发04】jQuery Mobile (中)
前言 昨天我们一起学习了一部分jquery mobile的知识,今天我们继续. 这些是些很基础的东西,有朋友觉得这个没有其它的好,但是学习下不吃亏嘛,我反正也不会一起学习基础啦. 例子请使用手机查看哦 ...
- 【初探移动前端开发03】jQuery Mobile(上)
前言 到目前为止,我打了几天酱油了,这几天落实了工作,并且看了一部电视连续剧(陈道明-手机),我很少看连续剧了,但是手机质量很高啊,各位可以看看. 我们今天先学习一下jquery mobile的基础知 ...
- 【Jquery mobile】动态加载ListView 转
[Jquery mobile]动态加载ListView 分类: Jquery Mobile2011-12-01 09:04 13984人阅读 评论(1) 收藏 举报 jquerylistviewmob ...
- jQuery Mobile (整合版)
jQuery Mobile (整合版) 前言 为了方便大家看的方便,我这里将这几天的东西整合一下发出. 里面的例子请使用手机浏览器查看. 什么是jQuery Mobile? jquery mobile ...
- jQuery Mobile (中)
jQuery Mobile (中) 前言 昨天我们一起学习了一部分jquery mobile的知识,今天我们继续. 这些是些很基础的东西,有朋友觉得这个没有其它的好,但是学习下不吃亏嘛,我反正也不会一 ...
- 为大家推荐一本书《jQuery Mobile 即学即用》
这是人民邮电出版社出版的一本面向前端开发者的书. 非常喜欢书名"即学即用"这是每一个程序开发者的理想模式. 不同国家的人有不同的思维方式.这本书的作者是 [阿根廷] Maximil ...
随机推荐
- java I/O技术
一.流的分类 Java的流类大部分都是由InputStream.OutputStream.Reader和Writer这四个抽象类派生出来的 (1)按数据流向 输入流(InputStream类和Read ...
- MongoDB笔记(四)基本管理命令
MongoDB命令帮助系统 基本命令及实例 一基本命令 二基本DDL和DML 三启动与终止 四安全管理 五数据备份恢复与迁移管理 六远程连接管理 MongoDB是一个NoSQL数据库系统:一个数据 ...
- 简单的doc命令
cd 切换目录 dir 显示目录列表 mkdir 创建目录(mkdir) rmdir 删除空目录(rmdir test) rmdir /s 删除非空目录(rmdir test /s) echo 创建 ...
- jQuery如何检查某个元素在网页上是否存在
$("ID")获取的永远是对象,即使网页上没有此元素.因此当要用jQuery检查某个元素在网页上是否存在时,不能使用以下代码: if($("#ID")){ // ...
- 跨域技术-jsonp
JSONP是JSON with padding 的简写,其有两个部分组成,一个是回调函数,一个是数据,其基本格式如下 function handleResult(result){ alert(resu ...
- Json 数组排序
/*********************************************Json 数组排序 ******************************************** ...
- Linq的简单查询
Ling的简单查询,记在这里防止忘记,以便随时能够查看 List<int> intArr = new List<int>(); || i == select i; List&l ...
- hbuilder工具快捷键 http://www.qq210.com/shoutu/android
http://www.qq210.com/shoutu/android 创建HTML结构: h 8 (敲h激活代码块列表,按8选择第8个项目,即HTML代码块,或者敲h t Enter)中途换行: ' ...
- 阿里云服务器CentOS 5.7(64位)安装配置LAMP服务器(Apache+PHP5+MySQL)
一.快速安装Apache+PHP5+MySql ----------------------------------------------------- 补充:由于163的yum源上只有php5.1 ...
- ubuntu apt-get
近期重新拿起linux的书看了下,整理了一下linux的命令. ubuntu预装了APT和dpkg ,“APT”是 “Advanced Package Tool”的简写,“dpkg ”是“Debian ...