floraachy/layui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1124 from layui/2.x

Browse Source 
改进 util fixbar 等其他组件
This commit is contained in:
贤心 2022-08-29 12:35:18 +08:00 committed by GitHub
commit 716e753fa1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 190 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
examples/dropdown.html
View File

@ -155,7 +155,10 @@ layui.use('dropdown', function(){
,id: 'demo1' ,id: 'demo1'
//菜单被点击的事件 // 触发点击事件的元素范围 --- default: 仅子菜单触发点击事件（默认，可不填）; all: 所有父子菜单均触发点击事件
,clickScope: 'all'
// 菜单被点击的事件
,click: function(obj){ ,click: function(obj){
console.log(obj); console.log(obj);
} }

2
examples/element.html
View File

@ -93,7 +93,7 @@ body{padding:20px;}
<br><br> <br><br>
<div class="layui-progress" lay-showPercent="true"> <div class="layui-progress" lay-showPercent="true" lay-filter="demo-progress-1">
<div class="layui-progress-bar" lay-percent="1/3"></div> <div class="layui-progress-bar" lay-percent="1/3"></div>
</div> </div>

52
examples/util.html
View File

@ -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);
} }
}); });

12
src/modules/dropdown.js
View File

@ -261,13 +261,15 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
//触发菜单列表事件 //触发菜单列表事件
that.elemView.find('.layui-menu li').on('click', function(e){ that.elemView.find('.layui-menu li').on('click', function(e){
var othis = $(this) var othis = $(this);
,data = othis.data('item') || {} var data = othis.data('item') || {};
,isChild = data.child && data.child.length > 0; var isChild = data.child && data.child.length > 0;
var isClickAllScope = options.clickScope === 'all'; // 是否所有父子菜单均触发点击事件
if(!isChild && data.type !== '-'){ if((!isChild || isClickAllScope) && data.type !== '-'){
that.remove(); isChild || that.remove();
typeof options.click === 'function' && options.click(data, othis); typeof options.click === 'function' && options.click(data, othis);
layui.stope(e);
} }
}); });

51
src/modules/element.js
View File

@ -1,18 +1,18 @@
/** /**
* element 常用元素操作 * element
* MIT Licensed * 常用元素操作组件
*/ */
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();
,device = layui.device() var device = layui.device();
,MOD_NAME = 'element', THIS = 'layui-this', SHOW = 'layui-show' var MOD_NAME = 'element', THIS = 'layui-this', SHOW = 'layui-show';
,Element = function(){ var Element = function(){
this.config = {}; this.config = {};
}; };
@ -82,23 +82,34 @@ layui.define('jquery', function(exports){
}; };
//动态改变进度条 // 动态改变进度条
Element.prototype.progress = function(filter, percent){ Element.prototype.progress = function(filter, percent){
var ELEM = 'layui-progress' var ELEM = 'layui-progress';
,elem = $('.'+ ELEM +'[lay-filter='+ filter +']') var elem = $('.'+ ELEM +'[lay-filter='+ filter +']');
,elemBar = elem.find('.'+ ELEM +'-bar') var elemBar = elem.find('.'+ ELEM +'-bar');
,text = elemBar.find('.'+ ELEM +'-text'); var text = elemBar.find('.'+ ELEM +'-text');
elemBar.css('width', percent).attr('lay-percent', percent);
elemBar.css('width', function(){
return /^.+\/.+$/.test(percent)
? (new Function('return '+ percent)() * 100) + '%'
: percent;
}).attr('lay-percent', percent);
text.text(percent); text.text(percent);
return this; return this;
}; };
var NAV_ELEM = '.layui-nav', NAV_ITEM = 'layui-nav-item', NAV_BAR = 'layui-nav-bar' var NAV_ELEM = '.layui-nav';
,NAV_TREE = 'layui-nav-tree', NAV_CHILD = 'layui-nav-child', NAV_CHILD_C = 'layui-nav-child-c' var NAV_ITEM = 'layui-nav-item';
,NAV_MORE = 'layui-nav-more', NAV_DOWN = 'layui-icon-down', NAV_ANIM = 'layui-anim layui-anim-upbit' var NAV_BAR = 'layui-nav-bar';
var NAV_TREE = 'layui-nav-tree';
var NAV_CHILD = 'layui-nav-child';
var NAV_CHILD_C = 'layui-nav-child-c';
var NAV_MORE = 'layui-nav-more';
var NAV_DOWN = 'layui-icon-down';
var NAV_ANIM = 'layui-anim layui-anim-upbit';
//基础事件体 // 基础事件体
,call = { var call = {
//Tab 点击 //Tab 点击
tabClick: function(e, index, liElem, options){ tabClick: function(e, index, liElem, options){
options = options || {}; options = options || {};
@ -452,7 +463,7 @@ layui.define('jquery', function(exports){
return /^.+\/.+$/.test(percent) return /^.+\/.+$/.test(percent)
? (new Function('return '+ percent)() * 100) + '%' ? (new Function('return '+ percent)() * 100) + '%'
: percent; : percent;
}()); });
if(othis.attr('lay-showPercent')){ if(othis.attr('lay-showPercent')){
setTimeout(function(){ setTimeout(function(){

150
src/modules/util.js
View File

@ -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 ? '&#xe606;' : options.bar1; var $target = $(options.target);
options.bar2 = options.bar2 === true ? '&#xe607;' : options.bar2;
options.bgcolor = options.bgcolor ? ('background-color:' + options.bgcolor) : ''; // 是否提供默认图标
if(options.default){
var icon = [options.bar1, options.bar2, '&#xe604;'] //图标：信息、问号、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);
}); });
} }