18069996051/mixly3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化提交

Browse Source
This commit is contained in:
王立帮
2024-07-19 10:16:00 +08:00
parent 4c7b571f20
commit 4a2d56dcc4
7084 changed files with 741212 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

525
common/ui/layui/extend/loading/index.js Normal file
View File

@@ -0,0 +1,525 @@
layui.config({
version: 'v2.4.3-v1.3',
debug: true,
base: '../js/'
}).extend({
loading: '../loading'
}).use(['jquery', 'colorpicker', 'form', 'element', 'laytpl', 'layedit', 'laydate', 'loading'], function () {
var form = layui.form
, $ = layui.jquery
, layer = layui.layer
, element = layui.element
, laytpl = layui.laytpl
, layedit = layui.layedit
, laydate = layui.laydate
, colorpicker = layui.colorpicker;
var tplLogin
, baseSetting = {
'overlayClassName': '',
'imgClassName': '',
'background': '#fff',
'opacity': 0.6,
'text': '',
'textCss': '',
'textClassName': '',
'title': '',
'offsetTop': 0,
'imgSrc': 0,
'beforeShow': function () { layer.msg('这是 “显示之前” 的回调'); },
'afterShow': function () { setTimeout(function () { layer.msg('这是 “显示之后” 的回调（为避免重叠此处已设置延迟1s）'); }, 1e3); },
'imgZIndex': 19999999 + 1,
'overlayZIndex': 19999999,
'afterHide': function () { layer.msg('这是 “隐藏之后” 的回调'); },
'afterHideAll': function () { layer.msg('这是 “全部隐藏之后” 的回调'); },
'animateTime': 600,
'clickHide': 0,
'inheritRadius': 0
}
, onloadLoading = $(window).loading('show', {
"opacity": 0.7,
"imgSrc": 9,
"text": "正在加载第三方高亮组件...",
"textCss": {
"color": "#666"
},
'afterShow': function () {
// 测试：无高亮组件
// window.onload = new function () {
// onloadLoading.destroy();
// };
},
"afterHide": function () { layer.msg('页面加载完成，请开始吧！'); },
"offsetTop": 16
});
/*
(index):352 0 {name: "opacityDiv", value: "on"} // opacityDiv
(index):352 1 {name: "background", value: "#c55353"}
(index):352 2 {name: "overlayClassName", value: "divclass1 divclass2"}
(index):352 3 {name: "opacity", value: "0.5"}
(index):352 4 {name: "imgClassName", value: "imgclass1 imgclass2"}
(index):352 5 {name: "imgSrc", value: ""}
(index):352 6 {name: "imgSrcUrl", value: "../../loading.gif"} // imgSrcUrl
(index):352 7 {name: "text", value: "正在处理"}
(index):352 8 {name: "textCss", value: "{color: '#fff'}"}
(index):352 9 {name: "textClassName", value: "textclass1 textclass2"}
(index):352 9 {name: "title", value: ""}
(index):352 9 {name: "inheritRadius", value: false}
(index):352 10 {name: "cb", value: "beforeShow"}
(index):352 11 {name: "cb", value: "afterShow"}
(index):352 12 {name: "cb", value: "afterHide"}
(index):352 13 {name: "cb", value: "afterHideAll"}
(index):352 14 {name: "clickHide", value: "1"}
(index):352 15 {name: "offsetTop", value: "22"}
(index):352 16 {name: "animateTime", value: "800"}
(index):352 17 {name: "overlayZIndex", value: "199999991"}
(index):352 18 {name: "setting", value: "正在生成配置..."}
*/
function getSetting($obj, doFormat) {
var arrNew = {};
var imgSrcUrl = false;
var arr = $obj.serializeArray();
var format = function (options) {
var optionsStr = (JSON.stringify(options, function (k, v) {
if (typeof v === 'function') {
return Function.prototype.toString.call(v);
}
return v;
}, 2));
return optionsStr.replace(/"function/g, 'function').replace(/ }"/g, ' }');
}
$.each(arr, function (k, obj) {
if (obj.name === 'imgSrcUrl') {
imgSrcUrl = obj.value;
} else {
if (!parseInt(obj.value) && parseInt(obj.value) !== 0) {
if (obj.name === 'cb') {
arrNew[obj.value] = baseSetting[obj.value];
} else {
arrNew[obj.name] = $.trim(obj.value);
}
} else {
arrNew[obj.name] = parseFloat(obj.value);
}
}
});
if (imgSrcUrl !== false) {
arrNew.imgSrc = imgSrcUrl;
} else if (arrNew.imgSrc === 'null') {
arrNew.imgSrc = null;
}
if (arrNew.opacity === undefined) {
arrNew.opacity = 0;
}
if (arrNew.opacity === 0 && arrNew.imgSrc === null && arrNew.text === '') {
arrNew.text = '遮罩层、图片、文本至少得存在一项（单击关闭）';
arrNew.textCss = { color: 'red' };
arrNew.clickHide = 1;
}
if (arrNew.textCss) {
arrNew.textCss = new Function("return" + arrNew.textCss)();
}
arrNew.imgZIndex = arrNew.overlayZIndex + 1;
$.each(arrNew, function (key, value) {
if (baseSetting[key] === undefined || (baseSetting[key] === value && typeof baseSetting[key] !== 'function')) {
delete arrNew[key];
}
});
// delete arrNew.opacityDiv;
// delete arrNew.imgSrcUrl;
// delete arrNew.setting;
// delete arrNew.user;
// delete arrNew.pw;
return doFormat ? format(arrNew) : arrNew;
}
function codePrint(obj) {
CodeMirror.fromTextArea(obj, {
mode:'javascript', // 编辑器语言
theme:'eclipse', // 编辑器主题
extraKeys: {"Tab": "autocomplete"}, // ctrl可以弹出选择项
// lineNumbers: true, // 是否使用行号
styleActiveLine: true,
smartIndent: true, // 自动缩进是否开启
matchBrackets: true,
readOnly: true
});
}
function setScrollTop(obj, text) {
$(document).scrollTop($(obj).offset().top - 30);
text && layer.tips(text, obj, {
tips: [3, '#c95050'], time: 5e3
});
return text;
}
function getTpl(url, paramsObj) {
if (!url) {
return;
} else {
return $.ajax({
url: url,
data: paramsObj || {},
async: false
// jsonp: '$callback',
// dataType: 'jsonp'
}).responseText;
}
}
//表单初始赋值<表单设置>
// form.val('my-loading', {
// "opacityDiv": "有遮罩层"
// , "background": "#fff"
// , "opacity": 0.6
// , "imgSrc": 0
// // , "like[write]": true
// , "clickHide": '0'
// , "offsetTop": 0
// , "animateTime": 600
// , "overlayZIndex": 19999999
// , "setting": "正在生成配置..." // 默认配置信息，计算赋值
// });
// 监听表单提交
form.on('submit(my-submit)', function (data) {
setScrollTop($('#my-show-1')[0]);
// layer.alert(JSON.stringify(data.field), {
// title: '最终的提交信息'
// });
var options = getSetting($('form'));
$('#my-show-1').loading('show', options);
return false;
});
// 颜色选择器
colorpicker.render({
elem: '#bg-btn'
, color: '#fff'
, done: function (color) {
$('#bg-input').val(color);
}
});
// 日期控件
$('#my-date').on('click.date', function () {
laydate.render({
elem: '#my-date',
show: true,
value: new Date(),
isInitValue: false,
format: '今天是：yyyy年MM月dd日',
ready: function () {
$('div.layui-laydate').loading('show', {
background: '#000',
imgSrc: null,
opacity: 0.5,
text: '示例：暂停选择日期',
textCss: {color: '#fff'}
});
}
});
});
// 创建一个编辑器
var editIndex = layedit.build('LAY_demo_editor');
// 配置表单验证规则
form.verify({
opacity: function (value, obj) {
if (!value && !obj.disabled) {
return setScrollTop(obj.nextSibling, '有遮罩层时请设置“遮罩透明度”');
}
}
, imgSrcUrl: function (value, obj) {
if (!$.trim(value) && !obj.disabled) {
obj.value = '';
return setScrollTop(obj, '备选图片未选时请设置“图片路径”');
}
}
, test2: [/(.+){6,12}$/, '密码必须6到12位']
, test3: function (value) {
layedit.sync(editIndex);
}
});
// 备选图片编码选择
form.on('select(imgSrc)', function (data) {
var imgSrcUrlObj = $('input[name="imgSrcUrl"]')[0];
if (!data.value) {
imgSrcUrlObj.disabled = false;
layer.tips('可以自定义URL了', imgSrcUrlObj, {
tips: [3, 'green'], time: 3e3, end: function () {
$(imgSrcUrlObj).focus();
}
});
} else {
imgSrcUrlObj.disabled = true;
layer.tips('此时不可配置URL', imgSrcUrlObj, {
tips: [3, '#c95050'], time: 3e3
});
}
});
// 有无遮罩层
form.on('switch(switch)', function (data) {
var selectObj = $('select[name="opacity"]')[0];
var overlayClassNameObj = $('input[name="overlayClassName"]')[0];
var bgColorObj = $('#bg-input')[0];
var text = data.othis[0].innerText;
// layer.msg('：' + (this.checked ? 'true' : 'false'), {
// offset: '6px'
// });
overlayClassNameObj.disabled = bgColorObj.disabled = selectObj.disabled = text === '有遮罩层' ? false : true;
layer.tips(text, data.othis, {
tips: [1, '#000']
});
form.render('select');
});
// 上传按钮 <独立>
// var uploadLoading = function () {
$('#my-upload').on('click.upload', function () {
$(this).loading('show', {
title: '文件上传中，请稍候...（单击退出）',
clickHide: true
});
});
// }; uploadLoading();
// 圆形loading
$('#my-radius').on('click.radius', function () {
$(this).loading('show', {
imgSrc: null,
background: '#000',
text: '继承了父节点边框哦<br>支持br换行哦<br>2秒后跳转...',
textCss: {color: '#fff', 'font-size': '12px'},
inheritRadius: true,
opacity: 0.7,
clickHide: true
});
setTimeout(function () {
setScrollTop($('#my-doc')[0]);
}, 2e3);
});
// loading in loading
$('#my-in-loading').on('click.in.loading', function () {
var $obj = $('#in-loading');
var claName = 'div.lay-loading';
setScrollTop($obj[0]);
$obj.loading('show', {
imgSrc: null,
background: 'green',
text: '这是第一层loading...',
textCss: {color: '#fff'},
inheritRadius: true,
clickHide: true
});
setTimeout(function () {
$obj.children(claName).loading('show', {
background: 'orange',
inheritRadius: true,
clickHide: true,
imgSrc: null,
offsetTop: -30,
textCss: {color: '#fff'},
text: '这是第二层loading，我已偏移30px哦'
});
}, 1e3);
setTimeout(function () {
$obj.children(claName).children(claName).loading('show', {
background: 'blue',
inheritRadius: true,
clickHide: true,
imgSrc: null,
offsetTop: -60,
textCss: {color: '#fff'},
text: '这是第三层loading，我已偏移60px哦，连续单击关闭'
});
}, 2e3);
});
// 监听window的hideAll事件
// $(window).on('lay-loading.hideAll', function () {
// uploadLoading();
// });
// 关闭所有loading
$('#my-close-all').on('click.closeAll', function () {
$(window).loading('hideAll');
});
// 打开全屏loading <按配置>
$('#my-body').on('click.body', function () {
var loading = $(window).loading('show', getSetting($('form')));
setTimeout(function () {
loading.hide();
}, 3e3);
});
// 固定效果 <独立>
$('#my-demo').on('click.demo', function () {
setScrollTop($('#my-show-1')[0]);
$('#my-show-1').loading('show', {
background: 'green',
imgSrc: null,
textCss: { color: '#fff' },
text: '数据处理中...'
});
});
// 重置表单
$('#my-reset').on('click.reset', function () {
layer.msg('确定重置您的配置吗？', {
time: 0
, shade: 0.5
, anim: 6
, btn: ['确定', '取消']
, yes: function (index) {
layer.close(index);
$('[disabled]').attr('disabled', false);
$('input[name="imgSrcUrl"]')[0].disabled = true;
setTimeout(function () {
$('form')[0].reset();
}, 50);
}
});
});
// 多区域loading <按配置>
$('#my-more').on('click.more', function () {
$('div.my-show-ot').loading('show', getSetting($('form')));
setTimeout(function () {
$(document).scrollTop($('div.my-show-ot').offset().top);
layer.tips('多区域显示效果', $('div.my-show-ot')[0], {
tips: [1, 'orange'], time: 4e3, tipsMore: true
});
layer.tips('多区域显示效果', $('div.my-show-ot')[1], {
tips: [1, 'orange'], time: 4e3, tipsMore: true
});
}, 0.2e3);
});
// layer显示loading <按配置>
$('#my-layer').on('click.layer', function () {
var obj = {
title: '身份验证',
user: {
value: 'admin',
title: '帐号',
placeholder: '请输入用户名'
},
pw: {
value: '123456',
title: '密码',
placeholder: '请输入密码',
info: '密码长度6～18位'
},
btn: {
submit: '提交',
reset: '取消'
}
};
if (!tplLogin) tplLogin = getTpl('form.tpl');
laytpl(tplLogin).render(obj, function (html) {
var index = layer.open({
type: 1
, title: obj.title
, shade: 0.6
, anim: 1
, btn: [obj.btn.submit, obj.btn.reset]
, content: html
, yes: function (index, obj) {
var loading = $('#layer-form').closest('div.layui-layer').loading('show', getSetting($('form')));
setTimeout(function () {
loading.hide();
}, 3e3);
}
});
layer.style(index, {
width: '470px'
});
setTimeout(function () {
layer.tips('点此试试', $('a.layui-layer-btn0')[0], {
tips: [1, 'orange'], time: 2e3
});
}, 0.5e3);
});
});
// 监听tab切换
element.on('tab(code-tab)', function (elem) {
var $cont = $(elem.elem[0]).find('.layui-tab-item:eq('+ elem.index +')');
var obj = $cont.find('.code')[0];
var $edit = $cont.find('.CodeMirror');
!$edit.size() && codePrint(obj);
});
$(function () {
// 代码高亮默认执行
$('textarea.auto-code').each(function (i, obj) {
codePrint(obj);
});
// 定时生成配置信息
var oldOptionsStr = '';
setInterval(function () {
if (oldOptionsStr != getSetting($('form'), 'format')) {
$('#textarea').val(getSetting($('form'), 'format'));
$('#my-show-1').find('.CodeMirror').remove();
codePrint($('#textarea')[0]);
oldOptionsStr = getSetting($('form'), 'format');
}
}, 1.5e3);
// 加载高亮组件loading
window.onload = new function () {
setTimeout(function () {
onloadLoading.destroy();
}, 1e3);
};
// btns animate
$('button[data-anim]').on('click.anim', function (e) {
var animPre = 'layui-anim-';
var $obj = $(this);
var animClass = animPre + $obj.data('anim');
$obj.addClass(animClass);
setTimeout(function () {
$obj.removeClass(animClass);
}, 2e3);
});
});
});