当前位置:首页 > 素材 > 网页特效 > 其他代码

GMU Download百度移动端组件库已经打包好的下载

时间:2015-01-28整理:网页图库 标签:

GMU Download百度移动端组件库已经打包好的下载

GMU Download百度移动端组件库已经打包好的下载

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

为了让移动端JS体积占用最小,GMU最大力度地拆分了各个组件。基础版本中只实现了能通用的部分,而其他可能通用的部分都是通过插件的形式来扩展!我们添加了很多插件来满足各种的需求。但是,并不是所有的插件都满足你的需求,所以我们要求使用者能够根据自己的实际需求,定制出一个最小的版本。

如何来定制?GMU的代码内部依赖非常多,一层依赖一层,非常不方便配置。所以我们为GMU组件量身定制了一套基于Grunt的代码合并工具,对于使用来说,只需要配置最终需要的js文件即可,其他依赖文件都会自动打包进来。

以下将详细介绍如何定制版本。

安装node.js。
安装git。window用户请安装msysgit, Linux/Mac用户请安装git命令行工具。
安装Grunt。npm install -g grunt-cli
git clone https://github.com/gmuteam/GMU.git克隆Git代码到当前目录,正常执行后,当前目录会多出来一个GMU目录。
进入GMU目录cd GMU
npm install, 安装node依赖。
grunt dist, 根据配置项,在dist目录中生成合并版本代码, dist/gmu.js, 对应的样式和图片资源也会生成在此目录下。

代码配置如下:

以下GMU中各个文件作用的详细说明。

Extend

文件大小 描述
1.27K

平台特性检测

0.94K

扩展转屏事件

1.28K

滚动停止事件

2.5K

实现了通用fix方法。

2.05K

实现了通用highlight方法。

6.02K

基于Zepto的图片延迟加载插件

31.33K

GMU定制版iscroll,基于iScroll 4.2.2, 去除zoom, pc兼容,snap, scrollbar等功能。同时把iscroll扩展到了Zepto的原型中。

3.55K

媒体查询

2.92K

修复Zepto中offset setter bug
比如 被定位元素满足以下条件时,会定位不正确

  1. 被定位元素不是第一个节点,且prev兄弟节点中有非absolute或者fixed定位的元素
  2. 被定位元素为非absolute或者fixed定位。

issue: https://github.com/gmuteam/GMU/issues/101

1.51K

模板解析

4.86K

基于Zepto的位置设置获取组件

1.54K

常用方法、属性支持性检测

3.99K

减少对方法、事件的执行频率,多次调用,在指定的时间内只会执行一次

3.57K

来自zepto/touch.js, zepto自1.0后,已不默认打包此文件。

Core

文件大小 描述
8.44K

Event相关, 给widget提供事件行为。也可以给其他对象提供事件行为。

2.68K

声明gmu命名空间

17.73K

gmu底层,定义了创建gmu组件的方法

Widgets

文件大小 描述
11.55K

图片轮播组件

1.66K

图片懒加载插件

6.45K

内容可动态修改插件
此插件扩充slider, 让内容可以动态修改,在这种模式下,dom个数跟items的个数无关,
永远是3个div轮换,对于图片集比较多的图片轮播,采用这种方式。

2.17K

自动播放插件

4.49K

图片轮播显示点功能

6.58K

图片轮播手指跟随插件

1.45K

图片自动适应功能

1.98K

图片轮播显示点功能

1.92K

图片轮播剪头按钮

9.22K

加载更多组件

4.1K

lite插件,上拉加载更多,利用原生滚动,不使用iscroll

5.35K

iScroll插件

9.43K

iOS5插件,适用于iOS5及以上

12.64K

搜索建议组件

1.45K

compatData

1.81K

iScroll插件,sug列表使用iScroll展示

5.33K

renderList

3.47K

sendRequest

2.16K

quickdelete插件

1.53K

位置自适应插件

12.37K

选项卡组件

3.91K

左右滑动手势插件

5.8K

ajax插件

9.62K

工具栏组件

0.73K

Toolbar fix插件

10.32K

进度条组件

6.86K

弹出层组件, 基础版本。

3.7K

简单版定位

1.75K

是否现实剪头

2.58K

碰撞检测,根据指定的容器,做最优位置显示

1.42K

是否点击其他区域,关闭自己

3.89K

附近弹出组件

0.52K

Dropmenu 支持水平排列插件

3.72K

Dropmenu 简单版定位

6.56K

返回顶部组件

2.45K

Gotop - iscroll插件

12.58K

弹出框组件

1.79K

Dialog - 父容器插件

6.77K

Button组件。

2.26K

Button input插件

19.11K

日历组件

8.02K

Calendar Picker插件

17.13K

历史记录组件

5.39K

导航栏组件

1.64K

当滚动到边缘的时候,自动把下一个滚出来

1.52K

平均分配按钮,根据传入的visibleCount, 来平均分配宽度, 此插件主要用来加强
scrollable, 如果内容不可滚,用纯样式就能实现这块。

1.71K

Navigator的可滚插件, 采用iScroll来实现。

12.98K

panel组件

5.65K

在iOS中将页面添加为桌面图标(不支持Android系统)

如何开始使用GMU?

一、 下载GMU组件
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);

文件大小:29.62 MB    下载方式:免费

其他代码下载最多

  • GMU Download百度移动端组件库已经打包好的下载
  • 瀑布流插件 jQuery代码 下载

其他代码最新更新

  • GMU Download百度移动端组件库已经打包好的下载
  • 瀑布流插件 jQuery代码 下载