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

2024-01-15 08:59

本文主要是介绍百度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

下载下来后 项目结构如下

image

在运行了基本的npm install和grunt dist 后就可以打开demo查看效果了

在线demo 地址 http://gmu.baidu.com/demo/   手机扫描二维码即可打开

liantu

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

  <script type="text/javascript" src="../dist/zepto.js"></script>   最基础的 zepto.js库
        <script type="text/javascript" src="../src/extend/highlight.js"></script> 对zepto.js进行拓展的js
        <script type="text/javascript" src="./assets/app.js"></script> 这个demo主要的初始化js
        <script type="text/javascript" src="./assets/widgets.js"></script> 这个demo 首页主要数据结构
        <script type="text/javascript" src="./assets/demos.js"></script>这个demo首页数据结构对应的具体内容
        <script type="text/javascript" src="./assets/iscroll.js"></script>iscroll 插件 ps:我还没了解过这个插件,今年得了解下,否则就太OUT了

首先看看部分 widgets.js 的内容, 里面存储了首页列表的每一项的KEY 、简介、和图片,作为数据源

image

在看看demo.js 里面存储的数据,里面主要存储了每一项对应的url地址和title。

image

一段一段的来看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);进行页面更新

转载于:https://www.cnblogs.com/qqloving/p/3575072.html

这篇关于百度mobile UI组件GMU demo学习1-结构和初始化的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/608350

相关文章

mysql通过frm和ibd文件恢复表_mysql5.7根据.frm和.ibd文件恢复表结构和数据

《mysql通过frm和ibd文件恢复表_mysql5.7根据.frm和.ibd文件恢复表结构和数据》文章主要介绍了如何从.frm和.ibd文件恢复MySQLInnoDB表结构和数据,需要的朋友可以参... 目录一、恢复表结构二、恢复表数据补充方法一、恢复表结构(从 .frm 文件)方法 1:使用 mysq

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl

Vue3中的动态组件详解

《Vue3中的动态组件详解》本文介绍了Vue3中的动态组件,通过`component:is=动态组件名或组件对象/component`来实现根据条件动态渲染不同的组件,此外,还提到了使用`markRa... 目录vue3动态组件动态组件的基本使用第一种写法第二种写法性能优化解决方法总结Vue3动态组件动态

C++初始化数组的几种常见方法(简单易懂)

《C++初始化数组的几种常见方法(简单易懂)》本文介绍了C++中数组的初始化方法,包括一维数组和二维数组的初始化,以及用new动态初始化数组,在C++11及以上版本中,还提供了使用std::array... 目录1、初始化一维数组1.1、使用列表初始化(推荐方式)1.2、初始化部分列表1.3、使用std::

Python中顺序结构和循环结构示例代码

《Python中顺序结构和循环结构示例代码》:本文主要介绍Python中的条件语句和循环语句,条件语句用于根据条件执行不同的代码块,循环语句用于重复执行一段代码,文章还详细说明了range函数的使... 目录一、条件语句(1)条件语句的定义(2)条件语句的语法(a)单分支 if(b)双分支 if-else(

Java深度学习库DJL实现Python的NumPy方式

《Java深度学习库DJL实现Python的NumPy方式》本文介绍了DJL库的背景和基本功能,包括NDArray的创建、数学运算、数据获取和设置等,同时,还展示了如何使用NDArray进行数据预处理... 目录1 NDArray 的背景介绍1.1 架构2 JavaDJL使用2.1 安装DJL2.2 基本操

使用Navicat工具比对两个数据库所有表结构的差异案例详解

《使用Navicat工具比对两个数据库所有表结构的差异案例详解》:本文主要介绍如何使用Navicat工具对比两个数据库test_old和test_new,并生成相应的DDLSQL语句,以便将te... 目录概要案例一、如图两个数据库test_old和test_new进行比较:二、开始比较总结概要公司存在多

四种Flutter子页面向父组件传递数据的方法介绍

《四种Flutter子页面向父组件传递数据的方法介绍》在Flutter中,如果父组件需要调用子组件的方法,可以通过常用的四种方式实现,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录方法 1:使用 GlobalKey 和 State 调用子组件方法方法 2:通过回调函数(Callb

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element