jQuery Mobile基本UI组件
基本页面构造
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body> <div data-role="page">
<div data-role="header">
<h1>header</h1>
</div> <div data-role="content">
<p>content</p>
</div> <div data-role="footer">
<h1>footer</h1>
</div>
</div> </body>
</html>
多页面
将页面作为对话框：data-rel="dialog" -line31
设置过渡效果：data-transition -line17
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body> <div data-role="page" id="page1">
<div data-role="header">
<h1>header</h1>
</div> <div data-role="content">
<!-- 转到外部页面使用href="xxx.html" -->
<a href="#page2" data-transition="slide">转到页面二</a>
</div> <div data-role="footer">
<h1>footer</h1>
</div>
</div> <div data-role="page" id="page2">
<div data-role="header">
<h1>header</h1>
</div> <div data-role="content">
<a href="#dialog1" data-rel="dialog">弹出对话框</a>
</div> <div data-role="footer">
<h1>footer</h1>
</div>
</div> <div data-role="page" id="dialog1">
<div data-role="header">
<h1>header</h1>
</div> <div data-role="content">
<a href="#page1">转到页面一</a>
</div> <div data-role="footer">
<h1>footer</h1>
</div>
</div> </body>
</html>
按钮
创建按钮（使用a标签构建按钮的时候又用到了data-role）
<button>button</button>
<input type="button" value="button" />
<a href="#" data-role="button">button</a>
行内按钮，可以让按钮自适应内容而不会整屏显示。
<a href="#" data-role="button" data-inline="true">button</a>
按钮组合框，可以把一些具有相关功能的按钮组合到一起。个人感觉太僵硬了，主要是不好调整，没什么太大用处。
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button">button1</a>
<a href="#" data-role="button">button2</a>
<a href="#" data-role="button">button3</a>
</div>
后退按钮，用data-rel实现。我们前面使用data-rel实现过将页面作为弹出对话框。
<a href="#" data-role="button" data-rel="back">后退</a>
其他控制按钮本身样式的属性，conrners/mini/shadow。
<!-- 默认按钮 -->
<a href="#" data-role="button" data-inline="true">button</a>
<!-- 直角按钮 -->
<a href="#" data-role="button" data-inline="true" data-corners="false">button</a>
<!-- 小型按钮 -->
<a href="#" data-role="button" data-inline="true" data-mini="true">button</a>
<!-- 无阴影按钮 -->
<a href="#" data-role="button" data-inline="true" data-shadow="false">button</a>
jQuery Mobile的预置按钮图标，data-icon。
<a href="#" data-role="button" data-inline="true" data-icon="search">button</a>
<a href="#" data-role="button" data-inline="true" data-icon="arrow-l">button</a>
<a href="#" data-role="button" data-inline="true" data-icon="arrow-r">button</a>
<a href="#" data-role="button" data-inline="true" data-icon="delete">button</a>
<a href="#" data-role="button" data-inline="true" data-icon="info">button</a>
<a href="#" data-role="button" data-inline="true" data-icon="home">button</a>
<a href="#" data-role="button" data-inline="true" data-icon="back">button</a>
<a href="#" data-role="button" data-inline="true" data-icon="grid">button</a>
预置的东西只是预置的，如何自定义使用data-icon，甚至怎样去封装一个icon到一个标签里才是真正值得深思的，否则永远只能跟着别人的屁股走，没意思。
图标定位，data-iconpos。
<a href="#" data-role="button" data-inline="true" data-icon="grid" data-iconpos="top">button</a>
<a href="#" data-role="button" data-inline="true" data-icon="grid" data-iconpos="bottom">button</a>
<a href="#" data-role="button" data-inline="true" data-icon="grid" data-iconpos="left">button</a>
<a href="#" data-role="button" data-inline="true" data-icon="grid" data-iconpos="right">button</a>
<a href="#" data-role="button" data-inline="true" data-icon="grid" data-iconpos="notext">button</a>
好像混进了什么奇怪的东西，notext什么鬼？
工具栏
标题栏/页眉/header，还记得怎么写吗？
<div data-role="header">
<h1>header</h1>
</div>
header内允许添加最多两个按钮，比如说两个按钮
<div data-role="header">
<a href="#" data-role="button">Home</a>
<h1>Welcome</h1>
<a href="#" data-role="button">Search</a>
</div>
比如说一个按钮在左边
<div data-role="header">
<a href="#" data-role="button">Home</a>
<h1>Welcome</h1>
</div>
比如说一个按钮在右边
<div data-role="header">
<h1>欢迎来到我的主页</h1>
<a href="#" data-role="button" class="ui-btn-right">搜索</a>
</div>
在JM的css文件中搜一把就能看到ui-btn-right是什么鬼。
.ui-btn-left, .ui-btn-right, .ui-btn-inline { display: inline-block; }
页脚/footer
页脚添加的按钮个数是没有限制的
<div data-role="footer" class="ui-btn">
<a href="#" data-role="button">button</a>
<a href="#" data-role="button">button</a>
<a href="#" data-role="button">button</a>
</div>
至于这个ui-btn，我们审查一下就知道了。主要是为了去掉边距并且将内容居中显示。
.ui-btn {
display: block;
text-align: center;
cursor: pointer;
position: relative;
margin: .5em 0;
padding:;
}
定位页眉和页脚，data-position
你可以让页眉页脚分别显示在页面的两端，滑到页面的顶点才可以看到页眉页脚
<div data-role="header" data-position="inline"></div>
<div data-role="footer" data-position="inline"></div>
也可以让页眉页脚定位在你可视范围内的上下两端，无论你浏览到页面的哪个位置，页眉页脚总是出现在页面的两端
<div data-role="header" data-position="fixed"></div>
<div data-role="footer" data-position="fixed"></div>
再设置一下data-fullscreen，开启全屏看片模式，让你撸出血
<div data-role="header" data-position="fixed" data-fullscreen="true"></div>
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>
导航栏/navbar
可以写在页眉中，也可以写在页脚中，不过我特么就没怎么看过谁会把导航栏写在页脚。
<div data-role="header">
<h1>header</h1>
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active ui-state-persist">你是狗</a></li>
<li><a href="#">你是狗</a></li>
<li><a href="#">你是狗</a></li>
</ul>
</div>
</div>
ui-btn-active代码如下
.ui-btn-active {
border: 1px solid #2373a5;
background: #5393c5;
font-weight:;
color: #fff;
cursor: pointer;
text-shadow: 0 1px 0 #3373a5;
text-decoration: none;
background-image: -webkit-gradient(linear,left top,left bottom,from(#5393c5),to(#6facd5));
background-image: -webkit-linear-gradient(#5393c5,#6facd5);
background-image: -moz-linear-gradient(#5393c5,#6facd5);
background-image: -ms-linear-gradient(#5393c5,#6facd5);
background-image: -o-linear-gradient(#5393c5,#6facd5);
background-image: linear-gradient(#5393c5,#6facd5);
font-family: Helvetica,Arial,sans-serif;
}
而ui-state-persist则是在JS中作用
// Buttons in the navbar with ui-state-persist class should regain their active state before page show
$navbar.closest( ".ui-page" ).bind( "pagebeforeshow", function() {
$navbtns.filter( ".ui-state-persist" ).addClass( $.mobile.activeBtnClass );
});
最后说一点，navbar中的a标签会自动转换成button，下文中提到的list也是如此。
可折叠的内容块Collapsible
内容块默认是折叠的
<div data-role="collapsible">
<h1>show</h1>
<p>content</p>
</div>
也可以改成展开的
<div data-role="collapsible" data-collapsed="false">
<h1>show</h1>
<p>content</p>
</div>
可以嵌套
<div data-role="collapsible">
<h1>show1</h1>
<p>content1</p>
<div data-role="collapsible">
<h1>show2</h1>
<p>content2</p>
</div>
</div>
还可以写成组合模式（组合模式下仅能打开一个内容块）
<div data-role="collapsible-set">
<div data-role="collapsible">
<h1>show1</h1>
<p>content1</p>
</div>
<div data-role="collapsible">
<h1>show2</h1>
<p>content2</p>
</div>
</div>
列表
列表视图/listview
<ul data-role="listview" data-inset="true">
<li><a href="#">item1</a></li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a></li>
</ul>
有时候你的列表需要分隔符，于是
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">seprator</li>
<li><a href="#">item1</a></li>
<li><a href="#">item2</a></li>
<li data-role="list-divider">seprator</li>
<li><a href="#">item3</a></li>
<li><a href="#">item4</a></li>
<li data-role="list-divider">seprator</li>
<li><a href="#">item5</a></li>
<li><a href="#">item6</a></li>
</ul>
有时候要像通讯录那样创建首字母大写的分隔符
<ul data-role="listview" data-inset="true" data-autodividers="true">
<li><a href="#">A</a></li>
<li><a href="#">G</a></li>
<li><a href="#">E</a></li>
<li><a href="#">Z</a></li>
<li><a href="#">W</a></li>
<li><a href="#">D</a></li>
</ul>
再来个搜索框，修改一下placeholder，更像我们平时用的手机应用了
<ul data-role="listview" data-inset="true" data-autodividers="true" data-filter="true" data-filter-placeholder="Search...">
<li><a href="#">A</a></li>
<li><a href="#">G</a></li>
<li><a href="#">E</a></li>
<li><a href="#">Z</a></li>
<li><a href="#">W</a></li>
<li><a href="#">D</a></li>
</ul>
加个计数泡沫，就像我们平时看到的邮箱页面那样
<ul data-role="listview" data-inset="true">
<li><a href="#">已发送<span class="ui-li-count">100</span></a></li>
<li><a href="#">收件箱<span class="ui-li-count">100</span></a></li>
<li><a href="#">垃圾箱<span class="ui-li-count">100</span></a></li>
</ul>
表单
表单必须要设置method和action
<form method="post" action="test.php">
</form>
表单内的元素必须要有唯一id，还要有一个label来匹配，注意label的for和input的id是对应的，不要搞成name了，特此区分开。
<form method="post" action="test.php">
<label for="testName">Name</label>
<input type="text" name="userName" id="testName" />
</form>
加上ui-hidden-accessible类可以隐藏label
<label for="testName" class="ui-hidden-accessible">Name</label>
域容器/fieldcontain，处理表单在宽屏上的显示，没什么卵用，不过我还是记一下，万一见鬼了呢！
<form method="post" action="test.php">
<div data-role="fieldcontain">
<label for="testName">Name</label>
<input type="text" name="userName" id="testName" />
<label for="testSex">Sex</label>
<input type="text" name="userSex" id="testSex" />
</div>
<input type="submit" data-inline="true" value="submit" />
</form>
接下来是各种表单组件，主要分为 输入/选择/滑块 三种组件类型。
单行文本输入之text
<label for="testName">Name</label>
<input type="text" name="userName" id="testName" />
单行文本输入之date
<label for="testDate">Name</label>
<input type="date" name="userDate" id="testDate" />
单行文本输入之email
<label for="testMail">Name</label>
<input type="email" name="userMail" id="testMail" />
多行文本/textarea
<label for="testContent">Name</label>
<textarea name="userContent" id="testContent" />
搜索框/search
<label for="mySearch">Search</label>
<input type="email" name="searchText" id="mySearch" />
单选/radio
首先你可以有一个包装的容器
<fieldset data-role="controlgroup">
</fieldset>
然后这个容器还可以有个标题
<fieldset data-role="controlgroup">
<legend>title</legend>
</fieldset>
最后把选项放进去,发现label是显示在input上的，不要把value理解成label，单选框的name值是一样的，不要搞混了。
<fieldset data-role="controlgroup">
<legend>Gender</legend>
<label for="male">男性</label>
<input type="radio" name="gender" id="male" value="male">
<label for="female">女性</label>
<input type="radio" name="gender" id="female" value="female">
</fieldset>
复选/checkbox 同理
<fieldset data-role="controlgroup">
<legend>Color</legend>
<label for="myRed">红色</label>
<input type="checkbox" name="color" id="myRed" value="reded">
<label for="myYellow">黄色</label>
<input type="checkbox" name="color" id="myYellow" value="yellow">
<label for="myBlue">蓝色</label>
<input type="checkbox" name="color" id="myBlue" value="blue">
<label for="myGreen">绿色</label>
<input type="checkbox" name="color" id="myGreen" value="green">
</fieldset>
下拉选择之select&option
<label for="day">日期</label>
<select name="myDay" id="day">
<option value="mon">星期一</option>
<option value="tue">星期二</option>
<option value="wed">星期三</option>
<option value="thu">星期四</option>
<option value="fri">星期五</option>
<option value="sat">星期六</option>
<option value="sun">星期日</option>
</select>
也可以像listview那样插入分隔符
<label for="day">日期</label>
<select name="myDay" id="day">
<optgroup id="weekdays">
<option value="mon">星期一</option>
<option value="tue">星期二</option>
<option value="wed">星期三</option>
<option value="thu">星期四</option>
<option value="fri">星期五</option>
</otpgroup>
<otpgroup id="weekends">
<option value="sat">星期六</option>
<option value="sun">星期日</option>
</otpgroup>
</select>
滑块之range
<label for="myVolume">Volume</label>
<input type="range" name="volume" id="myVolume" value="50" min="0" max="100" data-highlight="true">
滑块之slider
<select data-role="slider">
<option value="on" selected>On</option>
<option value="off">Off</option>
</select>
框架的组件是学不完的，学会如何封装组件的功能和样式才是最关键的，只有这样才能开发出属于自己，能让自己心仪/满意/得心应手/真正想要的组件。
jQuery Mobile基本UI组件的更多相关文章
- jquery mobile扁平化设计样式--Jquery mobile Flat UI介绍
jquery mobile扁平化设计样式--Jquery mobile Flat UI介绍 这几天开发的web app使用了jquery mobile,jquery mobile自带的样式比较适合做企 ...
- html5文章 -- 使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 基础
这篇文章是使用 jQuery Mobile 与 HTML5 开发 Web App 系列的第二篇,在本文以及接下来的数篇文章 Kayo 将会介绍 jQuery Mobile 的组件.事件响应以及可以调用 ...
- (转)Sencha Touch和jQuery Mobile的比较
原文:http://extjs.org.cn/node/664 Sencha Touch和jQuery Mobile的比较 Posted 周三, 08/07/2013 - 10:07 by admin ...
- Sencha Touch 和 jQuery Mobile 的比较
Sencha Touch 和 jQuery Mobile 的比较 英文原文:Sencha Touch vs jQuery Mobile 标签: Sencha Touch jQuery Mobile 1 ...
- Sencha Touch和jQuery Mobile的比较
第一组-行销和平台支持 Sencha Touch和jQuery Mobile都以HTML5框架著称.jQuery Mobile谦虚的说自己只是内建于所有流行的移动设备平台,而Sencha Touch则 ...
- JQuery Mobile实现手机新闻浏览器（2）
在上一篇文章中,已经讨论了程序的结构和页面的布局,并简单介绍了一些jQuery Mobile的使用技巧.在本篇文章中,笔者将继续完成我们web应用的新闻浏览器的设计. 程序的启动 我们现在来研究一下程 ...
- jquery mobile Checkbox动态添加刷新及事件绑定
jquery mobile Checkbox动态添加刷新及事件绑定 在微信项目中,涉及到一个多选功能.数据来自后台数据库,需要动态加载. 项目结构:微信api+web app.使用jquery mob ...
- HTML5+JS手机web开发之jQuery Mobile初涉
一.起始之语 我一直都是在PC上折腾网页的,这会儿怎么风向周边捣鼓起手机网页开发呢?原因是公司原先使用Java开发的产品,耗了不少人力财力,但是最后的效果却不怎么好.因为,Android系统一套东西, ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录
使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录 时间:2012年9月20日 分类:JavaScript 标签:HTML5‚ jQuery Mobile‚ Web ...
随机推荐
- 解决：Invalid character found in the request target.The valid characters are defined in RFC 7230 and RFC3986
目录 背景 原因分析 处理方法 参考 背景 在将tomcat升级到7.0.81版后,发现系统的有些功能不能使用了,查询日志发现是有些地址直接被tomcat认为存在不合法字符,返回HTTP 400错误响 ...
- 0330复利计算java版
package compounding; import java.util.Scanner; public class compounding1_1 { public static void main ...
- MAVEN pom.xml 解读
POM全称是Project Object Model,即项目对象模型.pom.xml是maven的项目描述文件,它类似与antx的project.xml文件.pom.xml文件以xml的 形式描述项 ...
- Additinal Dependencies和#pragma comment(lib,"*.lib")的分析
网上.一些书上也写道,这两种方式作用一样.其实仔细分析,它们两者还是有非常大的差异的. Additinal Dependencies和#pragma comment(lib,"*.lib& ...
- 详解免费高效实用的.NET操作Excel组件NPOI(转)
有时间研究一下NPOI http://www.cnblogs.com/pengze0902/p/6150070.html
- SPOJ4717——Grid Points in a Triangle
题目的意思很简单.就是要你求出斜率为a/b的一个点在原点,一条边为x=n的RT三角形里面有多少个整数点? 看完题目后依然没有思路,依然去看各个神牛写的题解.后来才反应过来. 题目的正解应该是这样的.递 ...
- Eclipse 保存代码时，不自动换行设置
Eclipse在保存代码时,总是自动换行.尤其是注释,换行后的注释读起来就很混乱.后来发现是在保存文件时设置了自动格式化代码的原因. 关闭自动格式代码设置: windows-->Preferen ...
- BZOJ4915 简单的数字题
不妨设a1<a2<a3<a4.显然第一问的答案是4,满足a1+a4=a2+a3,a1+a2|a3+a4,a1+a3|a2+a4.容易发现将其同时扩大k倍是仍然满足条件的,于是考虑gc ...
- 什么是P问题，NP问题和NPC问题
转载自:Matrix67的博客 什么是P问题.NP问题和NPC问题 这或许是众多OIer最大的误区之一. 你会经常看到网上出现“这怎么做,这不是NP问题吗”.“这个只有搜了,这已经被证明是NP问 ...
- 【刷题】BZOJ 2096 [Poi2010]Pilots
Description Tz又耍畸形了!!他要当飞行员,他拿到了一个飞行员测试难度序列,他设定了一个难度差的最大值,在序列中他想找到一个最长的子串,任意两个难度差不会超过他设定的最大值.耍畸形一个人是 ...