fex-team / gmu Goto Github PK
View Code? Open in Web Editor NEW基于zepto的ui组件库,适用于移动端
基于zepto的ui组件库,适用于移动端
有开发者反馈
大家有尝试过把gmu封装成AngularJS的指令吗?
定位在matchMedia.js中如下代码
$style.append('@media ' + query + ' { #' + id + ' { width: 1px; } }\n') ;
这句代码原本在iOS6/Android中是用于触发mediaMatch的,但是在iOS7中则会导致原生的mediaMatch不触发。
升级之前的解决方案可以适配iOS7直接使用原生mediaMatch即可。
由群友 Joel 反馈
我在windows下安装有两个地方被卡住
1:npm install 的时候phantomjs-1.9.7 这个文件是下载不了的 要先翻墙或者手动下载到那个目录才行
2: grunt dist ...这命令要在git bash命令行下面用才行 否则会报 error git Use
当
viewport中设置了target-densitydpi=high-dpi"时, $.mediaQuery方法会失效,不知道有什么解决办法?
在iphone4的safari查看http://gmu.baidu.com/demo/widget/gotop/gotop_iscroll.html的demo时最后一行看不到,即第49行
来自:cl_knight51 [email protected]
运行grunt concat_gmu打包生成整体文件,和示例中单个文件引入运行效果完全不一样。以dropmenu为例,示例中有一个dropmenu_arrow.html文件,如果我引入'<script type="text/javascript" src="../../../src/widget/popover/placement.js"></script>'放置在dropmenu.js引入之前,则效果有误。可以说这和文件的加载顺序有关,感觉是覆盖了,难道文件之间有互斥有加载顺序依赖吗?
在android自带浏览器中和android中微信webview,由iscroll做滚动的页面在上下滚动中触摸页面发现停不下来,而下次拉动页面时页面自动回到上次触摸时的位置开始滚动
修复Zepto中offset setter bug。
比如 被定位元素满足以下条件时,会定位不正确
phantomjs需要翻墙下载,我手动下载后放到npm install对应的phantomjs那个目录下(把整个zip文件放过去),再试试,祝你成功
下载框架的时候如果选了“是否合并(合并后共317.81K,不包含zepto部分的体积)” 之后会得到两个文件,一个zepto.js 一个 gmu.js 引入这两个文件运行的代码得不到预期的效果,比如navigator那里的实例代码,必须下载那个分散的包,然后单独引入组件,实例才能显示出预期的效果。
而GMU本身又拆散成了很多小文件,每次都要单独引入很麻烦,更重要的是在生产环境里会导致性能过差,希望能够解决一下该问题。
版本号改一下就好了
"grunt-lib-phantomjs": "0.3.0",
TODO
2.1.0版本 imglazyload.js 第88行,在图片加载失败时候控制台中会报
Uncaught RangeError: Maximum call stack size exceeded 错误
on('error',function () { //图片加载失败处理
var errorEvent = $.Event('error'); //派生错误处理的事件
$div.trigger(errorEvent);
errorEvent.defaultPrevented || pedding.push(div);
$img.off('error').remove();
}).attr('src', $div.attr(opts.urlName));
本文列出了GMU开发过程中应该遵循的规范,并做出相应的描述;开发过程中应该原则上遵循本文列出的规范。
本规范主要包括如下部分:
每个组件放在以组件名命名的文件夹内:
比如:
.
├── widget
└── Panel Panel组件文件夹
├── Panel.js Panel核心功能文件
├── display.push.js display参数push选项实现文件
├── display.overlay.js display参数overlay选项实现文件
├── $drag.js drag插件
└── Suggestion Suggestion组件文件夹
├── Suggestion.js Suggestion核心功能文件
├── $iscroll.js iscroll插件
gmu组件的classname使用gmu作为命名空间,组件根元素使用“gmu-组件名”命名,比如Dialog最外层容器的classname为‘gmu-dialog',DOM片段的classname使用“gmu-组件名-片段名”的方式命名,比如Dialog的title命名应该为'gmu-dialog-title'
gmu.define('Panel', {
// 默认参数
defaultOptions: {
key: value,
key: value,
key: value,
...
},
// 组件模板
template: '<div><ul>{{#list}}<li>{{item}}</li>{{/list}}</ul></div>',
// 模板转换成html片段的方法
tpl2html: function(data){
// do compile...
return html;
},
// 默认构造函数
_init: function(){}
}, gmu.Layer);
定义一个新组件使用gmu.define方法:
组件模板可以使用字符串,也可以是一个对象:
template: '<div><ul>{{#list}}<li>{{item}}</li>{{/list}}</ul></div>'
或者
template: {
title: '<div class="gmu-dialog-title">{{title}}</div>',
body: '<div class="gmu-dialog-foot">{{body}}</div>',
foot: '<div class="gmu-dialog-foot">{{title}}</div>'
},
当组件模板只有一个时,tpl2html为一个方法,接收一个data参数。
tpl2html: function(data){
// do compile...
return html;
}
当组件模板是一个map时,tpl2html可以是一个map也可以是一个方法。
// tpl2html用map实现
tpl2html:{
title: function(data){
// do compile...
return titlehtml;
},
body: function(data){
// do compile...
return bodyhtml;
}
}
或者
// tpl2html用函数实现
tpl2html: function(name, data){
if(name === 'title')
// do titlecompile...
else if(name === 'body')
// do bodycompile
return html;
}
对于组件的必选参数,如果多个可选值是相互独立的,建议采用option的方式拆分。
比如panel里面的display参数,有三个可选值:push、overlay、reveal。
使用option的方式拆分如下:
// display.push.js
gmu.Panel.option(display, 'push', function(){
var me = this;
me.on('setDisplay:panel', function(e){
// do display...
});
}
);
// display.overlay.js
gmu.Panel.option(display, 'overlay', function(){
var me = this;
me.on('setDisplay:panel', function(e){
// do display...
});
}
);
// display.reveal.js
gmu.Panel.option(display, 'reveal', function(){
var me = this;
me.on('setDisplay:panel', function(e){
// do display...
});
}
);
每个组件类都有一个register方法,通过register方法可以扩展出一个插件。
register方法的第一个参数为插件名,第二个参数为一个对象字面量,其中至少包含一个init方法,作为插件的初始化函数,该函数会在组件的构造函数执行完后执行。
插件的文件名使用$+插件名的方式命名,比如Panel的drag插件,文件名为$drag.js
// $drag.js
gmu.Panel.register('drag', {
init: function(){
// do something...
},
drag: function(){}
});
组件有两种初始化方式:
一种是形如$('#dialog').dialog()的方式;
一种是形如gmu.Dialog('#dialog')的方式。
每个组件需要对这两种初始化方式做抹平处理。
用户使用$('#dialog').dialog()方式调用时,底层会给组件传入setup:true的标识作为参考。
组件内部对初始化方式的判断不应该仅仅依赖setup标识,应该综合用户传入的参数以及DOM节点来判断。
出于向下兼容的考虑,目前事件(包括浏览器原生事件和自定义事件)全部采用直接在DOM元素上挂载监听的方式。
使用option方式拆分必选参数可选项时,自定义事件采用新的观察者事件机制。
组件destroy的时候应该移除所有的事件,并且对DOM结构进行还原。
原则上讲,destroy后DOM应该还原到组件初始化之前的状态。
根据demo中,refresh+iscroll是带refresh.default样式的。
但实际Grunt打包时,只包含了refresh.iscroll.default.css
,而refresh.default.css
并未被引入。
m && ~opts.availableThemes.indexOf(m[1]) && (css[m[1]] = item );
这里循环时m[1]
的值一直为default,refresh.iscroll.default.css
将refresh.default.css
复写了。
或者是我理解错误,需要另行其他设置?
[email protected] install /root/GMU/node_modules/grunt-lib-phantomjs/node_modules/phantomjs
node install.js
Downloading http://cdn.bitbucket.org/ariya/phantomjs/downloads/phantomjs-1.9.7-linux-x86_64.tar.bz2
Saving to /root/GMU/node_modules/grunt-lib-phantomjs/node_modules/phantomjs/phantomjs/phantomjs-1.9.7-linux-x86_64.tar.bz2
events.js:72
throw er; // Unhandled 'error' event
^
Error: connect ECONNREFUSED
at errnoException (net.js:904:11)
at Object.afterConnect as oncomplete
npm ERR! [email protected] install: node install.js
npm ERR! Exit status 8
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is most likely a problem with the phantomjs package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node install.js
npm ERR! You can get their info via:
npm ERR! npm owner ls phantomjs
npm ERR! There is likely additional logging output above.
npm ERR! System Linux 2.6.32-431.11.2.el6.x86_64
npm ERR! command "node" "/opt/npm/global/lib/node_modules/cnpm/node_modules/.bin/npm" "--userconfig=/root/.cnpmrc" "--disturl=http://dist.cnpmjs.org" "--cache=/root/.npm/.cache_cnpm" "--registry=http://r.cnpmjs.org" "install"
npm ERR! cwd /root/GMU
npm ERR! node -v v0.10.26
npm ERR! npm -v 1.4.6
npm ERR! code ELIFECYCLE
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /root/GMU/npm-debug.log
npm ERR! not ok code 0
gmu core的bug,extend里面对于uc的判断存在问题 会把一些杂牌机器判断成uc,比如天宇的kouch的ua就会被判断为uc。
http://gmu.baidu.com/demo/widget/panel/panel_iscroll.html
点“open”再关闭后,固顶工具栏就不再固顶了
有用户在群里反应dialog在低端机有严重的性能问题,初步怀疑是mask问题,而且用户使用jqmobi的dialog同样带mask却不卡。
杨: 10:36:05
在安卓手机上用浏览器看dialog的演示页面就很卡,不知道大家有没有遇到这个问题。用的手机是配置比较低端的。但是用 弹出框定位 就比较顺畅
http://gmu.baidu.com/demo/widget/dialog/dialog_position.html
GMU_2betop: 10:37:37
那个mask性能开销大,不知道为什么
GMU_2betop: 10:38:02
可能是大面积的opacity的原因
杨: 10:52:34
其实我觉得不是mask的问题,因为用jqmobi也用mask的,但是反应仍然很顺畅
我来粗个热闹
我来顶顶
初来报道,在存在的dome组件里面,我没有找到像Collapsible的控件,请前辈们告知,非常感谢
请复制以下代码,当选择一屏2个,loop为true时,点的个数会显示实际数量的2倍
$('#slider').slider({loop:true,viewNum:2,dots:true});
重复
mark,可以玩玩
Dialog 组件不支持第二种写法,传入的第一次参数,没用。
$( el ).dialog( options ) ⇒ zepto
new gmu.Dialog( el, options ) ⇒ instance
Uncaught TypeError: Object # has no method 'refresh'
我在使用refresh的时候找不到这个方法!
如何设置点击才加载,现在默认是上拉就加载更多
var currentPage = 1;
var totalPage = "{{data_result.totalpage}}";
(function () {
$('.ui-refresh').css('height', window.innerHeight - ($('header').height() || 42)).refresh({
ready : function(dir, type) {
var me = this;
if (currentPage >= parseInt(totalPage)) {
me.disable('down');
me.afterDataLoading();
return;
}
currentPage += 1;
$.getJSON('{{base_url}}/custom2?CategoryID={{Category._id}}&isAjax=1&Page=' + currentPage, function(data) {
if (data.error_code == 0) {
var $list = $('.data-list');
html = (function(data) {//数据渲染
var liArr = [];
$.each(data.data.rows, function() {
this['base_url'] = "{{base_url}}";
this['AddTime'] = (new Date(this['AddTime'] * 1000)).format('yyyy-mm-dd');
this['Extend']['Content'] = strip_tags(this['Extend']['Content']).substring(0, 50);
this['Extend']['Images'] = this['Extend']['Images'].length > 0 ? this['Extend']['Images'][0] : '';
liArr.push(ich.item(this, true));
});
return liArr.join('');
})(data);
}
$list[dir == 'up' ? 'prepend' : 'append'](html);
me.afterDataLoading();
//数据加载完成后改变状态
});
}
});
})();
请教
GMU测试标准根据百度全网的移动设备和浏览器统计数据制定,每一个月更新一次。
测试标准包括如下部分:
其中,设备、浏览器、分辨率按照占比分为A级和B级两部分,A级原则上需要全部测试通过,B级保证不影响页面功能的使用。
A级:IOS6.、IOS5.、IOS4.3、Android2.3、Android4.0、Android4.1、Android2.2
B级:IOS4.1、IOS4.2、Android2.1、Android3.2
A级:UC8.*以上版本、Android默认浏览器、ISO默认浏览器、QQ浏览器、百度浏览器、360浏览器、Chrome浏览器
B级:其他浏览器
A级:320x480、480x800、800x1280、360x640
B级:其他分辨率
待补充
待补充
比如三星note2, 在有touch.js的时候页面系统滚动非常不流畅。待查明原因
TODO
GMU 模板引擎 能支持 预编译吗?
使用前端MVC框架,页面出来后初始化imglazyload,但页面跳转,再返回时重新初始化imglazyload,发现图片无法加载。
跟踪调试后发现这段:
if ($.isFunction($.fn.imglazyload.detect)) { //若是增加图片,则处理placeHolder
_addPlsHolder();
return this;
};
会导致页面第二次加载时,后面的逻辑中断。
解决方案:在每次重新渲染页面时先设置$.fn.imglazyload.detect = null;
感觉这个问题对于新手不友好,期待能在源码中解决。
现在是直接设置src,但background-image形式加载图片可以通过cover实现自动缩放。
现在只能手动改源码:
!isImg && $div.replaceWith($img);
改为$div.attr('style', 'background-image: url('+url+')');
GMU文件是从github上下载下来的,npm install一切正常,执行grunt-dist报警告,请问该如何解决
截图请看:http://e.hiphotos.baidu.com/image/w%3D2048%3Bq%3D90/sign=2d2fc484d31373f0f53f689f9037708a/b3119313b07eca8099546518932397dda04483f8.jpg
new iScroll('S_widgets');//ps 这里为啥会在单元测试时候报错呢?
iScroll 报错
function pageend(func){
function mp(fn){
return function(){
try{
new iScroll('S_widgets');//ps 这里为啥会在单元测试时候报错呢?
}
catch(e)
{
}
$(window).trigger('resize');
fn();
}
}
var pagefun=mp(func);
setTimeout(pagefun, 200);
}
有谁针对页面使用 做这个的单元测试吗?
PS 正常运行时候没问题
应该结合travelSize处理
imglazyload 是否可以设置默认加载前的图片?
placeHolder 只能是纯文本
$.location(function(rs){
console.log(rs)
})
google提示:
Uncaught TypeError: Object function (a,b){return A.init(a,b)} has no method 'location'
$('#slider').slider( { index:2} );
$('#slider').slider( 'getIndex' );
这样执行过之后,会显示第一张图片
项目里使用了GMU,现在打算用Seajs把项目改造下,有支持Seajs的版本吗,或者有人提供下改造的思路?
我表述不行,贴代码。
$ele.refresh({
load:function(dir,type){
if(type=="click"){
$.ajax
}else{
//不加载,此时应该写什么。如果写me.afterDataLoading(dir)的话,控件就不能在当前的dir方向上进行加载了
}
}
});
具体细节待补充。
将toolbar定位到底部后,用tabs产出出来的content会在toolbar的上面,导致toolbar上面的链接无法被点击到
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.