JS中江微盘帮助文档档下载链接,要很全面的。有全局函数等介绍。

使用时,请先下载halo.js的文件包,并布置在项目的/js目录下
CORE & API
方法,按名字载入模块
语法:halo.use(string1,string2,...,stringX,function);
参数说明:
string1,string2,...,string3
可选,要引入的模块名
必选,模块加载成功后的回调函数。回调时返回一个参数m,表示载入的模块集合
/*example*/
halo.use('msgbox',function(m){
m.msgbox.show('使用了msgbox模块');
方法,为指定 DOM 绑定事件
语法:m.on(DOM,event,callback,capture);
参数说明:
必选,要绑定事件的 DOM 节点
必选,要绑定的事件名。可以是原生事件,也可以是封装的定制事件。在需要定制事件的页面使用halo.use('uievent')
必选,事件函数
可选,boolean 类型,表示事件的传递方法是捕获还是冒泡方法
/*example*/
halo.use(function(m){
m.on(button,'click',function(e){
方法,为指定 DOM 解绑事件
语法:m.off(DOM,event,callback,capture);
参数说明:
必选,要解绑事件的 DOM 节点
必选,要解绑的事件名。可以是原生事件,也可以是封装的定制事件
必选,事件函数
可选,boolean 类型,表示事件的传递方法是捕获还是冒泡方法
/*example*/
halo.use(function(m){
m.on(button,'click',function(e){
m.off(button,'click');//完成解绑
方法,配置 halo.js 的参数
语法:halo.config([settings]);
参数说明:
[settings]
可选,object 类型。用于配置 halo.js 的参数,所有参数都是可选的,具体如下:
打包加载服务,true是默认值
服务器地址 默认是为空,即当前地址
组件文件的相对地址 默认是 '/js/halo/'
combo 引擎相对地址 默认是 '/c/'
use 方法的回调是否要等待组件加载完成后再回调 默认为true
版本号。更改版本号可以强制刷新组件缓存
/*example*/
halo.config({combo:true,wait:true,version:''}).use(function(m){
m.off(DOM,'flick',function(){alert('flick');},false);
方法,为指定的 DOM 添加样式
语法:m.addClass(DOM,string)
参数说明:
必选,目标 DOM 节点
必选,样式名
/*example*/
halo.use(function(m){
m.addClass(button,'red');
removeClass
方法,为指定的 DOM 移动样式
语法:m.removeClass(DOM,string)
参数说明:
必选,目标 DOM 节点
必选,样式名
/*example*/
halo.use(function(m){
m.removeClass(button,'red');
方法,判断指定的 DOM 有无此样式
语法:m.hasClass(DOM,string);
参数说明:
必选,目标 DOM 节点
必选,样式名
/*example*/
halo.use(function(m){
if(m.hasClass('red')){
stylesheet
方法,动态添加样式片
语法:m.stylesheet(string);
参数说明:
必选,样式片段
/*example*/
halo.use(function(m){
m.stylesheet('.red{color:#ff0000;}');
//有时js动态生成css3动画,可以借用这个方法把样式加入页面
属性,返回当浏览器的特征css 前缀
/*example*/
halo.use(function(m){
alert('你当前的浏览器的css3前缀是:'+m.webkit);
//有时js动态生成css3动画,可以借用这个方法把样式加入页面
pageinvite
分页模式:快捷翻页/片状翻页
语法:m.pageinvite.bind(DOM);
浏览器:android 2.3.x~4.x/ios6~7/pc chrome/pc firefox/pc ie10
参数说明:
必选,分页的容器节点(父节点或祖先节点)
需要注意的是,使用这个方法的第一个分页都应该独立在一个节点内,并且这个节点需要添加一个叫 page 的样式。因为 pageinvite 内部方法是通过 class="page" 来识别分页的。需要引入 uievent 作为事件依赖
pageinvite.bind 方法会返回一个对象{page_change,infinite,need_scale,unbind,move},具体用法如下:
page_change
方法,翻页事件监听,在翻页事件触发后回调此方法,并且返回两个参数c,n。c表示翻出页,n表示翻入页
属性,boolean 类型,是否循环翻页,默认为true
need_scale
属性,boolean 类型,翻页过程有缩放效果,默认为false
方法,解绑 pageinvite 方式翻页
方法,翻入第几页
语法:pager.move(n);
参数说明:
必选,翻入页码索引
var pager=m.pageinvite.bind(document.getElementById('wrap'));
pager.move(3);//翻到第4页
方法,设置作者信息
语法:pager.setAuthor(string);
用于模拟 iOS 下拉到顶或到底时,黑色底部下的“由提供”。如下图:
/*example*/
halo.use('uievent','pageinvite',function(m){
var wrap=document.getElementById("wrap");
var pager=m.pageinvite.bind(wrap);
pager.page_change=function(cur,next){
pager.infinite=
var jump=document.getElementById("jump");
m.on(jump,'flick',function(){
pager.move(1);
//pager.unbind();
分页方式:整页滑动
语法:m.pagedrag.bind(DOM,motion,delegate);
浏览器:android 2.3.x~4.x/ios6~7/pc chrome/pc firefox/pc ie10
必选,分页的容器节点(父节点或祖先节点)
可选,string 类型,有三个值X,Y,XY,表示页面是横屏滑动还是竖屏滑动,或者是横竖屏滑动
可选,boolean 类型,默认false; 表示被托管,当 motion 为XY时此属性将无效。 motion 为X或Y, delegate 为true时, pagedrag 可与其它翻页组合做复杂翻页功能
pagedrag.bind 将返回一个对象{unbind,move,page_change},具体用法如下:
page_change
方法,翻页事件监听,在翻页事件触发后回调此方法,并且返回两个参数 c,n。c表示翻出页,n表示翻入页
方法,解绑 pageinvite 方式翻页
方法,与pageinvite的setAuthor相同
方法,翻入第几页。
语法:pager.move(n);
参数说明:
必选,翻入页码索引
var pager=m.pagedrag.bind(document.getElementById('wrap'),'Y',true);
pager.move(3);//翻到第4页
必须依赖: uievent
分页方式:3D效果翻页
语法:m.tripage.bind(DOM);
浏览器:android 4.x/ios6~7/pc chrome/pc firefox/pc ie10
必选,分页的容器节点(父节点或祖先节点)
tripage.bind 将返回一个对象{unbind,move,page_change},具体用法如下:
page_change
方法,翻页事件监听,在翻页事件触发后回调此方法,并且返回两个参数 c,n。c表示翻出页,n表示翻入页
方法,解绑 tripage 方式翻页
方法,翻入第几页
语法:pager.move(n);
参数说明:
必选,翻入页码索引
var pager=m.tripage.bind(document.getElementById('wrap'));
pager.move(3);//翻到第4页
仅适用于四个分页的页面。并且,android 2.3 以下不支持 3d 效果,所以使用时要做判断。如果是 android 2.3.x 可以降级使用 pageinvite,毕竟两个分页方法的调用是一样的。
依赖组件: uievent
分页方式:整页滑动
语法:m.touchdrag.bind(DOM,motion);
浏览器:android 2.3.x~4.x/ios6~7/pc chrome/pc firefox/pc ie10
参数说明:
必选,分页的容器节点(父节点或祖先节点)
可选,string 类型,有三个值X,Y,XY,表示页面是横屏滑动还是竖屏滑动,或者是横竖屏滑动
touchdrag.bind 将返回一个对象{dom,height,width,x_page_count,y_page_count,x_cur_page,y_cur_page,page_change,unbind,move,lock},具体用法如下:
属性,当前被绑定的 DOM 节点
属性,当前绑定 DOM 节点的高度
属性,当前绑定 DOM 节点的宽度
x_page_count
属性,X 轴方向上有几个分页
y_page_count
属性,Y 轴方向上有几个分页
x_cur_page
属性,当前处于 X 轴的子页索引
y_cur_page
属性,当前处于 Y 轴的子页索引
page_change
方法,翻页事件监听,在翻页事件触发后回调此方法,并且返回两个参数c,n。c表示翻出页,n表示翻入页
方法,解绑 tripage 方式翻页
方法,翻入第几页
语法:pager.move(n);
必选,翻入页码索引
var pager=m.tripage.bind(document.getElementById('wrap'));
pager.move(3);//翻到第4页
属性,手指的锁定状态
touchdrag 是 pagedrag 的完全版本,能完全实现4向滚动。但是,现实意义不大,而且代码长度是 pagedrag 的3倍。
不过 touchdrag 可以不依赖 halo.js 而独立被引用。
视具体情况来使用 touchdrag,如果是双向滚动建议直接用 pagedrag,四向滚动可以考虑用 pagedrag 的嵌套形式实现四向滚动。
pageslider
分页模式:整页滑动
语法:m.pageslider(arg);
作为pagedrag的替代组件
halo版本:halo.15.01以上
arg对象说明:
必选,string/DOM,分页的容器节点(父节点或祖先节点)或字符选择器
可选,string类型,只有两个值X/Y,默认是Y
可选,number,翻页的触发位移,默认是50
可选,number类型,翻页的运动时间,默认是300
可选,number类型,回弹运动的时间,默认是100
可选,number类型,初始化组件时显示的分页,默认是0
可选,boolean类型,是否无限循环翻页,默认是true
可选,function类型,翻页后的事件回调
/*example*/
halo.use("uievent","pageslider","enablea",function(m){
m.on(document.body,'touchstart',function(e){e.preventDefault();});
m.on(document.body,'touchmove',function(e){e.preventDefault();});
window.pageSlider=m.pageslider(
dom:document.getElementById("wrap"),
direction:'Y',
offset:50,
duration:300,
infinite:true,
onchange:function(o,i){
//o滑出页索引,i滑入页索引
//通过this[0]可以取对应的分页哦
//可以通过pageSlider.move(n);来定位分页
在子页添加属性HALOSLIDER,因为HALO是通过这个属性来定位分页的,具体可以参考 demo
cardslider
分页模式:卡片式滑动
语法:m.cardslider(arg);
作为pageinvite的替代组件
halo版本:halo.15.01以上
arg对象说明:
必选,string/DOM,分页的容器节点(父节点或祖先节点)或字符选择器
可选,string类型,只有两个值X/Y,默认是Y
可选,number,翻页的触发位移,默认是50
可选,number类型,翻页的运动时间,默认是300
可选,number类型,回弹运动的时间,默认是100
可选,number类型,初始化组件时显示的分页,默认是0
可选,boolean类型,是否无限循环翻页,默认是true
可选,boolean类型,是否翻页缩放,默认是false
可选,function类型,翻页后的事件回调
/*example*/
halo.use("uievent","cardslider","enablea",function(m){
window.pageSlider=m.cardslider(
dom:document.getElementById("wrap"),
direction:'Y',
scale:true,
offset:50,
duration:300,
infinite:true,
onchange:function(o,i){
//通过this[0]可以取对应的分页哦
//o滑出页索引,i滑入页索引
console.log(o,i);
//可以通过pageSlider.move(n);来定位分页
在子页添加属性HALOSLIDER,因为HALO是通过这个属性来定位分页的,具体可以参考 demo
parallaxslider
分页模式:带视差整页滑动
语法:m.parallaxslider(arg);
在子页中的视差元素中添加属性SLIDERSPEED=".5"。其中".5"表示是“当前移动速度 x .5”,具体可以参考 demo
halo版本:halo.15.01以上
arg对象说明:
必选,string/DOM,分页的容器节点(父节点或祖先节点)或字符选择器
可选,string类型,只有两个值X/Y,默认是Y
可选,number,翻页的触发位移,默认是50
可选,number类型,翻页的运动时间,默认是300
可选,number类型,回弹运动的时间,默认是100
可选,number类型,初始化组件时显示的分页,默认是0
可选,boolean类型,是否无限循环翻页,默认是true
可选,function类型,翻页后的事件回调
/*example*/
halo.use("uievent","pageslider","enablea",function(m){
m.on(document.body,'touchstart',function(e){e.preventDefault();});
m.on(document.body,'touchmove',function(e){e.preventDefault();});
window.parallaxslider=m.parallaxslider(
dom:document.getElementById("wrap"),
direction:'Y',
scale:true,
offset:50,
duration:300,
infinite:false,
onchange:function(o,i){
console.log(o,i);
//可以通过pageSlider.move(n);来定位分页
语法:m.loader([array]);
浏览器:android 2.3.x~4.x/ios6~7
必选,string array,被加载资源的数组,目前支持png,jpg,gif,css,js。
m.loader 将返回一组方法和属性,并且方法是支持链接语法,具体用法如下:
属性,加载资源数组。 {Array}
属性,加载失败数。 {Number}
属性,加载完成数。 {Number}
属性,加载完成站总需要加载资源的百分比。 {String}
属性,需要加载资源的总数。 {Number}
方法,添加单个资源加载时的回调方法。
@param {Function}
@return this加载资源每一个资源加载开始调用的方法
方法,添加单个资源加载时的回调方法。
@param {Function}
@return this加载资源每一个资源加载完成调用的方法
方法,添加资源加载完成后的回调方法。
@param {Function}
@return this所有资源加载完成回调方法
方法,获得图片资源,如果有加载则直接调用,如果没有则开始加载。
@param {String}路径
@param {Object:Image} image对象
halo.use('loader',function(m){
m.loader(['images/loader_1.jpg','images/loader_2.jpg','images/loader_3.jpg',
'images/loader_4.jpg','images/loader_5.jpg'])
.loadend(function(percent){
//加载完每一个资源都会调用一次
.complete(function(){
//完成加载调用
由于上方法是没有 loading 的 ui,所以 loader 模块提供一个 loadmsk 的模块提供一个带 ui 界面的模块。
loadmsk 的语法:loadmsk([array],bgcolor,callback);
必选,string array,被加载资源的数组,目前支持png,jpg,gif,css,js。
必选,string,背景着色
可选,function,资源加载成功的回调
halo.use('loader', function(m){
var loader = m.loaderMsk(
['images/loader_1.jpg','images/loader_2.jpg','images/loader_3.jpg'],
function(){
lazyloader
语法:new m.lazyloader();
浏览器:android 2.3.x~4.x/ios6~7
不需要参数
new m.lazyloader(); 会返回一个complete方法,如下:
方法,所有资源加载完成后调用。
@param {Function}
@return this所有资源加载完成回调方法
使用 lazyloader 作滚动加载要注意的是 &img& 标签要加一个 data-lazy 的属性,这个属性存放的是最终要显示的图片地址,而原来的 src 则指向一张空白的图片即可
halo.use('lazyloader',function(m){
new m.lazyloader().complete(function(){
//TODO 加载完成的时候调用
语法:m.loadimg([array],parent,bgcolor,callback);
浏览器:android 2.3.x~4.x/ios6~7/pc chrome/pc firefox/pc ie10
必选,string array,被加载图片路径的数组。
可选,DOM,存放 loading 界面的父节点,默认是document.body。
可选,string,背景颜色,默认透明
可选,function,资源加载成功的回调,回调时会带一个参数 DOM,是 loading 界面的容器。在auto为false,需要手动移除 loading 界面
loadimg 会返回一个auto的属性,可以用来设置, loading
是否自动关闭,默认是自动关闭
m.loadimg(['images/bg.jpg','images/icons.png'],'#179E79',function(loading){
loadimg 兼容以下写法:
1) m.loadimg([array],bgcolor);
2) m.loadimg([array],bgcolor,function);
3) m.loadimg([array],parent);
4) m.loadimg([array],parent,function);
5) m.loadimg([array],function);
6) m.loadimg([array]);
语法:m.ezloader(fadein,num);
浏览器:android 2.3.x~4.x/ios6~7/pc chrome/pc firefox/pc ie10
可选,boolean 类型,表示图片完成后以淡入效果显示,默认为true。
可选,number 类型,表示图片在距离可视范围num像素以内就可以开始载入图片。
ezloader 会返回一个对象{load_change,zoom},具体用法如下:
load_change
方法,页面的图片加载发生变化时触发回调(即加载完一个资源触发一次回调),回调时会传入一个参数img,即一个data-ez节点。
属性,即当前页面的zoom值,用于有使用zoom适应的页面
ezloader 与 lazyloader 的功能相似,但是,lazyloader 在页面只能使用一次,这不适用于复杂情况。ezloader 在页面内可多次使用,且使用 load_change 方法还可以让开发者为滚动加载后的图片添加加载效果。
halo.use('ezloader',function(m){
m.ezloader().load_change=function(img){
img.className="fadein";//给加载成功的图片加个淡入动画
语法:m.cookie.set(key,value,expires,domain,path);
浏览器:所有主流浏览器
cookie 对象有三个方法:set,get,delete
必选,string 类型,cookie 键名。
必选,string 类型,cookie 键值
可选,number 类型,cookie 的有效期,单位是分钟
可选,string 类型,指定 cookie 存放在哪个域名下。
可选,string 类型,指定 cookie 存放的路径。
m.cookie.set('paipai','paipaivalue',30,'','/');
m.cookie.get(key,index);
必选,string 类型,要查找的 cookie 的键名
可选,number 类型,返回第(index+1)个 cookie 值
通常情况下,这个 index 参数不会被使用。在情况复杂的 cookie 下,index 才有可能被使用。例如:多域 cookie,会生成多个同名的 cookie 值,此时就需要用 index 值来遍历了
var val = m.cookie.get('paipai');
alert(val);
m.cookie.delete(key,domain,path);
必选,string 类型,要删除的 cookie 的键名
可选,string 类型,在指定域删除 cookie
可选,string 类型,在指定路径删除 cookie
m.cookie.delete('paipai');
语法:m.md5(str);
浏览器:所有主流浏览器
必选,string 类型,被加密的字符串。
alert(m.md5('md5'));
浏览器:所有主流浏览器
remember 的作用是记住当前页面在跳转到其实页面前的scrollTop位置,并在下次返回是自动定位到该位置。使用是只须use remember即可。
remember 对 cookie 模块的依赖,所以使用 remember 的时候要保证 cookie 模块被引入。
另外,同域多页面的情况下,为了避免 cookie 的污染。可以 use md5,remember 模块会自动按页面地址存放位置。
halo.use('md5','cookie',remember',function(m){
weixinshare
语法一:m.weixinshare(url,img,title,desc,width,height,appid);
语法二:m.weixinshare({url:string,img:string,title:string,desc:string,width:number,height:number,appid:string});
浏览器:微信内置浏览器
必选,string 类型,微信分享的页面地址,必须是绝对路径
必选,string 类型,分享图片,必须是绝对路径
必选,string 类型,分享方案的标题(分享到朋友圈时没有此信息)
必选,string 类型,分享方案的描述(分享到朋友圈的方案)
可选,number 类型,指定分享图片的宽度
可选,number 类型,指定分享图片的高度
可选,string 类型,指定当前页面的appid,如果没有最好不会乱传,否则在分享链接下会有一个小灰框提示未通过审核的appid
可选,function 类型,分享后回调,默认会传一个状态字符串ret,有三个取值:ok,cancel,fail分别表示分享成功;未分享被用户主动取消;分享失败
m.weixinshare(
'/xin/event7/index.shtml',
'/xin/event7/images/share.png',
'分享的文案标题',
'分享的文案描述'
m.weixinshare方法将会返回一个配置对象config。config的成员如下:
string 类型,微信分享的页面地址,必须是绝对路径
string 类型,分享图片,必须是绝对路径
string 类型,分享方案的标题(分享到朋友圈时没有此信息)
string 类型,分享方案的描述(分享到朋友圈的方案)
number 类型,指定分享图片的宽度
img_height
number 类型,指定分享图片的高度
string 类型,指定当前页面的appid,如果没有最好不会乱传,否则在分享链接下会有一个小灰框提示未通过审核的appid
boolean 类型,表示使用分享到朋友的抬头当分享到朋友圈的标题。默认为false,即默认使用分享到朋友的描述作为分享到朋友圈的标题
friendsDesc
string 类型,表示使用分享到到朋友圈的标题。如果不存在就会根据useTitle属性选择title或desc作为标题
function,分享后回调,默认会传一个状态字符串ret,有三个取值:ok,cancel,fail分别表示分享成功;未分享被用户主动取消;分享失败
通过config对象可以随时的更改分享的内容,适用于会游戏按等级分享不同的内容。
var config=m.weixinshare(
'/xin/event7/index.shtml',
'/xin/event7/images/share.png',
'分享的文案标题',
'分享的文案描述'
config.cb=function(ret){
alert(ret);
config.desc='描述变了哦';
config.useTitle=
语法一:m.qqshare(url,img,title,desc,width,height,appid,puin,sourceName,iconID);
语法二:m.qqshare({url:string,img:string,title:string,desc:string,width:number,height:number,appid:string,puin:string,sourceName:string,iconID:number});
浏览器:手Q内置浏览器
使用QQ分享时,请确保已经引入以下文件
&script src="/qqmobile/qqapi.js?_bid=152"&&/script&
m.qqshare 方法仅适用于以下域名:*.qq.com, *., *., *., *., *., *., *., *., *., *.。如果是第三域名,默认是不支持了。另外需要特别注意的时,分享链接的域名必要与当前域名保持一致!!
若非这白名单内的域名,请直接忽略些方法。
必选,string 类型,分享的页面地址,必须是绝对路径
必选,string 类型,分享图片,必须是绝对路径
必选,string 类型,分享方案的标题
必选,string 类型,分享方案的描述
可选,number 类型,指定分享图片的宽度
可选,number 类型,指定分享图片的高度
可选,string 类型,指定当前页面的appid
可选,string 类型,公众号uin。用于自定义分享信息尾巴。如果没有可以填,或传12345。如果puin没有索引到本地记录,则会显示sourceName,如果没有sourceName就会显示puin的数字。
sourceName
可选,string 类型,公众号的昵称。仅当puin存在且puin没有索引到本地记录时生效(这个是官方说法,实事上不传puin,sourceName也可以正常显示)。如果没有puin也没有sourceName小尾巴会显示“QQ浏览器”
可选,number 类型,定义右上角分享按钮的图标。有七个值:0~6。通常,取3或4。此属性,只在第一次调用qqshare时生效
使用第一种方式调用分享代码如下:
m.qqshare(
'/xin/event7/index.shtml',
'/xin/event7/images/share.png',
'分享的文案标题',
'分享的文案描述',
80,//分享图片的宽
80,//分享图片的高
undefined,//appid,没有就不传或传undefined
12345,//puin,可以随便传一个数字串
'京东购物',//sourceName,公众号昵称
3//右上角分享按钮
使用第二种方式调用分享代码如下:
m.qqshare(
url:'/xin/event7/index.shtml',
img:'/xin/event7/images/share.png',
title:'分享的文案标题',
desc:'分享的文案描述',
width:80,//分享图片的宽
height:80,//分享图片的高
appid:undefined,//appid,没有就不传或传undefined
puin:12345,//puin,可以随便传一个数字串
sourceName'京东购物',//sourceName,公众号昵称
3//右上角分享按钮
由于参数众多,建议使用第二种方法。因为更灵活,也方便记忆
m.qqshare 方法将会返回一个配置对象config。config的成员如下:
string 类型,微信分享的页面地址,必须是绝对路径
string 类型,分享图片,必须是绝对路径
string 类型,分享方案的标题(分享到朋友圈时没有此信息)
string 类型,分享方案的描述(分享到朋友圈的方案)
function,分享后回调,默认会传一个状态字符串ret,有三个取值:ok,cancel,fail分别表示分享成功;未分享被用户主动取消;分享失败
通过config对象可以随时的更改分享的内容,适用于会游戏按等级分享不同的内容。
var config=m.qqshare(
window.location.href,
'/xin/event7/images/share.png',
'分享的文案标题',
'分享的文案描述'
config.cb=function(ret){
alert(ret);
浏览器:android 2.3.x~4.x/ios6~7/pc chrome/pc firefox/pc ie10
util是一个对象集合:{getBF,extend,proxy,addClass,removeClass,RAF,cRAF}
方法,获取运行环境,返回比较结果('weixin','qq','web')。
weixin:微信; qq :手Q; web :非微信和手Q。
halo.util.getBF(); //返回运行环境
方法,合并对象到第一个对象中,最后一个参数控制是否深拷贝(默认为false),将后面的对象合并到第一个并返回。
@param {Object[,Object][,Object][,Boolean]}
@return {Object}
halo.util.extend({},obj1,obj2,true);// 返回新的对象
方法,更改函数运行时的this对象
@param {Object,Function}
@return {Function}
halo.util.proxy(this, function(){
方法,添加样式
@param {DOM,Function}
halo.util.addClass(DOM,'className');
removeClass
方法,删除样式
@param {DOM,Function}
halo.util.removeClass(DOM,'className');
方法,requestAnimationFrame
方法,cancelAnimationFrame
语法:halo.timer.remainTime(year,month,date,hour,minute,second);
浏览器:android 2.3.x~4.x/ios6~7
必选,number 类型,年份
必选,number 类型,月份
必选,number 类型,日份
必选,number 类型,小时
必选,number 类型,分钟
必选,number 类型,秒钟
halo.timer.remainTime 会返回一个对象{hour,minute,second},即计算现在到截止时间还有hour时minute分second秒
halo.timer.remainTime(,00,00,00); //{hour: 57129, min: 12, sec: 38}
randomsort
将数组随机排序
浏览器:所有浏览器
语法:m.randomsort(array,count);
必选,Array 类型。
可选,number 类型。按指定长度返回数组,默认是array的长度。
halo.use('randomsort',function(m){
var arr=['A','1','2','3','4','5','6','7','8','9','10','J','Q','K'];
alert(m.randomsort(arr));
DEMO:点击查看
将目标图片转化成灰度图片
浏览器:android 2.3.x~4.x/ios6~7/pc chrome/pc firefox/pc ie9+
*注意:android 2.3 环境下,需要use('todataurl')组件。android3 不支持canvas.toDataURL();需要说明的是这个组件实现的canvas.toDataU效率很低,小图片可以用,大图片建议不使用。
语法:m.togray(src,callback);
必选,string,目标图片路径。
必选,function,灰度转换成功后的回调函数。
callback 被回调时,会传一个参数src,即转化后的灰度图片的dataurl。
halo.use('togray',function(m){
m.togray(source_src,function(src){
togray 方法只能将同域名路径的图片转化面灰度图片,如果跨域图片就没有办法转换了。
DEMO:点击查看
检测当前 web 环境
浏览器:所有浏览器
语法: m.browser(text);
必选,string 类型,当前环境的可能值。
text的可能取值如下:
trident/ie
presto/opera
opera 内核
苹果、谷歌内核
gecko/firefox
是否为移动端
android 终端
是否为 iPhone 或者 QQHD 浏览器
是否为 ipad
是否 web 应该程序,没有头部与底部
是否微信环境
是否手Q环境
当 text 为 android 时,并且结果为 true 时,m.browser 返回的结果将会是 android 的版本号。
halo.use('browser',function(m){
var ret=m.browser('android');
alert(ret);
DEMO:点击查看
取得 url 上的参数的值。
浏览器:所有浏览器
语法:m.request(key);
halo.use('request',function(m){
var ret=m.request('key');
alert(ret);
DEMO:点击查看
paipailogin
拍拍域名下的 QQ 和微信登录
浏览器:所有浏览器
语法:m.paipailogin(cb);
登录接口暂时只对 , 以部分白名单域名可以调用。第三域名没办法使用。
function 类型,可选,登录成功后回调(非微信登录下有用)。
cb 被回调时,会带两个整数 skey,uin,表示登录的 skey 的帐号;如果是跨域登录的话,这两个参数就是登录信息。
halo.use('paipailogin',function(m){
m.paipailogin(function(skey,uin){
//如果是QQ登录,能看到下面的alert
alert(skey+';'+uin);
可以通过 m.paipailogin.type='paipai'; 或 m.paipailogin.type='wx'; 强制指定登录的方式。默认情况是根据环境自动选择登录方式。
通过 paipailogin 的 isLogin 方法可以知道当前的登录状态。
跨域使用说明:
如果是 paipai 域名下的页面,只需要使用 halo.js 提示的方法即可完成登录。但是如果是跨域了的页面,那么需要在调用登录的页面的目录下手工创建一个通信页面。
点击下载这个
下载成功后,请把名字命名为 afterLogin.html (注意大小写)
DEMO:点击查看
拍拍域名下的QQ和微信登录。
浏览器:所有浏览器
语法:m.wglogin(useJd); 必须依赖request组件
* 目前调用的是QQ第三方登录,所以,QQ登录无法实现无刷新登录。体验上说,比paipailogin要差很多。
登录接口暂时只对 , 以部分白名单域名可以调用。第三方域名请联系 halo.js 的管理员添加白名单。
boolean 类型,可选,表示使用jd登录,默认为true,如果需要使用旧接口可以使用m.wglogin(false)。
halo.use('wglogin',function(m){
m.wglogin.isLogin()||m.wglogin();
可以通过 m.wglogin.type='qq'; 或 m.wglogin.type='wx'; 强制指定登录的方式。默认情况是根据环境自动选择登录方式。
通过 m.wglogin.scope="snsapi_base"和m.wglogin.scope="snsapi_userinfo"; 来指定微信登录的授权方式
跨域使用说明:
域名下的页面,只需要使用 halo.js 提示的方法即可完成登录。但是如果是跨域了的页面,那么需要在调用登录的页面的目录下手工创建一个通信页面。
点击下载这个。
下载成功后,请把名字命名为afterLogin.html(注意大小写)
DEMO:点击查看
servertime
获取服务器时间
浏览器:所有浏览器
halo.use('servertime',function(m){
alert(m.servettime);
微信/手Q预约提醒
浏览器:手Q/微信内置浏览器
语法:m.bookalert(activeid,cb);
number/string 类型,必选,表示要预约的活动标识。
function 类型,必选,预约结果回调。
halo.use('jsonp','bookalert',function(m){
window.book=function(){
m.bookalert('173',function(json){
var ret=json.errNo;
if(0==ret){
alert('预约成功');
}else if('13'==ret){
alert('未登录');
alert('预约失败');
激活a标签(适用于click事件被阻止后的轻app页面)
浏览器:webkit内核触屏页面
在halo中use中引用即可生效
m.enablea有一个属性capture。即事件的传递方法,如果有e.stopPropagation();来阻止父节点A被点击的交互,可以m.enablea.capture=false;默认是m.enablea.capture=
halo.use('uievent','enablea',function(m){
m.enablea.capture=//使用事件冒泡
必须依赖: uievent
enablea只有在页面的click事件被阻止后才会生效。
qqgoodsbook
手Q下的商品预约方法,可以简单逻辑。微信下暂时没有,因为微信需要通过微信端的中转,跳转预约没办法阻止。
语法:m.qqgoodsbook([[skuid,cosspresaleid,globalpresaleid,salestarttime],[skuid,cosspresaleid,globalpresaleid,salestarttime],[skuid,cosspresaleid,globalpresaleid,salestarttime]...],
function(json){
//-1==ret 表示没缺少关键参数:subscriberesult
//0==ret 表示单个商品预约成功
//1==ret 表示单个商品预约失败
//2==ret 表示商品列表预约返回一个list数组,代表各个商品的预约结果。list=[[skuid,result],[skuid,result],[skuid,result]...];result与ret相同,0成功,1失败
halo.use('qqgoodsbook',function(m){
m.qqgoodsbook([[skuid,cosspresaleid,globalpresaleid,salestarttime]],function(json){
alert(json.ret);
skuid,cosspresaleid,globalpresaleid,salestarttime这四个是预约的必选参数。不过,往往我们只能拿到 skuid。其它三个值拿不到。其实,其它三个值可以用以下接口取到:
/bases/presalesku/querypresalesku?callback=yushouWGCB&skuid=1324046
把1324046改成实际的skuid就可以了
返回的结果中:start_time就是salestarttime,global_presale_id就是globalpresaleid,presale_id就是cosspresaleid
接口可见:/ci.php/api/#id=20273
依赖方法:`jsonp`
checkstock
查询商品的库存情况。
语法:m.checkstock(skuid,cb);
number/string 类型,必选,商品的skuid。
function 类型,必选,预约结果回调。
halo.use('checkstock',function(m){
m.checkstock('123456',function(stock){
//通过stock.StockState可以知道库存情况,具体如下:
现货-下单立即发货
在途-正在内部配货,预计2~6天到达本仓库
可配货-下单后从有货仓库配货
querybooknum
查询商品的预约数。
语法:m.querybooknum(skuid,cb);
number/string 类型,必选,商品的skuid。
function 类型,必选,预约结果回调。
halo.use('checkstock',function(m){
m.checkstock('123456',function(num,json){
//num即当前的预约数,json为接口返回对象
mgoodsbook
微信手Q下的多商品预约方法。
与qqgoodsbook基本一样(微信后来的接口不用再跳wx授权通道了)。具体用法参见示例代码:
m.mgoodsbook([[skuid,cosspresaleid,globalpresaleid,salestarttime],[skuid,cosspresaleid,globalpresaleid,salestarttime],[skuid,cosspresaleid,globalpresaleid,salestarttime]...],
function(json){
var ret=json.ret,list=json.
//-1==ret 表示没缺少关键参数:subscriberesult
//0==ret 表示单个商品预约成功
//1==ret 表示单个商品预约失败
//2==ret 表示部分商品预约失败,可以从list列表查看具体的预约结果。list=[[skuid,result],[skuid,result],[skuid,result]...];result与ret相同,0成功,1失败
//13==ret 表示未登录
true//这个参数只是为了向前兼容域名,如果是请传false
以下是预约两个商品的示例:
halo.use('jsonp','querysubscribe','mgoodsbook',function(m){
window.mgoodsbook=function(){
m.mgoodsbook(
//[skuid,cosspresaleid,globalpresaleid,salestarttime]
['1554893','0','36946',' 20:00:00'],
['1196255','0','37674',' 10:08:00']
function(json){
if(0==json.ret){
alert('预约成功');
}else if(2==json.ret){
alert("部分商品预约失败");
}else if('13'==json.ret){
alert('未登录');
alert('预约失败');
skuid,cosspresaleid,globalpresaleid,salestarttime这四个是预约的必选参数。不过,往往我们只能拿到 skuid。其它三个值拿不到。其实,其它三个值可以用以下接口取到:
/bases/presalesku/querypresalesku?callback=yushouWGCB&skuid=1324046
把1324046改成实际的skuid就可以了
返回的结果中:start_time就是salestarttime,global_presale_id就是globalpresaleid,presale_id就是cosspresaleid
接口可见:/ci.php/api/#id=20273
依赖方法:`jsonp`,`g_tk`,`querysubscribe`
微信手Q下的商品预约方法。
与qqgoodsbook基本一样(微信后来的接口不用再跳wx授权通道了)。具体用法参见示例代码:
halo.use('goodsbook',function(m){
m.goodsbook(
skuid:'1554893', //预约商品skuid
usersource:1, //表示预约源, 1代表微信场景 2代表手Q场景。如不填,组件会自动检测环境
skuimg:'jfs/t544/87db1N818b93df.jpg', //预约商品图片地址 - 即到时提醒时显示的小图片
cosspresaleid:'0', //coss创建的活动ID, 如无填0
globalpresaleid:'37674', //该预约商品在北京创建的活动ID,这个一定有
salestarttime:' 10:08:00', //开始抢购时间, 年月日格式
skuAmount:'1499.00', //商品价格
function(json){
@ret=json.
@有三个值: 0 - 已经预约 1 - 未预约 2 - 部分商品未预约(可以查询list数组) 13 - 未登录(直接使用报文错误码) -1 - 查询失败
@list=json.list - 返回的商品预约结果列表
if(0==json.ret){
alert('预约成功');
alert('预约失败');
skuid,cosspresaleid,globalpresaleid,salestarttime这四个是预约的必选参数。不过,往往我们只能拿到 skuid。其它三个值拿不到。其实,其它三个值可以用以下接口取到:
/bases/presalesku/querypresalesku?callback=yushouWGCB&skuid=1324046
把1324046改成实际的skuid就可以了
返回的结果中:start_time就是salestarttime,global_presale_id就是globalpresaleid,presale_id就是cosspresaleid
接口可见:/ci.php/api/#id=20273
依赖方法:`jsonp`,`g_tk`,`querysubscribe`
querypresalesku
通过skuid查询微信手Q下预约商品的三个关键参数:cosspresaleid,globalpresaleid,salestarttime。
为配合mgoodsbook和goodsbook方法,本方法返回的值为数组形式:[skuid,cosspresaleid,globalpresaleid,salestarttime]。具体用法参见示例代码:
halo.use('cookie','g_tk','querypresalesku', 'jsonp', function(m) {
m.querypresalesku('1554893',function(arr){
if(arr.length){
//返回成功
依赖方法'cookie','g_tk','jsonp',在使用此方法前记use上。
实时获取当前的g_tk值。
必须依赖`cookie`组件,具体使用如下:
halo.use('cookie','g_tk', function(m) {
var g_tk=m.g_tk();
console.log(g_tk);//获取到g_tk值
querysubscribe
查询商品预约结果。(mgoodsbook与goodsbook是依赖它来实现无刷新预约的)
必须依赖`jsonp`,具体介绍看js代码如下:
halo.use('jsonp','querysubscribe',function(m){
m.querysubscribe(
//[globalpresaleid,skuid]
['36946','1554893'],
['37674','1196255']
function(json){
var ret=json.errNo;
if('13'==ret){
alert("对不起,您还未登录");
}else if('0'!=ret){
alert("对不起,查询失败");
alert("查询成功,结果请看console.log结果");
console.log(json);
返回报文如下:
psCallback(
errNo:"0", //错误码: 0 - 查询成功 13 - 未登录 其它 - 查询失败
errMsg:"",
urlRedirect:"",
appId:"wxae3e8056daea8727",
wgSkey:"",
pin:"wdhtCairIGBAzO",
subscribeResultList:[//商品列表
activeId:"21068",
skuId:"1008043",
subscribeResult:"0"//上面的activeId和skuId对应的商品的预约结果: 0 - 成功 1 - 失败
{activeId:"2",skuId:"2",subscribeResult:"1"}
通用数据提交(万金油数据保存接口)
必须依赖`jsonp`,具体介绍看js代码如下:
halo.use('jsonp','datasave',function(m){
m.datasave(
biztype:'halowglogin',
msgcontent:'我做的测试数据',
platform:2 //表示环境来源 1 - 手Q 2 - 微信
如果不传这个参数,datasave会自动检测当前环境
function(json){
var ret=json.iR//0 - 成功 9999 - 未登录 其它 - 失败
if('0'==ret){
alert("提交成功,有"+json.iTotalNum+"人提交了数据");
}else if('9999'==ret){
alert("请登录");
alert("提交失败");
考虑到,一个页面调用保存数据的地方可以不止一个,如果每次都要把所有参数都写全,有点多余。于是,`datasave`就有了另外的使用方法:
//通过set来配置biztype、platform和msgcontent
m.datasave.set({
biztype:'halowglogin',
msgcontent:'我做的测试数据'//在配置基础信息时,这个参数可以不传
//在需要保证数据的地方,调用m.datasave(msgcontent,cb);即可
m.datasave('我做的测试数据2222',function(json){
var ret=json.iR
if('0'==ret){
alert("提交成功,有"+json.iTotalNum+"人提交了数据");
}else if('9999'==ret){
alert("请登录");
alert("提交失败");
通用数据查询(万金油数据查询接口)
必须依赖`jsonp`,具体介绍看js代码如下:
halo.use('jsonp','dataquery',function(m){
m.dataquery(
biztype:'halowglogin'
function(json){
@ 返回的报文中,iTotalNum表示提交数据的总人数(按biztype计算)
@ sMsgContent 当前用户提交的信息
var ret=json.iR
if('0'==ret){
alert("查询成功!一共有"+json.iTotalNum+"人提交了数据。\n你上次提交的数据是:\n"+json.sMsgContent);
}else if('9999'==ret){
alert("请登录");
alert("提交失败");
考虑到,一个页面调用保存数据的地方可以不止一个,如果每次都要把所有参数都写全,有点多余。于是,`dataquery`就有了另外的使用方法:
//统一配置biztype
m.dataquery.set({
biztype:'halowglogin'
//在需要查询的地方调用
m.dataquery(function(json){
var ret=json.iR
if('0'==ret){
alert("查询成功!一共有"+json.iTotalNum+"人提交了数据。\n你上次提交的数据是:\n"+json.sMsgContent);
}else if('9999'==ret){
alert("请登录");
alert("提交失败");
fetchcoupon
领取优惠券方法
必须依赖`jsonp`,具体介绍看js代码如下:
halo.use('jsonp','fetchcoupon',function(m){
@ active_name - 优惠券的活动名称
@ level - 券的等级。一般为:0,1,2,.... 等数字
m.fetchcoupon("active_name","level",function(json){
//回调成功
var ret=json.
if(0==ret){
//领券成功
alertBox("恭喜,您领券成功!",[
text:'立即抢货'
}else if(2==ret){
location.hash='fetch!'+active+'!'+
m.wglogin();
}else if(ret>=3&&ret<=6){
//已经领过券了
alertBox("抱歉,您已经领取过了!");
}else if(7==ret){
//优惠券已经派完了
alertBox("抱歉,活动太火爆了,优惠券已发放完了!");
}else if(101==ret){
//活动不存在
alertBox("抱歉,活动不存在!");
}else if(103==ret){
//活动未开始
alertBox("抱歉,活动未开始!");
}else if(104==ret){
//活动已经结束
alertBox("抱歉,活动已经结束!");
//系统报错
alertBox("抱歉,活动太火爆!系统返回繁忙,请稍候再试。");
m.msgbox.loading.hide();
考虑到,领券的活动形式的多样化,领券参数也需要有扩展。所以fetchcoupon方法也可按如下方式调用
halo.use('jsonp','fetchcoupon',function(m){
@ active_name - 优惠券的活动名称
@ level - 券的等级。一般为:0,1,2,.... 等数字
m.fetchcoupon(
active: "active_name",
level: "level",
apiUrl: "/active/active_draw",//这个参数比较特殊,可以更改api的url。默认领取优惠券接口的url是: /active/active_draw
cb: function(json){
//回调成功
var ret=json.
if(0==ret){
//领券成功
alertBox("恭喜,您领券成功!",[
text:'立即抢货'
}else if(2==ret){
location.hash='fetch!'+active+'!'+
m.wglogin();
}else if(ret>=3&&ret<=6){
//已经领过券了
alertBox("抱歉,您已经领取过了!");
}else if(7==ret){
//优惠券已经派完了
alertBox("抱歉,活动太火爆了,优惠券已发放完了!");
}else if(101==ret){
//活动不存在
alertBox("抱歉,活动不存在!");
}else if(103==ret){
//活动未开始
alertBox("抱歉,活动未开始!");
}else if(104==ret){
//活动已经结束
alertBox("抱歉,活动已经结束!");
//系统报错
alertBox("抱歉,活动太火爆!系统返回繁忙,请稍候再试。");
m.msgbox.loading.hide();
querybindingstauts
检查当前帐号的京东帐号绑定情况
必须依赖`jsonp`,具体介绍看js代码如下:
m.querybindingstauts(
rurl: location.href, //绑定/切换京东帐号后的返回地址
function(json){
@ json.state == 0: 当前为京东pin
@ json.state == 1: 当前为非正式pin、有资产
@ json.state == 2: 当前为非正式pin,无资产,或者无pin ---- 这个状态是新用户
@ json.state == 3: 当前为非正式pin,可切换到正式pin(用户存在多个pin)
@ json.errcode == 0 : 正确
@ json.errcode == 1001 : 未登录
@ json.errcode !=0 : 未知错误
@ json.url 如果state!=0,打开这个链接用户可以绑定/切换京东帐号。操作成功后可以正常返回当前页面
@ json.pin 当前帐号的pin
getwxjsapisign
获取当前url下的签名信息。在获取到签名后才能调用微信的各种接口,详情可以查看
必须依赖`jsonp`,具体介绍看js代码如下:
halo.use("jsonp","getwxjsapisign",function(m){
m.getwxjsapisign(function(obj){
console.log(obj);
//返回的对象obj是如下信息:
errCode:"0",
errMsg:"",
appId:"wxae3e8056daea8727",//的appid。这个appid是固定的,可以用于其它需要appid的地方
timestamp:"",//签名的时间戳 - 有效期为:7200s
nonceStr:"",//生成签名的随机串
signature:"badd9bddc",//签名
jsapi_ticket:""
在网页中打开APP应用
在微信与手Q可以判断当前用户是否安装了APP。安卓原生浏览器也可以模拟判断出这个操作。IOS的safari只能通过打开app_store的方式来引导用户打开APP。(要不然只能强制使用scheme尝试打开,打不开会有弹窗提示)
m.openapp(
packageName: "com.jingdong.app.mall", -- android对应的packagename
scheme: "openApp.jdMobile://", -- ios使用的scheme(其实android也会用这个)
downloadUrl:'http://h5./active/download/download.html?channel=jd-shhd3',//通用下载地址,有时候有些下载需要做统计,会使用这个参数
downloadAndroid:'http://a./o/simple.jsp?pkgname=com.jingdong.app.mall&g_f=991850',//安卓的下载地址
downloadIOS:'/cn/app/id'//ios的app_store地址
@ downloadUrl是否必选项。如果是分系统下载应该可以忽略这个参数。如果需要做下载统计,那么这个选项可能会被使用
numberscroll
数字滚动,模拟老虎机滚动的方式做成的组件,可以按情况定制。
语法:var NUMBERS=numbers(arg);
arg对象说明:
可选,int,数字滚动的圈数,默认3圈
可选,int,滚动时间(单位s),默认1s
可选,string,滚动方向,有三个值可选:up,down,alternate。默认是 alternate
可选,int,滚动顺序。目前有两个值:0和1; 1 表示从左到右, 0 表示从右到左;默认是1。
可选,int,分组滚动参数。默认为1,表示单个数字为一组(其实就是不分组)。
可选,float,组之间的时间延迟,单位为s。默认为.3s
diffrentiation
可选,boolean,差异化滚动,用于二次滚动时,是否全数字滚动还是对比后数字有变化的滚动。默认是true
可选,string,强制无差异化匹配 ^ooxx 表示开头第3,4为无差异化滚动 xxx$ 表示倒数的后三们为无差异滚动
在需要使用数字滚动的容器元素中添加一个叫HALO-NUMBER-SCROLL的属性值,并在容器内添加&input type="hidden" value="" /&做为容器的第一个元素。如下:
&div class="numbers" HALO-NUMBER-SCROLL&
&input type="hidden" value="103450" /&
简单的用法如下:
&body ontouchstart&
&div class="numbers" HALO-NUMBER-SCROLL&
&input type="hidden" value="" /&
&script type="text/javascript" src="/js/halo/halo.15.01.js"&&/script&
&script type="text/javascript"&
halo.use("numberscroll",function(m){
var NUMBERS=m.numberscroll();
NUMBERS.scroll();//开始滚动
可通过`set`方法,对`numberscroll`进行后期配置。参数与`arg`同,如下 :
NUMBERS.set(
round:3,//默认三圈
duration: 1,//默认1s
direction: 'alternate',//方向,有三个值,up,down,alternate。默认是alternate
l2r:1,//滚动顺序,如果为1表示 从左到右 如果为0表示 从右到左
delay: .3,//组之间的时间延迟,默认.3s
groupNum:2,//默认2个一组
diffrentiation:1,//差异化滚动,默认是差异化滚动
undreg:'^xxx'//强制无差异化匹配 ^ooxx 表示开头第3,4为无差异化滚动 xxx$ 表示倒数的后三们为无差异滚动
NUMBERS.scroll();
有时候,一个页面内有多个数字滚动,并且每个滚动的具体定制不同,无法统一通过 `.set(args)`来完成。numberscroller组件可以通过数字滚动容器的属性来完成单独定制。如下:
&div class="dataCounter" HALO-NUMBER-SCROLL diffrentiation="1" undreg="xxx$" l2r="1"&
&input type="hidden" value="" /&
&div class="dataCounter" HALO-NUMBER-SCROLL diffrentiation="1" undreg="xxx$" l2r="0"&
&input type="hidden" value="" /&
窗口的属性名与定制对象的成员名一致!!
具体使用方式,可以查看 DEMO:
浏览器:android 2.3.x~4.x/ios6~7/pc chrome/pc firefox/pc ie10
*目前封装了14个定制事件,供on,off方法调用。提供了一个新方法m.trigger,用于触发原生事件和定制事件
trigger语法:m.trigger(DOM,eventName);
DOM节点,必选,触发事件的接收对象
string,必选,事件名字,如touchstart,touchend
自定义事件如下:
相当于 click 事件,却比 click 事件更高效。
fingermove
超过指定偏量的touchmove(与touchmove几乎一样)。可以通过uievent.setFingerMove(x,y);来设置最小偏移量。PS:使用fingermove默认会执行e.preventDefault();
touchmove 后的 touchend。
forcerelease
touchmove 后的 touchcancel。
手指长按事件
gesture_left
手势向左滑
gesture_right
手势向右滑
gesture_up
手势向上滑
gesture_down
手势向下滑
transitionend
transition动画补间执行结束
animationend
animation播放结束
animationstart
animation开始播放
animationiteration
animation完成一次播放(就用于动画播放多次的场景)
halo.use('uievent',function(m){
m.on(document.body,'hold',function(e){
竖屏浏览引导屏
浏览器:android 2.3.x~4.x/ios6~7/pc chrome/pc firefox/pc ie10
use warn 后,warn 模块就可以直接工作,考虑到不同页面背景的不一致,所以 warn 模块提供了set方法来改变页面,如下:
m.warn.set(background,icon,text);
background
可选,string 类型,背景颜色/背景。
可选,string 类型,icon 图片地址
可选,string 类型,警告文字。
m.warn.set('#300');//背景为砖红色
//如果是背景图片就应该是
//m.warn.set('url(../images/xx.jpg)');
通用消息窗口。
浏览器:android 2.3.x~4.x/ios6~7/pc chrome/pc firefox/pc ie10
方法,弹出消息框,并返回弹出窗口的 DOM 对象,以借hide方法使用。
方法,移除指定的消息框。
属性,加载过度对象。
msgbox.show 语法如下:
m.msgbox.show(text,btn1,btn2,close);
必选,string 类型,显示的文本信息。
可选,object 类型,按钮对象{text,callback,close}
必选,string,按钮的显示文本
可选,function,点击按钮的回调函数
可选,string,按钮文本颜色
可选,boolean,点击按钮后是否自动关闭消息框,默认true
可选,boolean 类型,是否显示右上角的“关闭X按钮” ,默认为false
m.msgbox.show 会返回一个 DOM 对象,可供hide方法调用。
msgbox.hide 语法如下:
m.msgbox.hide(dom);
必选,object 类型(DOM节点),指定被移动的DOM。
* 因为 msgbox.show 支持多框并存,所以 msgbox.hide 需要指定是哪个窗口才可以正常关闭弹窗。不过,正常情况下,msgbox.hide 被调用的机会很少。因为 msgbox.show 的按钮自带有关闭功能。
halo.use('msgbox',function(m){
m.msgbox.show('测试弹窗',{text:'确定',cb:function(){},color:'#C72A26'});//一个按钮
m.msgbox..show(
'两个按钮弹窗确定按钮不可关闭',
{text:'确定',cb:function(){alert('点取消试试')},color:'#C72A26',close:false},
{text:'取消'}
m.msgbox.show('这是没有关闭按钮的弹层');
m.msgbox.show(
'测试弹窗,没有关闭按钮',
{text:'确定',cb:function(){alert('close表示按钮要不要关闭');},color:'#C72A26',close:false},
);//带按钮,不带关闭的弹出窗
m.msgbox.loading 对象
方法,显示 loading 过渡框,语法如下:
m.msgbox.loading(text,bgcolor);
可选,string,过渡框显示文字(5个字以内)
可选,boolean,显示背景颜色,默认为true
方法,移动loading过渡框。
halo.use('msgbox',function(m){
m.msgbox.loading.show('努力加载中');
setTimeout(function(){m.msgbox.loading.hide();},2000);
DEMO:点击查看
通用活动弹出窗
浏览器:android 2.3.x~4.x/ios6~7/pc chrome/pc firefox/pc ie9+
actbox内置三个成员,详情如下:
object 类型,用于配置弹出窗的各种ui属性,对于弹窗来说config是一个全局的配置。
function 类型,显示弹窗
function 类型,隐藏弹窗
config 成员列表如下 :
maskBackgroundColor
backgroundColor
弹出提示窗口的背景颜色
borderRadius
弹出提示窗口的圆角值
inputColor
输入框字体颜色
inputBackgroundColor
输入框背景颜色
inputBorderWidth
输入框的边框宽度
inputBorderRadius
输入框的边框圆角
inputTextAlign
输入框的对齐颜色
inputBorderColor
输入框背景颜色
inputBorderStyle
输入框边框样式
buttonColor
按钮字体颜色
buttonBackgroundColor
按钮背景颜色
buttonBorderRadius
按钮圆角值
checkBorderRadius
复选框圆角值
checkBorderWidth
复选框边框宽度
checkBorderStyle
复选框边框样式
checkedColor
复选框选中颜色
checkBorderColor
复选框边框颜色
checkBackgroundColor
复选框背景颜色
radioBorderRadius
单选框圆角值
radioBorderWidth
单选框边框宽度
radioBorderStyle
单选框边框样式
radioColor
单选框选中颜色
radioBorderColor
单选框边框颜色
radioBackgroundColor
单选框背景颜色
closerColor
关闭按钮的颜色
m.actbox.config.closerColor='#f00';
m.actbox.config.checkedColor='#000';
m.actbox.show({
//title:'iPhone 6首发订阅提醒',
label:'手机号码:',
input:[{text:'',placeHolder:'手机号码(移动/联通/电信)'}],
checkbox:[
{before:'提醒活动:',after:'全选',type:'checkAll'},
//{before:'提醒活动:',type:'none'},
{after:'三星NOTE 4 9.0首发活动时间:8.03 - 8.10',checked:true},
{after:'三星NOTE 4 9.0首发活动时间:8.03 - 8.10'},
{after:'三星NOTE 4 9.0首发活动时间:8.03 - 8.10'}
text:'&span style="color:rgba(255,255,255,.5); font-size:12"&我们将在活动前一天提醒您!&/span&',
button:[{text:'提交信息抽取免单',cb:function(form){
if(form[0]==''){
alert('手机号码不能为空!');
}else if(!/^1[0-9]{10}$/.test(form[0])){
alert('手机格式不正确');
var nocheck=
for(var i=1;i&form.++i){
if(form[i]){nocheck=}
if(nocheck){
alert('请选择一个项');
this.hide();
},close:false,color:'',bgcolor:''}]
show 语法如下:
m.actbox.show(arg);
arg,object 类型,表示弹窗要需要显示的 ui 控件,具体如下:
string 类型,可选,窗体的顶部抬头
string 类型,可选,说明内容。一般与 input 同时出现
Array 类型,可选,输入框列表,是一个 object 数组:
[{text:string,placeHolder:string},{text:string,placeHolder:string},...]。
string 类型,必选,输入框的value
placeHolder
string 类型,必选,输入框的placehoder内容
Array 类型,可选,多选框列表,是一个 object 数组:
[{before:'string',after:'string',checked:boolean,type:'string'},{before:'string',after:'string',checked:boolean,type:'string'},...]。
string 类型,可选,复选框前面的文字
string 类型,可选,复选框后面的文字
boolean 类型,可选,默认是false,复选框是否选中
string 类型,可选,表示复选框的类型;有三个类型:normal, none, checkAll。
默认值是normal,即表示普通的复选框;
none,表示不显示复选框;
checkAll,所有的复选框与这个checkAll类型的复选框的checked状态一致。
before 与 after 的关系可以看下图:
Array 类型,可选,单选框列表,是一个 object 数组:
[{before:'string',after:'string',checked:boolean,type:'string'},{before:'string',after:'string',checked:boolean,type:'string'},...]。
string类型,可选,复选框前面的文字
string类型,可选,复选框后面的文字
boolean类型,可选,默认是false,复选框是否选中
string 类型,可选,表示复选框的类型;有两个类型:normal, none
默认值是normal,即表示普通的复选框;
none表示不显示复选框
string 类型,可选,文本消息内容
Array 类型,可选,是一个 object 数组:
[{text:'strinig',cb:function,close:boolean,color:'string',bgcolor:'string'},{text:'strinig',cb:function,close:boolean,color:'string',bgcolor:'string'},{text:'strinig',cb:function,close:boolean,color:'string',bgcolor:'string'}...]
string 类型,必选,按钮显示的文本
function 类型,可选,按钮点击后回调;
如果是带输入框或radio/checkbox框的弹窗,
cb会收到一个form数组,会将弹窗的所有输入框的value和选项框的checked返回,如下图:
此时,点按钮,cb接收到的form将会是:['',false,true,false,false];
弹出窗体的ui组件,会按上面列表的顺序从上到下显示。
如果 use cookie 的话,actbox 的输入框会自动调用历史窗口。如下图
DEMO:点击查看
开发者可以直接进入定制窗口页:
分享引导层
浏览器:android 2.3.x~4.x/ios6~7/pc chrome/pc firefox/pc ie9+
语法如下:
m.sharetips(text);
可选,string 类型,默认值'请点击右上角&br&通过 【发送给朋友】功能&br&把好消息告诉小伙伴哟~'
halo.use('sharetips',function(m){
//m.msgbox.loading.show('测试的文字');
m.sharetips();
DEMO:点击查看
浏览器:android 2.3.x~4.x/ios6~7/pc chrome/pc firefox/pc ie10
语法:m.imgplayer(DOM,motion,showNumlist);
DOM 对象,必选,img图片的窗口节点。
string,可选,图片轮播时的方向,只能传两个值X/Y代表轮播方向,默认为X。
showNumlist
boolean,可选,是否显示图片位置列表,默认显示
imgplayer绑定容器后,有返回对象。返回对象的成员具体如下:
方法,将轮播定位到指定索引的位置。
move(number);
属性,是否自动轮播。boolean,默认为true;
属性,number 类型,表示图片停止不动的等待时长(毫秒值)。
虚拟事件方法,function,表示 imgplayer 正在被手指拖曳时的动作。
语法:player.ondrag=function(offset,cur,pre){...};
float类型,手指位移距离
number,当前图片的索引
number,将要滑进的图片的索引
虚拟事件方法,function,implayer 完成一次图片切换时触发。
语法:player.onchange=function(c,n){...};
int 类型,滑出页面索引
int 类型,滑进页面索引
虚拟事件方法,function,手指滑动后松开的动作。
语法:player.onrelease=function(restore,cur,pre){...}
boolean,图片是否恢复原来位置(即手指移动距离过短,图片被回弹)
int,滑出页面索引
int,滑入页面索引
halo.use('uievent','imgplayer','css',function(m){
var player=m.imgplayer(banner,'X');
*虽然叫 imgplayer,但是实际用途不止于图片播放,也可以用作区域的 tab 切换。
tab组件,支持fix 事件绑定
语法:m.mtab({
必选,string选择器
必选,tab item选择器:在 holder dom 下查找
可选,tab body 选择器 需要切换的内容dom list
可选,true则激活 fixed 效果 (默认:false) ------
如果参数类型是 string 则 修改fixed 的class 名 (默认:fixed)
可选,选中态 class 名 (默认:cur)
halo.use('uievent','mtab',function(m){
var Tab = m.mtab({
holder : '#J_page_tab',
: '.tab_item',
//tab item class
: '#J_holder .tab_con'
//内容 dom
//是否吸顶
// 设置 tab 回调 点击后触发
Tab.set_action({
//切换前触发
: function(e){
console.log('data', e);
//切换后触发
: function(e){
console.log('data', e);
可实现多种形式的区域滚动。
浏览器:android 2.3.x~4.x/ios6~7/pc chrome
Scontainer
参数,滚动区域的class。
{String} className ".className"
参数,是否开启横向滚屏。
参数,是否开启纵向滚屏。
参数,是否开启缓冲。
参数,是否可超出边界。
参数,是否充满容器。
scrollBefore
参数,滚动开始的回调方法。
@param {Object} this
参数,滚动完成的回调方法。
@param {Object} this
参数,滚动时的回调方法。
@param {Object} this
halo.use('lazyloader',function(m){
new m.yscroll({
Scontainer : '.container',//区域滚动class
hScroll : false, // 是否开启横向滚动
vScroll : false, // 是否开启纵向滚动
momentum : false, //是否开启缓冲效果
bounce : false, //是否可超出边界
snap : true //是否充满容器
scrollBefore : function(){
//TODO 滚动开始的回调
scrollEnd : function(){
//TODO 滚动结束的回调
onScroll : function(){
//TODO 滚动中的回调
android 2.3.x 以下的非 body 元素滚动解决模块,同时也可以做通用滚动模块使用,以提升 ios 和 android 4.x 下的非 body 滚动效果。
语法:m.ezscroll.bind(DOM,showScroll);
必选,指定带滚动的节点。
showScroll
可选,boolean 类型。是否显示滚动条,默认为false
halo.use('ezscroll',function(m){
m.ezscroll.bind(document.getElementById('container'),true);
ezscroll 在低端机子下相较于 iscroll 事插件,ezscroll 使用方便并且 ezscroll 不用要求绑定容器定宽高。android 4.0x 系列机型下,ezscroll 自动降级成原生滚动,因为 android 4.0x 不支持 js 直接操作 scrollTop 属性
分页加载插件:当加载的json dom 数据比较多,希望做到分页加载。 如: cpc mcoss json 数据。 支持 多数据源(如有个tab,每个tab都希望分页加载)
语法:var P = m.lazyshow();
必选,指定外容器 可以 传入dom 节点,或者用 string 选择器(推荐)
必选,希望被分页的list数组array
可选,滚动触发的dom名(一搬是load节点)
-- 默认是:
可选,新数据html append 的 list dom : 默认是:
可选,每次滚动到底部的时候触发一次 回调,function 用于插入下一页的dom
s.loader || null,
// loading dom 用语判断的位置
s.body || null,
// 内容 节点
s.callback || null,
// 默认是 0 当前加载了几页
s.num || 10,
//每页显示的个数 (默认:10)
// 是否最后
halo.use( 'lazyshow' , function(m){
//滚动回调 单数据源调用的时候 会自动调用一次 for 第一页显示
var call_data = function(d){
//d 的详细见上面参数说明
//可以在这里处理数据
//单数据的使用
var P = m.lazyshow({
: '#J_holder',
// 外容器 Dom 可用 string or dom
//设置 数据。
//每页显示的个数 (默认:10)。
trigger : '.loading',
// load 的 class
: '.pro_list',
// list 的 class
: call_data
// 回调 func
//多数据的使用
如:多Tab 需要分页加载
var PM = m.lazyshow();
//新的一个实例
PM.push_data({
// 数据id 默认是 0
: '#J_holder',
// 外容器 Dom
: data[1],
//设置 数据。
//每页显示的个数 (默认:10)。
trigger : '.loading',
// load 的 class
: '.pro_list',
// list 的 class
: call_data
PM.push_data({
// 数据id 默认是 0
: '#J_holder_2',
// 外容器 Dom
: data[2],
// 设置 数据。
// 每页显示的个数 (默认:10)。
trigger : '.loading',
// load 的 class
: '.pro_list',
// list 的 class
: call_data
PM.switch_data(0);
//切换数据 切换到自己想要的数据
textmarquee
文字走马灯效果。
浏览器:android 2.3.x~4.x/ios6~7/pc chrome
语法:m.textmarquee(speed);
在需要走马灯效果的节点上添加一个属性HALO-TEXT-MARQUEE,即可。如:
&div HALO-TEXT-MARQUEE class="marquee"&
xxxx已经获得免单 ! xxxx已经获得免单 !xxxx已经获得免单 !yyyy已经获得免单 ! yyyy已经获得免单 !yyyy已经获得免单 !xxxx已经获得免单 ! xxxx已经获得免单 !xxxx已经获得免单 !
可选,number, 滚动的速度,默认为50表示50px/s。
halo.use('textmarquee',function(m){
m.textmarquee();
将一些移动端的 hack 问题封闭成一个组件,直接引用即可以解决对应的 bug
ios7weixin6hack
解决 ios7 微信6.0 版本下 webview 高度的 bug,适用于轻 app 交互(即翻页组件一起使用)。
浏览器:android 2.3.x~4.x/ios6~7/pc chrome
使用方法:引用即可,可以不依赖 halo.js 引用
halo.use('ios7weixin6hack',function(m){
//这样就可以了
解决 mi3 长动画阻塞的 hack (也可以有其它型号的 android 机子也有这种 bug)。
浏览器:android 2.3.x~4.x/ios6~7/pc chrome
使用方法:引用即可,可以不依赖 halo.js 引用
halo.use('mi3hack',function(m){
//这样就可以了
mi3 下,长动画会造成阻塞。造成翻页后,第二次的动画要等待上一面的动画结束后才进入页面播放。
androidweixinfonthack
解决安卓微信被用户调整字体大小后显示的bug。
浏览器:android 微信的内置浏览器
语法:m.androidweixinfonthack(base);
可选,int,表示当前页面的root的font-size(以px为准),没有传就表示不是使用rem做页面,会自动降级成引导层。
语法2:m.androidweixinfonthack.always(ms); 表示对页面进行实时监听字体情况。建议不开启监听,一是比较资源,二是开启后的意义不大。
可选,number,监听页面字体情况的频度,单位为ms。默认是2000ms;
使用前提:使用rem作为字体和行高的单位,并且html{font-size: 62.5%;}。如果不符合,可以使用组合的降级引导功能。
后台数据组件
获取JD相关后台数据接口
获取卖快商品列表
浏览器:android 2.3.x~4.x/ios6~7/pc chrome
使用方法:依赖 halo.util, halo.jsonp
halo.use('util' ,'jsonp', 'mcoss', function(m){
actid: '34789',
areaid:']'
}).done(function(data){
获取JD相关后台数据接口
浏览器:android 2.3.x~4.x/ios6~7/pc chrome
使用方法:依赖 halo.util, halo.jsonp
halo.use('util' ,'jsonp', 'cpc', function(m){
gids: '2163',
}).done(function(data){
prepublish
预发布扩展。
使用方法:m.prepublish();
原理:借道实现测试环境下调用正式环境的接口。注意点,调用m.prepublish();调用要在m.qqshare和m.weixinshare之前!
目前支持的接口仅有m.qqshare和m.weixinshare

我要回帖

更多关于 需求文档全局说明 的文章

 

随机推荐