WebComponents实例:移动UI组件库GMU介绍

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

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

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

2、【组件依赖js】

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

  1. < !--组件依赖js begin--> 
  2.         < script type="text/javascript" src="../../../_src/dist/zepto.js"> 
  3.         < script type="text/javascript" src="../../../_src/extend/fix.js"> 
  4.         < script type="text/javascript" src="../../../_src/core/gmu.js"> 
  5.         < script type="text/javascript" src="../../../_src/core/event.js"> 
  6.         < script type="text/javascript" src="../../../_src/core/widget.js"> 
  7.         < script type="text/javascript" src="../../../_src/widget/gotop.js"> 
  8. < !--组件依赖js end--> 

3、【页面body主体html】

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

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

4、【创建组件实例的script

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

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

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

三、 创建自己的Demo

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

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

  1. < head> 
  2.         < link rel="css/gotop.css" /> 
  3.         < script src="js/zepto.js">< /script> 
  4.         < script src="js/gmu.js">< /script> 
  5.         < script src="js/gotop.js">< /script> 
  6. < /head> 

3、 在页面上添加相应的html结构(若需要), 如:

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

4、 创建组件实例:

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

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

四、 GMU组件的创建方式

1、 setup方式

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

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

2、 render方式

  1. 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);

【编辑推荐】

【责
 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • Handlebars模板引擎介绍和开发指南
    Handlebars是一个Javascript模板引擎,能让你轻松高效的编写语义化模板,它是Mustache模板引擎的一个扩展,Handlebars和Mustache都是弱逻辑的模板引擎,能将Web前端的视图和代码分离,降低两者之间耦合。
    06-26
  • KendoUI2014移动调查报告:HTML5vs原生之辩
    KendoUI2014移动调查报告:HTML5vs原生之辩
    Telerik Kendo UI一直比较关心移动开发领域的使用情况,在最新的2014 HTML5全球开发者调查中,Kendo UI面向3500+个开发者,从普通程序员到CIO/CTO,从大型企业到小型企业,对他们的移动开发偏好展开了调查。
    06-26
  • WebComponents-面向未来的组件标准
    WebComponents-面向未来的组件标准
    对于前端开发者而言,W3C组织制定的HTML标准以及浏览器厂商的实现都是“鱼”而 不是“渔”,开发者在需求无法满足的情况下通过现有技术创造了各种组件,虽然短期满足了需求但是由于严重缺乏标准,导致同一个组件有成千上万的相似实现但 它们却无法相互重用,这很大程度上制约了组件化的最大价值-重用,Web Components则在组件标准化方面向前迈了一大步。
    06-26
  • AppCan:HybridApp技术已经成熟
    AppCan:HybridApp技术已经成熟
    在移动开发技术里,Native App和Web App之争一直没有停息,而介于Native和Web之间的Hybrid混合App异军突起,以其接近Web App开发简单、跨平台能力,以及接近Native App功能和性能表现逐渐为开发者们所接受,那么,现在Hybrid App发展到了什么程度呢?正益无线技术支持总监邱革节在接受51CTO记者采访时表示,Hybrid App技术已经成熟。
    06-26
  • 什么是ShadowDom?
    什么是ShadowDom?
    如果我需要把每个自定义的按钮都放到iframe里,你是什么感觉,会不会疯掉?所以,我们需要一些更好的东西。事实上,大部分的浏览器已经变相地提供了一种强大技术去隐藏一些实现细节。这个技术就是所谓的“shadow DOM”。
    06-26
  • 使用ShadowDOM创建Web组件
    使用ShadowDOM创建Web组件
    Web Components(组件)标准是一系列最新推出的标准,它可以被用来创建可被复用的Web部件,当页面中所使用的Web部件被更新为新版本时不必修改 页面中其他任何代码。这里所说的部件,是一种可实现与用户之间的交互的可视化组件,开发者可以使用HTML代码与JavaScript脚本代码来开发这些 部件。Web Componnts标准定义如何开发这些部件。
    06-26
  • GooglePolymer以及WebUI框架的未来
    开发者Axel Rauschmayer在自己的博客上详解了Google Polymer的设计理念与组成架构,深得Polymer开发者的认同。他认为Polymer这样高互操作性的设计才应该是Web开发的未来。
    06-26
  • 移动应用新趋势:离线WebApp
    移动业界已经最终放弃了不分时间、不分地点为用户提供互联网连接服务的幻想。我们也看到了一系列新型产品与服务,它们的兴起标志着我们将以更为灵活的方式在无法接入网络时继续享受功能与便利。
    06-26
  • 2014年Web开发的7个转变方向
    2014年Web开发的7个转变方向
    很多读者喜欢预测网页设计趋势,让自己能够在网页设计、甚至网络发展中保持先机。找准每一年的发展趋势很重要。那么,2014年会有怎样的发展?我们一起来分析。
    06-26
  • 移动WebApp开发必备知识
    移动WebApp开发必备知识
    移动设备的用户越来越多,每天android手机的激活量都已经超过130万台,所以我们面向移动终端的WebAPP也开始跟进了。本文主要介绍webapp的开发与调试的相关知识和经验,以及给出几种可选的解决方案。
    06-26