百度mobile UI组件GMU demo学习1-结构和初始化
移动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 文件结构
<!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 里面的代码
$(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，我猜测是填充完内容后会出现滚动条，所以加了这个操作
第二小段代码，是存储的和图片延迟加载相关的数据
$(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小段代码很长，分成一小段一小段的来看
//获取页面的两个部件
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 = '';
});
下面一小段代码
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？
在看下一小段代码
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-结构和初始化的更多相关文章
- [转载]前端——实用UI组件库
https://www.cnblogs.com/xuepei/p/7920888.html Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https:/ ...
- 【转】前端——实用UI组件库
Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https://valor-software.com/ngx-bootstrap/#/ github: h ...
- 前端——实用UI组件库
Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https://valor-software.com/ngx-bootstrap/#/ github: h ...
- 开始学习Angular Mobile UI
介绍 Mobile AngularUI 可以让你使用Twitter Booostrap和Angular JS来开发混合移动App和桌面应用程序. 下面是是一些贯穿整个项目的步骤,我强烈的建议你去继续阅 ...
- 【分享】Vue 资源典藏（UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例）
Vue 资源典藏,包括:UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和 ...
- Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例
Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 ...
- 学习通过Thread+Handler实现非UI线程更新UI组件
[Android线程机制] 出于性能考虑,Android的UI操作并不是线程安全的,这就意味着如果有多个线程并发操作UI组件,可能导致线程安全问题.为了解决这个问题,Android制定了一条简单的规则 ...
- 小波说雨燕 第三季 构建 swift UI 之 UI组件集－视图集（六）Picker View视图 学习笔记
想对PickerView进行操作,只能在代码中操作. 下面 ,再添加三个label组件,然后将所有组件配置到代码中(看代码),然后要实现对PickerView的操作,就要实现它的DataSource协 ...
- Android UI组件学习
android.view.View类是全部UI组件的父类. 如果一些属性的内容本类找不到的时候一定要到父类之中进行查找. 所谓的学习组件的过程就是一个文档的查找过程. ※ Android之中所有的组件 ...
随机推荐
- Android4.4 以太网和DHCP启动过程介绍
转自:http://blog.csdn.net/wlwl0071986/article/details/51451843 Android4.4已经加入了以太网的支持.现在对以太网的初始化流程.网络策略 ...
- Python 打包程序判断是否已经运行
代码如下: # -*- coding: UTF8 -*- from win32com.client import Dispatch import win32com import sys, os fro ...
- 使用python递归子目录处理日志文件
重要说明: (1)python使用4个空格进行层次缩进的(不是tab),在eclipse里面可以直接使用tab缩进,是因为eclipse会实时地将tab转成4个空格 (2)在eclipse中安装pyD ...
- Linux LVM全面实践
1.磁盘分区 [root@ol6-121-rac1 ~]# fdisk /dev/sdb Device contains neither a valid DOS partition table, no ...
- Power BI中的QA功能预览
微软在休斯敦的全球合作伙伴大会上发布了Power BI for Office 365,通过Excel和Office 365中的自服务式商业智能解决方案为信息工作者提供了数据分析以及可视化功能以帮助他们 ...
- 2015最新移动App设计尺寸视觉规范【图文版】(转)
如今手机app的屏幕设计尺寸参差不齐,仿佛来到了移动界面尺寸战国时代,每家移动设备制造公司都为了迎合大众的口味,各家都在2014年大放光彩.2015年也将会是我们移动APP设计界快速发展的一年. 因为 ...
- Android的图片缓存ImageCache（转）
为什么要做缓存? 在UI界面加载一张图片时很简单,然而如果需要加载多张较大的图像,事情就会变得更加复杂.在许多情况下(如ListView.GridView或ViewPager等的组件),屏 ...
- 在Salesforce中进行Report和Dashboard的配置
用Report和Dashboard去图形化比较不同Object的信息是一个十分普遍的需求,当然我们可以完全用Visual Page和Classes去自定义对应的Report和Dashboard的功能. ...
- Codeforces Round #174 (Div. 1) B. Cow Program(dp + 记忆化)
题目链接:http://codeforces.com/contest/283/problem/B 思路: dp[now][flag]表示现在在位置now,flag表示是接下来要做的步骤,然后根据题意记 ...
- Linux内核创建一个新进程的过程
“平安的祝福 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 ” 进程在 ...