until.fixbar 方法优化

分享 未结 0 84
Hide
Hide 2019-8-29
悬赏:20飞吻
fixbar: function (options) {
var ELEM = 'layui-fixbar'
, dom = $(document)
, body = $('body')
, is
, timer
, defaults = {
showHeight: 200 //出现TOP的滚动条高度临界值
//, bgcolor: "#393D49"
, topBar: { type: 'top',pclass:'layui-icon layui-icon-top layui-fixbar-top'}//返回顶部,不显示则 设置false
, bars: []
};

$.extend(defaults, options);

defaults.bgcolor = defaults.bgcolor ? ('background-color:' + defaults.bgcolor) : '';
var bars = [];
if (defaults.topBar) { defaults.bars.push(defaults.topBar);}

$(defaults.bars).each(function (_i, _bar) {
bars.push('<li class="' + (_bar.pclass||'')+'" lay-type="' + _bar.type + '" style="' + defaults.bgcolor + '">' + (_bar.icon||'') + '</li>');
});

var elem = $(['<ul class="' + ELEM + '">'
, bars.join('')
, '</ul>'].join(''))
, topBar = elem.find("[lay-type='top']")
, scroll = function () {
if (!defaults.topBar) { return;}
var stop = dom.scrollTop();
if (stop >= (defaults.showHeight)) {
is || (topBar.show(), is = 1);
} else {
is && (topBar.hide(), is = 0);
}
};
if ($('.' + ELEM)[0]) return;

typeof defaults.css === 'object' && elem.css(defaults.css);
body.append(elem), scroll();

//bar点击事件
elem.find('li').on('click', function () {
var othis = $(this), type = othis.attr('lay-type');
if (type === 'top')
{
$('html,body').animate({
scrollTop: 0
}, 200);
}
defaults.click && defaults.click.call(this, type);
});

elem.find('li').on('mouseenter', function () {
var othis = $(this), type = othis.attr('lay-type');
defaults.mouseenter && defaults.mouseenter.call(this, type);
});

elem.find('li').on('mouseleave', function () {
var othis = $(this), type = othis.attr('lay-type');
defaults.mouseleave && defaults.mouseleave.call(this, type);
});

//Top显示控制

//@!!!!!@ ----------------------此处 修复/优化了原先layui 框架的一个bug, dom 改为 window ,否则ie8不兼容

$(window).on('scroll', function () {
clearTimeout(timer);
timer = setTimeout(function () {
scroll();
}, 100);
});
}
简单介绍:options配置变动情况


options={
//其他配置未变
topBar:obect类型, //新增,默认开启,如果想不显示,就填写 false
bars:[],//新增图标库,不限制数量 {type:"自定义type",pclass:"本元素根节点class",icon:"自定义图标/具体内容,可以选用pclass直接配置图标,也可以在此内容配置个性化内容"}
mouseenter:function(type){},//新增mouseenter事件,用法参数与click事件类似 可以利用此事件触发tips事件
mouseleave:function(type){},//新增mouseleave事件,用法参数与click事件类似
}
代码示例:


util.fixbar({
bars: [{type:"test",icon:"<i class='layui-icon layui-icon-cellphone'></i>"},{type:"test2",icon:"<i class='layui-icon layui-icon-rate-half'></i>"},{type:"custom2",icon:"<i class='layui-icon layui-icon-rate-half'></i>"},{type:"custom",icon:"<i class='layui-icon layui-icon-rate-half'></i>",{type:"custom3",icon:"<i class='layui-icon layui-icon-rate-half'></i>"}}]// type是自定义,这里怎么传,click返回的也是对应的类型
, click: function (type)
{
var $this=$(this);
switch(type){
case "test1":
break;
case "test2":
break;
case "custom1":
break;
case "custom2":
break;
case "custom3":
break;
}
layer.msg(type+"触发了click事件");
}
//鼠标移入事件,可以利用此方法触发 tips
, mouseenter: function (type) {
var $this=$(this);
switch(type){
case "test1":
break;
case "test2":
break;
case "custom1":
break;
case "custom2":
break;
case "custom3":
break;
}
layer.tips(type+"触发了mouseenter事件", $this, {
tips: [4, '#5a8bff']
});
}
, mouseleave: function (type) {
switch(type){
case "test1":
break;
case "test2":
break;
case "custom1":
break;
case "custom2":
break;
case "custom3":
break;
}
}
});
代码实例:


截取部分效果图:
回帖
  • 消灭零回复