这个博客已经过去了很久……

不过,你可以通过以下方式找到我

现在的位置: 首页 > 谈前端 > JavaScript > 正文
基于zepto的mobile UI的组件 GMU
2014年03月11日 JavaScript ⁄ 共 2889字 等你评论

GMU API 文档

GMU是基于zepto的轻量级mobile UI组件库,符合jquery ui使用规范,提供webapp、pad端简单易用的UI组件。为了减小代码量,提高性能,组件再插件化,兼容iOS3+ / android2.1+,支持国内主流移动端浏览器,如safari, chrome, UC, qq等。 GMU由百度GMU小组开发,基于开源BSD协议,支持商业和非商业用户的免费使用和任意修改,您可以通过get started快速了解。

Quick Start

历史版本

2.0.5


如何开始使用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文件包括四部分:
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);

移动端相关JS框架推荐:

Zepto.js    jquerymobile    sencha    winktoolkit    Xui.js    Kissy Mini
GMU

友荐云推荐
×