您的位置：首页 > Web前端 > JQuery

jQuery Mobile 框架相关学习笔记（二）【UI篇】！

2013-04-16 13:24 471 查看
关于UI组件是比较关键的，它的掌握程度是以后真正项目开发中所要用到的实际实例。UI组件熟悉的好，为后面项目开发是必备的条件，增加开发效率，以及各种疑惑，我个人认为，UI都是单一的，一个个学习是很简单的，组合起来达到一个工作流是比较难的，也就是说单个使用开发都会，组合起来也要会，常常听朋友说，这个类、那个控件都会用，但是用在一起就出问题，解决不了，所以说把单个学好才能为以后整合项目开发才是真正有用的！


不废话了开整！

1、关于前一学习笔记 jQuery Mobile 框架相关学习笔记（一）【开发环境篇】！ 我补充一下一些东西，就是关于一些主题的使用。

jQM也采用的是自定义标签来使整个文档进行JavaScript的渲染解析，也称为“格式化”！ 看下面的代码片段：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>jQuery Mobile 模版</title>
<link rel="stylesheet" href="./jMobile/jquery.mobile-1.3.1.min.css" />
<script src="./jMobile/jquery-1.9.1.min.js"></script>
<script src="./jMobile/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
	<div id="home" data-role="page" data-theme="b">
		<div data-role="header" data-position="fixed">
			<h1>jQM模版页面</h1>
		</div>
		<div data-role="content">
		<p>请选择：</p>
			<a href="#help" data-role="button">按钮</a>
		</div>
		<div data-role="footer" data-position="fixed">
			<h4>Copyright © 2001-2013 Kvkens</h4>
		</div>
	</div>
</body>
</html>


相关效果：


1角色：jQM的主题使用是通过设置page的data-theme="a" 自带的为 a,b,c,d,e五种。关于主题自定义***本文不讲解！

可以看出，jQM所有设置是通过自定义方式编写，data-*的方式，data-role 是设置当前是什么角色类型，主要的角色有：

role描述
page

定义一个页面用于显示内容

header

页面的头部

content

页面的内容

footer

页面的脚部
navbar定义一个导航条、一般位于header中
button渲染为一个可视化的按钮
controlgroup渲染一个群组组件
collapsible页面中可折叠的组件
collapsible-set一组可车谍的组件（手风琴菜单accordion）
fieldcontain用于表单域的容器
listview由多项内容组成的列表
dialog模态对话框
slider用于布尔值可视化滑块
nojs在兼容jQM的浏览器会被隐藏的元素
以上几种就是data-role的一些值，也是以后我们要使用的组件名，类似EXT的xtype:'button'。



2主题: 是由data-theme来完成的，常见jQM自带的有以下几种：【a】【b】【c】【d】【e】。官方自带主题***

用于页面定位的有data-pisition="fixed"这样页面就会固定在屏幕下方！使页面全屏化 data-fullscreen="true"

用JS脚本执行的是

$.mobile.touchOverflowEnable = true


UI组件之工具栏toolbar

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>jQuery Mobile 模版</title>
<link rel="stylesheet" href="./jMobile/jquery.mobile-1.3.1.min.css" />
<script src="./jMobile/jquery-1.9.1.min.js"></script>
<script src="./jMobile/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
	<div id="home" data-role="page" data-theme="b">
		<div data-role="header" data-position="fixed" data-theme="e">
		<a href="#home" data-role="button" data-icon="home">首页</a>
			<h1>京东商城</h1>
		<a href="#help" data-role="button" data-icon="search">帮助</a>
		</div>
		<div data-role="content">
		<p>请选择：</p>
			<a href="#help" data-role="button">按钮</a>
		</div>
		<div data-role="footer" data-position="fixed">
			<h4>Copyright © 2001-2013 Kvkens</h4>
		</div>
	</div>
</body>
</html>




这是一个简单的工具栏，这个习惯设计是来自iOS，因为iOS没有实体返回键，不像android有返回键。所以iOS设计都在工具栏和标题一起的。

UI组件之导航栏navbar

<div id="home" data-role="page" data-theme="b">
		<div data-role="header" data-position="fixed" data-theme="e">
		<a href="#home" data-role="button" data-icon="home">首页</a>
			<h1>京东商城</h1>
		<a href="#help" data-role="button" data-icon="search">帮助</a>
		</div>
		<div data-role="content">
		<div data-role="navbar">
			<ul>
				<li><a href="#link1">选项1</a></li>
				<li><a href="#link2">选项2</a></li>
				<li><a href="#link3">选项3</a></li>
				<li><a href="#link4">选项4</a></li>
			</ul>
		</div>
		</div>
		<div data-role="footer" data-position="fixed">
			<h4>Copyright © 2001-2013 Kvkens</h4>
		</div>
	</div>




