525 lines
14 KiB
JavaScript
525 lines
14 KiB
JavaScript
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);
|
||
});
|
||
});
|
||
}); |