移动web现在已经是zepto的天下，但是一直找不到合适UI库，找了一段时间，终于找到了百度的ui库gum和inter 的 appframework UI库
相比之下，百度的UI库更接地气，配合百度强大的用户群，在各种山寨机和山寨浏览器上也可以取得不错的体验，最近终于有时间学习下这个ui库希望等一步一步进入移动web开发领域。
这是在线的api http://gmu.baidu.com/doc/
这是Github 地址 https://github.com/gmuteam/GMU
下载下来后 项目结构如下
在运行了基本的npm install和grunt dist 后就可以打开demo查看效果了
在线demo 地址 http://gmu.baidu.com/demo/ 手机扫描二维码即可打开
GUM 是基于 zepto 增加了 zepto的一些扩展 然后在写的ui 库，so 学习GUM 要实现
1 zepto 的灵活使用
2zepto的扩展是如何写的
3如何基于GUM写自己的ui控件，
首先看看demo 的index 文件结构
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30 |
<!doctype html><html> <head> <meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <meta charset="utf-8"> <title>GMU Demos</title> <link rel="stylesheet"
type="text/css"
href="../assets/reset.css"
/> <link rel="stylesheet"
type="text/css"
href="./assets/demo.css"
/> <script type="text/javascript"
src="../dist/zepto.js"></script> <script type="text/javascript"
src="../src/extend/highlight.js"></script> <script type="text/javascript"
src="./assets/app.js"></script> <script type="text/javascript"
src="./assets/widgets.js"></script> <script type="text/javascript"
src="./assets/demos.js"></script> <script type="text/javascript"
src="./assets/iscroll.js"></script> </head> <body> <div class="pages"> <section id="S_widgets"
class="__page__ widget_page"> <div id="scroller1"> <h3>Widgets</h3> </div> </section> <section id="S_demos"
class="__page__ demo_page"> <div id="scroller2"> <h3><a class="btn_back"></a><span>Demos</span></h3> </div> </section> </div> </body></html> |
首先看demo引用的js部分
<script type="text/javascript"
src="../dist/zepto.js"></script> 最基础的 zepto.js库
<script type="text/javascript"
src="../src/extend/highlight.js"></script> 对zepto.js进行拓展的js
<script type="text/javascript"
src="./assets/app.js"></script> 这个demo主要的初始化js
<script type="text/javascript"
src="./assets/widgets.js"></script> 这个demo 首页主要数据结构
<script type="text/javascript"
src="./assets/demos.js"></script>这个demo首页数据结构对应的具体内容
<script type="text/javascript"
src="./assets/iscroll.js"></script>iscroll 插件
ps:我还没了解过这个插件，今年得了解下，否则就太OUT了
首先看看部分 widgets.js 的内容, 里面存储了首页列表的每一项的KEY 、简介、和图片，作为数据源
在看看demo.js 里面存储的数据，里面主要存储了每一项对应的url地址和title。
一段一段的来看app.js 里面的代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 |
$(function(){ var
html = ‘<ul id="J_widgetList">‘; for(var
i in
widgets){ html += ‘<li><a href="‘
+ i +‘"><img src="./assets/img/‘
+ widgets[i][‘icon‘] + ‘" alt="‘
+ widgets[i][‘name‘] + ‘">‘
+ ‘<span class="title">‘
+ widgets[i][‘name‘] + ‘</span><span class="desc">‘
+ widgets[i][‘description‘] + ‘</span></a></li>‘; } html += ‘</ul>‘; $(‘#scroller1 ul‘).remove(); $(‘#scroller1‘).append(html); // $(‘.pages‘).height($(‘#J_widgetList‘).height()); setTimeout(function(){ new
iScroll(‘S_widgets‘); $(window).trigger(‘resize‘); }, 200);}); |
这段代码主要完了这几件事情
1页面加载的时候执行数据初始化，读取存储在widgets里面的数据，拼接字符串，填满第一页的版面，至
2于为什么要在setTimeout里面执行回调函数调整Scroll，我猜测是填充完内容后会出现滚动条，所以加了这个操作
第二小段代码，是存储的和图片延迟加载相关的数据
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 |
$(function(){ demos.imglazyload = [ { file: ‘../extend/imglazyload/imglazyload.html‘, title: ‘图片延迟加载‘ },{ file: ‘../extend/imglazyload/imglazyload_addimg.html‘, title: ‘点击加载图片‘ } ,{ file: ‘../extend/imglazyload/imglazyload_error.html‘, title: ‘图片加载错误处理‘ },{ file: ‘../extend/imglazyload/imglazyload_iscroll.html‘, title: ‘iScroll中使用图片延迟加载‘ } ];}); |
第3小段代码很长，分成一小段一小段的来看
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 |
//获取页面的两个部件var widgetSection = $(‘#S_widgets‘).show(), demoSection = $(‘#S_demos‘);// $(‘.pages‘).css(‘overflow‘, ‘hidden‘); demoSection.css(‘-webkit-transform‘, ‘translateX(100%)‘);$(‘.__page__‘).css(‘-webkit-transition‘, ‘all .3s ease-in-out‘); //列表中每个连接绑定事件$(‘#S_widgets a‘).click(function(e){ var
widgetName = $(this).attr(‘href‘); location.hash = widgetName; e.preventDefault();}); //返回按钮绑定切换事件$(‘.btn_back‘).click(function(){ widgetSection.css(‘-webkit-transform‘, ‘translateX(0)‘); demoSection.css(‘-webkit-transform‘, ‘translateX(100%)‘); location.hash = ‘‘;}); |
下面一小段代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 |
var updateDemoSection = function(widget){ var
demolist = demos[widget], html = ‘<ul id="J_demoList">‘; demolist.forEach(function(item, index){ html += ‘<li><a href="./widget/‘
+ item.file + ‘">‘
+ item.title + ‘</a></li>‘; }); html += ‘</ul>‘; $(‘#scroller2 ul‘).remove(); $(‘#scroller2‘).append(html); $(‘#scroller2 h3 span‘).html(widget + ‘ Demos‘); new
iScroll(‘S_demos‘); } |
这段代码的参数是一个widget的名称，然后在demos里面找相关的数据，最后拼接好字符串，填充页面，填充完页面初始化iScroll，没弄明白每次都要初始化iScroll？
在看下一小段代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 |
var updatePage = function(){ var
widgetName = location.hash.replace(‘#‘, ‘‘); if(widgetName === ‘‘
|| !demos[widgetName]){ widgetSection.css(‘-webkit-transform‘, ‘translateX(0)‘); demoSection.css(‘-webkit-transform‘, ‘translateX(100%)‘); }else{ updateDemoSection(widgetName); widgetSection.css(‘-webkit-transform‘, ‘translateX(-100%)‘); demoSection.show(); window.scrollTo(0, 0); setTimeout(function(){ demoSection.css(‘-webkit-transform‘, ‘translateX(0)‘); }, 0); }}window.onhashchange = function(e){ updatePage();}updatePage(); |
这里的window.onhashchange 事件是url变化例如url后面#abc变为#123会触发这个事件，我也是第一次见这个事件，以前没用过
每当url描点变化的时候会触发updatePage，updatePage 主要是根据不同描点名称更新页面
如果widgetName 为空，或不在demos里面则切换到首页，
如果demos包含widgetName，则执行updateDemoSection(widgetName);进行页面更新
百度mobile UI组件GMU demo学习1-结构和初始化,布布扣,bubuko.com
百度mobile UI组件GMU demo学习1-结构和初始化
原文：http://www.cnblogs.com/qqloving/p/3575072.html