<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>测试程式</title>
<link rel="stylesheet" href="./jMobile/jquery.mobile-1.3.1.min.css" />
<script src="./jMobile/jquery-1.9.1.min.js"></script>
<script src="./jMobile/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
	<div id="home" data-role="page" data-fullscreen="false"  data-theme="b">
		<div data-role="header" data-position="fixed" data-theme="b">
			<a href="settings" data-icon="home">主 页</a>
			<h1>商品参数</h1>
			<a href="logout.aspx" data-icon="check">确 认</a>
		</div>
		<div data-role="content">
		<div data-role="collapsible-set">
				<div data-role="collapsible" data-collapsed="false">
					<h2>北京发现1名4岁男童携带H7N9病毒</h2>
		<section class="ui-grid-a">
			<div class="ui-block-a">
				<p>[北京7岁女童病情好转 改为病重] [H7N9北上符合规律 北方升温病毒宜存活]
		湖北襄阳酒店火灾已致14人死亡47人受伤</p>
			</div>
			<div class="ui-block-b">
				<p>[湖北襄阳消防回应未带云梯：现场实际到场2台] [警方以失火罪立案]
		金正恩参谒锦绣山太阳宫 两周来首次露面
		[或展示新型导弹 谴责韩对话提议] [朝发布模拟核打击美国视频]
		查韦斯“亲密战友”马杜罗赢得委内瑞拉大选</p>
			</div>
			
		</section>
		
				</div>
				
				<div data-role="collapsible">
				<h2>周董</h2>
				<p><center><img alt="" src="./images/jay2.jpg" style="width: 240px;height:350px"></center></p>
				</div>
				<div data-role="collapsible">
				<h2>测试单元</h2>
				<p>
				<div data-role="controlgroup" data-type="horizontal">
					<a href="#help" data-role="button" data-inline="true">按钮1</a>
					<a href="#help" data-role="button" data-inline="true">按钮2</a>
					<a href="#help" data-role="button" data-inline="true">按钮3</a>
				</div>	
				</p>
				</div>
			</div>
		</div>
		<div data-role="footer" data-position="fixed"  data-id="main" data-theme="b">
			<div data-role="navbar">
				<ul>
					<li><a data-icon="home" class="ui-btn-active ui-state-persist">简单</a></li>
					<li><a href="#help" data-icon="search" data-transition="fade">详细</a></li>
				</ul>
			</div>
		</div>
	</div>
	
	
	
	<div id="help" data-role="page" data-fullscreen="false"  data-theme="b">
		<div data-role="header" data-position="fixed" data-theme="b">
			<a href="settings" data-icon="home">主 页</a>
			<h1>商品参数2</h1>
			<a href="logout.aspx" data-icon="check">确 认</a>
		</div>
		<div data-role="content">
			《周杰伦 Jay Chou:杰伦十代10周年珍藏版 Jay Chou Ultimate Collection》十年前，每天睡在录音室创作的小伙子周杰伦，创造了一个超乎想象的音乐世界，在那里可以变成半兽人、肖邦、牛仔、魔术师；可以唱外婆的故事、喝爷爷的茶、听妈妈的话；可以唱温馨励志、简单情歌、成课堂教材的中国风，在那里音乐可以飞越想象、横越古今时空；之后，他跨界成为MV导演、电影导演、电影演员；开演唱会、拍广告；在不同的领域，不断变身，不用替身，全力以赴，超时用脑、超时工作；在外界看似刀枪不入的超人外衣下，他用超乎常人好几倍的努力专注投入他的工作，虽然出道十年了，他的个性跟刚出道时一样，常常像小孩子一样想法很天真，用力将脑袋里的创意变成真的；不需要崇拜，只希望音乐不朽，踏出每个下一步时，都希望能跨越自己，创新时代！
			耳塞式立体声耳机： 
MODEL: MDR-E818LPC3(E)
4大特点
*采用可提高音质的SONY声学双涡轮电路
*推荐用于MP3播放器
*16毫米驱动单元
*1米长耳机线

2000～2010华语乐坛年度全亚洲销售第一专辑，超过百首周杰伦流行创作金曲十张专辑一次收藏！

2011年1月杰威尔音乐、索尼音乐娱乐特别企划推出《杰伦十代 10周年珍藏版》10CD珍藏套装，收录2000~2010年10张创作专辑：杰伦、范特西、八度空间、叶惠美、七里香、11月的萧邦、依然范特西、我很忙、魔杰座、跨时代等，完整记录周杰伦一年一张的年度代表作，《杰伦十代 10周年珍藏版》每个专辑均采全新统一规格包装设计，十张专辑并以精致硬外纸盒收集成套。于全球唯一首次正版发行，让喜爱杰伦音乐的歌迷能真的拥有正版音乐的保证。特别企划：《杰伦十代 10周年珍藏版》10CD珍藏套装内附独家赠品：SONY原厂耳塞式立体声耳机1副，享受更佳音质围绕。
		</div>
		<div data-role="footer" data-position="fixed"  data-id="main" data-theme="b">
			<div data-role="navbar">
				<ul>
					<li><a href="#home" data-icon="home" data-transition="fade">简单</a></li>
					<li><a data-icon="search" class="ui-btn-active ui-state-persist">详细</a></li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>




UI组件之列表listview

关于列表的data-role是“listview”，非常简单。Code：
<ul data-role="listview" data-filter="true" data-filter-placeholder="请输入查询">
					<li><a href="jd.htmlf">尼康（Nikon）</a>
					<span class="ui-li-count">14999</span>
					<li><a href="jd.htmlf">Blue</a>
					<span class="ui-li-count">234</span>
					<li><a href="jd.htmlf">Red</a>
					<span class="ui-li-count">33</span>
					<li><a href="jd.htmlf">Redmoon</a>
					<span class="ui-li-count">14999</span>
					<li><a href="#regform">Administrator</a>
					<span class="ui-li-count">14999</span>
				</ul>




还有一种是那种iOS那种分组显示的。

<div id="group" data-role="page">
		<div data-role="content">
			<div data-role="fieldcontainer">
				<ul data-role="listview">
					<li data-role="list-divider">数码产品
					<li><a href="">MacBook Air</a>
					<li><a href="">iPod touch</a>
					<li><a href="">Nikon D600</a>
					<li data-role="list-divider">家用电器
					<li><a href="">平板电视</a>
					<li><a href="">洗衣机</a>
					<li><a href="">冰箱</a>
				</ul>
			</div>
		</div>
	</div>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航