WebComponents实例：移动UI组件库GMU介绍_Webapp开发_其他开发_移动开发

GMU（Global Mobile UI）是百度前端通用组开发的移动端组件库，具有代码体积小、简单、易用等特点，组件内部处理了很多移动端的bug，覆盖机型广，能大大减少开发交互型组件的工作量，非常适合移动端网站项目。

特点：

简单易用

jQuery UI 使用风格，链式调用

你只需要在页面上书写简单的html，就可以生成丰富易用的UI组件，原来webapp的开发可以变得如此简单！
轻量级

基于zepto的mobile UI组件库

GMU组件在轻量级的zepto上开发，组件根据功能再划分颗粒化的插件，css将骨架与皮肤拆解，你终于可以最小化按需加载啦！
文档丰富，自定义下载

丰富的文档，支持自定义下载

GMU API文档中详细描述各组件参数、事件、方法，每个组件的demo丰富易用。你可以从git上下载代码，也可以按需自定义下载

专业稳定

专业QA团队，多平台支持

百度专业QA团队持续跟进，上千自动化测试用例支持。开设论坛、QQ群等，支持iOS4+ / android2.1+, 支持默认/UC/QQ/Chrome等浏览器
丰富实用UI组件

基于移动端交互的丰富易用UI组件

GMU组件包括suggestion, dialog, navigator, tabs, toolbar等14个通用组件，支持iOS4+， android2.1+，让你的移动开发不再是难题
开源免费

完全开源免费

开源基于BSD协议，支持商业和非商业用户的免费使用和任意修改。

GMU官网：http://gmu.baidu.com/

GMU Github：https://github.com/gmuteam/GMU

如何开始使用GMU？

一、下载GMU组件

可以自定义下载，也可以从github上下载

1、自定义组件压缩包，分为以下几个部分：

（1）Zepto扩展。此部分对Zepto做了扩展，按自己的需要勾选，组件依赖的部分在勾选组件时，会自动选择。

（2）UI基类。此部分不需要关心，勾选组件时，UI基类会自动选择。

（3）GMU组件及css。可以选择自己需要使用的组件及相关的插件，如果组件样式中带有图片，可选择是否使用base64格式的图片，下载时可以选择是否压缩和是否合并成一个js文件。样式包括骨干样式和皮肤css，可以根据需要选择theme

2、将下载的压缩包解压后，有两个文件夹：css和js，css内包含各个组件的样式表文件，js文件夹内包含Zepto库、扩展、组件的js文件。

二、 GMU的demo结构

点击这里查看GMU demo效果（在移动设备上查看或者用chrome切换user agent模拟移动设备，并打开Emulate touch events选项效果更佳），页面demo中部分css及js是demo展示效果所用，只需关系如下四部分：

1、【组件依赖css】

这部分css是组件所依赖的样式，在使用组件时必须加载，组件皮肤可以选择加载，默认皮肤是default

< !--组件依赖css begin--> 
    < link rel="stylesheet" type="text/css" href="../../../assets/widget/gotop/gotop.css"/> 
< !--组件依赖css end-->

2、【组件依赖js】

这部分js是组件js文件及依赖js文件，在使用组件时必须加载。（以下列出的文件路劲仅供参考）

< !--组件依赖js begin--> 
        < script type="text/javascript" src="../../../_src/dist/zepto.js"> 
        < script type="text/javascript" src="../../../_src/extend/fix.js"> 
        < script type="text/javascript" src="../../../_src/core/gmu.js"> 
        < script type="text/javascript" src="../../../_src/core/event.js"> 
        < script type="text/javascript" src="../../../_src/core/widget.js"> 
        < script type="text/javascript" src="../../../_src/widget/gotop.js"> 
< !--组件依赖js end-->

3、【页面body主体html】

这部分是页面的html主体，一些与创建demo实例有关，一部分仅是用来填充页面，如gotop组组件只用关心:

< div id="gotop">< /div>

4、【创建组件实例的script】

这部分js代码用来创建组件实例，在你自己的demo中可以仿照着写。

< script> 
        //创建组件 
        $('#gotop').gotop(); 
</script>

还有一部分css和js，如demo展示的css，及加载demo页面切换的公共头部的js等都不用关心

三、创建自己的Demo

1、将GMU的css和js文件复制到自己的项目文件夹内

2、在demo页面的顶部把相关css文件、依赖js文件、组件js文件引入，如:

< head> 
        < link rel="css/gotop.css" /> 
        < script src="js/zepto.js">< /script> 
        < script src="js/gmu.js">< /script> 
        < script src="js/gotop.js">< /script> 
< /head>

3、在页面上添加相应的html结构（若需要），如：

< div id="gotop">< /div>

4、创建组件实例：

$("#gotop").gotop();

至此，就成功创建了一个GMU组件。

四、 GMU组件的创建方式

1、 setup方式

$("#id").gotop([option]);

setup方式即为组件所需的html结构（部分html，每个组件所需要的基本html参见API文档）写在页面中，通过zepto选择器选择元素后初始化组件，类似jQuery UI的使用方式。返回值为Zepto元素，支持链式调用，调用组件的方法可以采用$('#id').gotop('method', 'parameters')这种方式，每个组件详细使用方法，见API文档。

2、 render方式

new gmu.Gotop([[node,] option]);

render方式即为通过js创建页面所需要的html结构，在初始化时将组件所需要的参数（每个组件所需要参数见API文档）传入即可。使用这种方式有2个可选参数，node为#id 或者Zepto元素，option为创建组件的JSON格式配置参数，如{useFix：true}，返回值为组件实例，调用组件方式，直接通过instance.method(param)方式传入即可。

五、 GMU的文件结构

GMU整体分为4个部分：

1、Zepto扩展。

2、UI基类。

3、组件和组件扩展。组件的主文件提供了常用和基本的功能（如gotop.js）,其他个性化的功能以插件的形式提供（如gotop/$iscroll.js）,当需要使用插件中的功能时，需要同时引用主文件；

4、css样式。组件的样式表与组件同名（如gotop组件的样式表为gotop.css）,某些组件拆分出了骨干样式和皮肤样式，皮肤样式名称为: 组件名.XXX.css，默认样式为: 组件名.default.css，（如toolbar组件的默认样式文件为 toolbar.default.css,需要同时引用toolbar.css）；

【编辑推荐】

【责

查看更多关于【Webapp开发】的文章

展开全文