mirror of https://github.com/layui/layui
重构 util.fixbar 组件
贤心
parent
a23754e2ce
commit
7b9aa2cdc2
|
|
@ -3,7 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||||
<title>工具集 - layui</title>
|
<title>util 组件 - layui</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../src/css/layui.css">
|
<link rel="stylesheet" href="../src/css/layui.css">
|
||||||
|
|
||||||
|
|
@ -31,19 +31,53 @@ body{padding: 50px;}
|
||||||
|
|
||||||
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
|
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
|
||||||
|
|
||||||
|
<div id="target-test"></div>
|
||||||
|
|
||||||
<script src="../src/layui.js"></script>
|
<script src="../src/layui.js"></script>
|
||||||
<script>
|
<script>
|
||||||
layui.use('util', function(){
|
layui.use(['util', 'layer'], function(){
|
||||||
var util = layui.util
|
var $ = layui.$;
|
||||||
,$ = layui.$;
|
var util = layui.util;
|
||||||
|
var layer = layui.layer;
|
||||||
|
|
||||||
//固定块
|
// 固定块
|
||||||
util.fixbar({
|
util.fixbar({
|
||||||
bar1: true
|
bars: [{ // 定义可显示的 bar 列表信息 -- v2.8.0 新增
|
||||||
,bar2: true
|
type: 'share',
|
||||||
//,css: {right: 100, bottom: 100}
|
icon: 'layui-icon-share'
|
||||||
,click: function(type){
|
}, {
|
||||||
|
type: 'help',
|
||||||
|
icon: 'layui-icon-help'
|
||||||
|
}, {
|
||||||
|
type: 'cart',
|
||||||
|
icon: 'layui-icon-cart',
|
||||||
|
style: 'background-color: #FF5722;'
|
||||||
|
}, {
|
||||||
|
type: 'groups',
|
||||||
|
content: '群',
|
||||||
|
style: 'font-size: 21px;'
|
||||||
|
}],
|
||||||
|
// bar1: true,
|
||||||
|
// bar2: true,
|
||||||
|
// default: false, 是否显示默认的 bar 列表 -- v2.8.0 新增
|
||||||
|
// bgcolor: '#393D52', // bar 的默认背景色
|
||||||
|
// css: {right: 100, bottom: 100},
|
||||||
|
// target: '#target-test', // 插入 fixbar 节点的目标元素选择器
|
||||||
|
on: { // 任意事件 -- v2.8.0 新增
|
||||||
|
mouseenter: function(type){
|
||||||
|
layer.tips(type, this, {
|
||||||
|
tips: 4,
|
||||||
|
fixed: true
|
||||||
|
});
|
||||||
|
},
|
||||||
|
mouseleave: function(type){
|
||||||
|
layer.closeAll('tips');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 点击事件
|
||||||
|
click: function(type){
|
||||||
console.log(this, type);
|
console.log(this, type);
|
||||||
|
// layer.msg(type);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,61 +5,119 @@
|
||||||
layui.define('jquery', function(exports){
|
layui.define('jquery', function(exports){
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
var $ = layui.$
|
var $ = layui.$;
|
||||||
,hint = layui.hint()
|
var hint = layui.hint();
|
||||||
|
|
||||||
//外部接口
|
// 外部接口
|
||||||
,util = {
|
var util = {
|
||||||
//固定块
|
// 固定块
|
||||||
fixbar: function(options){
|
fixbar: function(options){
|
||||||
var ELEM = 'layui-fixbar', TOP_BAR = 'layui-fixbar-top'
|
var ELEM = 'layui-fixbar';
|
||||||
,dom = $(document), body = $('body')
|
var $doc = $(document);
|
||||||
,is, timer;
|
|
||||||
|
|
||||||
options = $.extend({
|
// 默认可选项
|
||||||
showHeight: 200 //出现TOP的滚动条高度临界值
|
options = $.extend(true, {
|
||||||
|
target: 'body', // fixbar 的插入目标选择器
|
||||||
|
bars: [], // bar 信息
|
||||||
|
default: true, // 是否显示默认 bar
|
||||||
|
showHeight: 200 // 出现 top bar 的滚动条高度临界值
|
||||||
}, options);
|
}, options);
|
||||||
|
|
||||||
options.bar1 = options.bar1 === true ? '' : options.bar1;
|
var $target = $(options.target);
|
||||||
options.bar2 = options.bar2 === true ? '' : options.bar2;
|
|
||||||
options.bgcolor = options.bgcolor ? ('background-color:' + options.bgcolor) : '';
|
// 是否提供默认图标
|
||||||
|
if(options.default){
|
||||||
var icon = [options.bar1, options.bar2, ''] //图标：信息、问号、TOP
|
// 兼容旧版本的一些属性
|
||||||
,elem = $(['<ul class="'+ ELEM +'">'
|
if(options.bar1){
|
||||||
,options.bar1 ? '<li class="layui-icon" lay-type="bar1" style="'+ options.bgcolor +'">'+ icon[0] +'</li>' : ''
|
options.bars.push({
|
||||||
,options.bar2 ? '<li class="layui-icon" lay-type="bar2" style="'+ options.bgcolor +'">'+ icon[1] +'</li>' : ''
|
type: 'bar1',
|
||||||
,'<li class="layui-icon '+ TOP_BAR +'" lay-type="top" style="'+ options.bgcolor +'">'+ icon[2] +'</li>'
|
icon: 'layui-icon-chat'
|
||||||
,'</ul>'].join(''))
|
});
|
||||||
,topBar = elem.find('.'+TOP_BAR)
|
|
||||||
,scroll = function(){
|
|
||||||
var stop = dom.scrollTop();
|
|
||||||
if(stop >= (options.showHeight)){
|
|
||||||
is || (topBar.show(), is = 1);
|
|
||||||
} else {
|
|
||||||
is && (topBar.hide(), is = 0);
|
|
||||||
}
|
}
|
||||||
};
|
if(options.bar2){
|
||||||
if($('.'+ ELEM)[0]) return;
|
options.bars.push({
|
||||||
|
type: 'bar2',
|
||||||
typeof options.css === 'object' && elem.css(options.css);
|
icon: 'layui-icon-help'
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
options.click && options.click.call(this, type);
|
// 默认 top bar
|
||||||
|
options.bars.push({
|
||||||
|
type: 'top',
|
||||||
|
icon: 'layui-icon-top'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var elem = $('<ul>').addClass(ELEM);
|
||||||
|
var elemTopBar;
|
||||||
|
|
||||||
|
// 遍历生成 bars 节点
|
||||||
|
layui.each(options.bars, function(i, item){
|
||||||
|
var elemBar = $('<li class="layui-icon">');
|
||||||
|
|
||||||
|
// 设置 bar 相关属性
|
||||||
|
elemBar.addClass(item.icon).attr({
|
||||||
|
'lay-type': item.type,
|
||||||
|
'style': item.style || ('background-color: '+ options.bgcolor)
|
||||||
|
}).html(item.content);
|
||||||
|
|
||||||
|
// bar 点击事件
|
||||||
|
elemBar.on('click', function(){
|
||||||
|
var type = $(this).attr('lay-type');
|
||||||
|
if(type === 'top'){
|
||||||
|
$('html,body').animate({
|
||||||
|
scrollTop : 0
|
||||||
|
}, 200);
|
||||||
|
}
|
||||||
|
typeof options.click === 'function' && options.click.call(this, type);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 自定义任意事件
|
||||||
|
if(layui.type(options.on) === 'object'){
|
||||||
|
layui.each(options.on, function(eventName, callback){
|
||||||
|
elemBar.on(eventName, function(){
|
||||||
|
var type = $(this).attr('lay-type');
|
||||||
|
typeof callback === 'function' && callback.call(this, type);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得 top bar 节点
|
||||||
|
if(item.type === 'top'){
|
||||||
|
elemBar.addClass('layui-fixbar-top');
|
||||||
|
elemTopBar = elemBar;
|
||||||
|
}
|
||||||
|
|
||||||
|
elem.append(elemBar); // 插入 bar 节点
|
||||||
});
|
});
|
||||||
|
|
||||||
//Top显示控制
|
// 若目标元素已存在 fixbar，则移除旧的节点
|
||||||
dom.on('scroll', function(){
|
$target.find('.'+ ELEM).remove();
|
||||||
|
|
||||||
|
// 向目标元素插入 fixbar 节点
|
||||||
|
typeof options.css === 'object' && elem.css(options.css);
|
||||||
|
$target.append(elem);
|
||||||
|
|
||||||
|
// top bar 的显示隐藏
|
||||||
|
if(elemTopBar){
|
||||||
|
var lock;
|
||||||
|
var setTopBar = (function setTopBar(){
|
||||||
|
var top = $doc.scrollTop();
|
||||||
|
if(top >= options.showHeight){
|
||||||
|
lock || (elemTopBar.show(), lock = 1);
|
||||||
|
} else {
|
||||||
|
lock && (elemTopBar.hide(), lock = 0);
|
||||||
|
}
|
||||||
|
return setTopBar;
|
||||||
|
})();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 根据 scrollbar 设置 fixbar 相关状态
|
||||||
|
var timer;
|
||||||
|
$doc.on('scroll', function(){
|
||||||
|
if(!setTopBar) return;
|
||||||
clearTimeout(timer);
|
clearTimeout(timer);
|
||||||
timer = setTimeout(function(){
|
timer = setTimeout(function(){
|
||||||
scroll();
|
setTopBar();
|
||||||
}, 100);
|
}, 100);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue