百度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部分

首先看看部分 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之中所有的组件 ...

随机推荐

与你相遇好幸运，async解决循环回调问题
由于使用的sailsjs框架,用的是sailsjs自身带的ORm(就是waterline),ORM的默认数据库的返回值在回调里面. > arg是一个数组 count用来计数用 tmpArr临时存 ...
mipi和dsi
转自: http://blog.csdn.net/longxiaowu/article/details/24410021 一.MIPI MIPI(移动行业处理器接口)是Mobile Industry ...
重温WCF之构建一个简单的WCF（一）（1）通过控制台和IIS寄宿服务
一.理解什么是WCFWCF就是.NET平台下各种分布式技术的集成,并提供了一套统一的编程接口二.WCF的定义WCF(Windows Communication Foundation)是微软为构建面向 ...
Computer Graphics Research Software
Computer Graphics Research Software Helping you avoid re-inventing the wheel since 2009! Last update ...
Android ViewPager使用详解(转)
这是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包,里面包囊了只有在安卓3.0以上可以使用的api.而viewpager就是其中之一利用它,我们可以做很多事情,从最简单的导航,到页面菜单等等.那如 ...
tcflush 功能（转）
tcflush() 丢弃要写入引用的对象,但是尚未传输的数据,或者收到但是尚未读取的数据,取决于 queue_selector 的值: TCIFLUSH 刷新收到的数据但是不读 TCOFLUSH 刷新 ...
oc中定时器的基本使用
// 时间间隔调用的对象调用的方法用户信息是否循环 [NSTimer scheduledTimerWithTimeInterval: target:self selector:@select ...
sql篇，动态合并数据
背景: 为何说是一雪前耻呢,想当年,我还小,我出去面试远洋,远远地看着浩哥在那里坐着,然后下班去吃饭,我和东辉却在那里静静地等待着第二轮的技术面试(结果是没有面上,一个是学历问题),终于一个小个子姐姐 ...
T-SQL Transact-SQL 编程
T-SQL语句用于管理SQL Server数据库引擎实例,创建和管理数据库对象,以及查询.插入.修改和删除数据. Ø 变量 . 局部变量(Local Variable) 局部变量是用户可以自定义的变量 ...
UVA 11987 Almost Union-Find （并查集+删边）
开始给你n个集合,m种操作,初始集合:{1}, {2}, {3}, … , {n} 操作有三种: 1 xx1 yy1 : 合并xx1与yy1两个集合 2 xx1 yy1 :将xx1元素分离出来合到yy ...

百度mobile UI组件GMU demo学习1-结构和初始化

百度mobile UI组件GMU demo学习1-结构和初始化的更多相关文章

随机推荐

热门专题