关于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 = trueUI组件之工具栏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>
扫一扫
1318
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
