Fix: 修复在工作区注释后弹窗无法显示
This commit is contained in:
王立帮
@@ -1,30 +0,0 @@
|
||||
<style>
|
||||
.form-div {
|
||||
padding-top: 30px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="form-div">
|
||||
<form class="layui-form" id="layer-form" onsubmit="return false">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">{{d.user.title}}</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="user" lay-verify="user" value="{{d.user.value}}" maxlength="20" placeholder="{{d.user.placeholder}}" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">{{d.pw.title}}</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="password" name="pw" lay-verify="pw" value="{{d.pw.value}}" maxlength="20" placeholder="{{d.pw.placeholder}}" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">{{d.pw.info}}</div>
|
||||
</div>
|
||||
<div class="layui-form-item layui-hide">
|
||||
<div class="layui-input-block">
|
||||
<button class="layui-btn" lay-filter="login" lay-submit="">{{d.btn.submit}}</button>
|
||||
<button class="layui-btn layui-btn-primary" type="reset">{{d.btn.reset}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -1,620 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<title>Loading - demo</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<link rel="stylesheet" href="../../../layui/css/layui.css?v=v2.4.3" media="all">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.layout {
|
||||
margin: 20px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
margin-bottom: 70px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.layout textarea {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.layout input[disabled] ,
|
||||
.layout .layui-select-disabled .layui-disabled {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.layout .my-fixed button {
|
||||
margin-right: .5em;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.layout .my-fixed {
|
||||
position:fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
z-index: 111;
|
||||
}
|
||||
|
||||
.layout fieldset {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.layui-form-item .layui-input-inline {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.layui-form-switch em {
|
||||
padding-right: 3px !important;
|
||||
}
|
||||
|
||||
input::-webkit-input-placeholder {color: #ccc;} /* 使用webkit内核的浏览器 */
|
||||
input:-moz-placeholder {color: #ccc;} /* Firefox版本4-18 */
|
||||
input::-moz-placeholder {color: #ccc;} /* Firefox版本19+ */
|
||||
input:-ms-input-placeholder {color: #ccc;} /* IE浏览器 */
|
||||
|
||||
/* .my-margin {} */
|
||||
|
||||
.layout textarea.code {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layout .CodeMirror {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.my-radius:hover {
|
||||
background: #028073;
|
||||
}
|
||||
|
||||
.my-radius {
|
||||
background: #009688;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
right: 100px;
|
||||
top: 100px;
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
line-height: 150px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
cursor: default;
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="layout" id="in-loading">
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>前言</legend>
|
||||
</fieldset>
|
||||
|
||||
<div style="padding-bottom: 30px; color: #555;">
|
||||
由于找不到一款完全符合自己需求的web-loading组件，没办法自己动手写一个得了，拓展jQuery插件，封装为layui组件。
|
||||
<br />因时间短，组件及文档可能不是很完美，大家觉得有用就用用，有问题可以邮件给我：neusofts#neusofts.com（#换成@，一直没注意，之前留的邮箱少了一个s，晕）
|
||||
|
||||
<br /><br /><b>版本更新：</b>
|
||||
|
||||
<br /><br /><b>v2.0</b>（未来版本）
|
||||
<br />- 待新增：自定义div对象（CSS3场景）；
|
||||
<br />- 待处理：因img预加载导致loading显示延迟的问题；
|
||||
|
||||
<br /><br /><b>v1.3</b>（最新版）
|
||||
<br />- 修复：父节点移除后导致loading实例报错的bug；
|
||||
<br />- 修复：afterHideAll默认覆盖全局配置，以最后调用为基准；
|
||||
<br />- 增强：img和text样式初始化设置；
|
||||
<br />- 新增：inheritRadius参数，是否继承父节点边框的值；
|
||||
<br />- 新增：文档的几个示例；
|
||||
|
||||
<br /><br /><b>v1.2</b>
|
||||
<br />- 新增：title配置，自定义div、img、text的hover显示内容；
|
||||
<br />- 修复：resize方法的处理逻辑及性能；
|
||||
<br />- 修复：有无img、text场景下的坐标计算错误bug；
|
||||
<br />- 兼容：IE8+、chrome、firefox、oprea、safari等浏览器；
|
||||
|
||||
<br /><br /><b>v1.1</b>
|
||||
<br />- 更新：某些场景下loading计算坐标错误的bug；
|
||||
<br />- 更新：无img时text加载延迟的bug；
|
||||
<br />- 兼容：safari的position计算方法不规范导致的bug；
|
||||
<br />- 兼容：IE8+、chrome、firefox、oprea、safari等浏览器；
|
||||
|
||||
<br /><br /><b>v1.0</b>
|
||||
<br />- 发布：组件发布
|
||||
|
||||
<div class="my-radius" id="my-radius" title="同时展示：圆角边框继承效果">查看文档</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layout" id="form">
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>Loading组件 之 自定义配置及演示（兼容IE8+）</legend>
|
||||
</fieldset>
|
||||
|
||||
<form class="layui-form" onsubmit="return false;" lay-filter="my-loading">
|
||||
<div class="layui-form-item my-margin">
|
||||
<b>遮罩层</b>
|
||||
<hr class="layui-bg-green">
|
||||
</div>
|
||||
|
||||
<div class="my-show-ot">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">有无遮罩层</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="checkbox" name="opacityDiv" lay-skin="switch" lay-filter="switch" checked lay-text="有遮罩层|无遮罩层">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">注：opacity为0时无遮罩层标签</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">遮罩背景色</label>
|
||||
<div class="layui-input-inline" style="width: 120px;">
|
||||
<input type="text" name="background" value="#fff" placeholder="默认#fff" class="layui-input" id="bg-input">
|
||||
</div>
|
||||
<div class="layui-inline" style="left: -11px;">
|
||||
<div id="bg-btn"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">遮罩class名</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="overlayClassName" placeholder="默认为空，多个以空格隔开" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">遮罩透明度</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="opacity" lay-filter="opacity" lay-verify="opacity">
|
||||
<option value="" disabled>选择透明度</option>
|
||||
<option value="0" disabled>0无遮罩(请使用“有无遮罩层”)</option>
|
||||
<option value="0.1">0.1</option>
|
||||
<option value="0.2">0.2</option>
|
||||
<option value="0.3">0.3</option>
|
||||
<option value="0.4">0.4</option>
|
||||
<option value="0.5">0.5</option>
|
||||
<option value="0.6" selected>0.6</option>
|
||||
<option value="0.7">0.7</option>
|
||||
<option value="0.8">0.8</option>
|
||||
<option value="0.9">0.9</option>
|
||||
<option value="1.0">1.0</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">注：opacity为0时无遮罩层</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label" title="新增配置项"><span class="layui-badge-dot"></span> 边框继承</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="inheritRadius" value="1" title="继承">
|
||||
<input type="radio" name="inheritRadius" value="0" checked title="不继承">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">注：自定义遮罩层是否继承父节点的边框效果，默认false</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item my-margin">
|
||||
<b>图片</b>
|
||||
<hr class="layui-bg-green">
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">图片class名</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="imgClassName" placeholder="默认为空，多个以空格隔开" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">备选图片</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="imgSrc" lay-filter="imgSrc">
|
||||
<option value="">选择备选编号 / 填写路径</option>
|
||||
<option value="null">不显示图片</option>
|
||||
<option value="0" selected>0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
<option value="10">10</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">注：默认编码为0，为null时无图片，可自定义图片路径</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">图片路径</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="imgSrcUrl" lay-verify="imgSrcUrl" disabled style="width: 400px" placeholder="自定义路径URL" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">注：默认备选编号为0，值为null时无图片，<span style="color:red">推荐：</span>https://loading.io，不考虑IE可使用svg格式文件</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item my-margin">
|
||||
<b>文本</b>
|
||||
<hr class="layui-bg-green">
|
||||
</div>
|
||||
|
||||
<div class="my-show-ot">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">显示文本</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="text" placeholder="默认为空，为空则不创建文本标签" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">文本Css</label>
|
||||
<div class="layui-input-inline" style="width: 500px;">
|
||||
<input type="text" name="textCss" placeholder="默认为空，格式{color: '#000'}" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">注：默认为空，格式{color: '#000'}</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">文本class名</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="textClassName" placeholder="默认为空，多个以空格隔开" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item my-margin">
|
||||
<b>回调</b>
|
||||
<hr class="layui-bg-green">
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">回调函数</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="checkbox" name="cb" value="beforeShow" title="显示前">
|
||||
<input type="checkbox" name="cb" value="afterShow" title="显示后">
|
||||
<input type="checkbox" name="cb" value="afterHide" title="隐藏后">
|
||||
<input type="checkbox" name="cb" value="afterHideAll" title="全部隐藏后">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">注：“隐藏后”的回调同样对“销毁”有效（全部隐藏的回调默认覆盖全局配置，最后配置及调用者优先级最高）</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item my-margin">
|
||||
<b>其它</b>
|
||||
<hr class="layui-bg-green">
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">单击关闭</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="clickHide" value="1" title="关闭">
|
||||
<input type="radio" name="clickHide" value="0" checked title="不关闭">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">注：单击关闭loading，遮罩、图片、文本均有效（一般配合回调使用）</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">Top偏移量</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" name="offsetTop" value="0" placeholder="默认为0" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">注：默认为0，自定义图片、文本的top偏移量（针对图片和文本同时显示且两者绝对居中的微调场景）</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label" title="新增配置项"><span class="layui-badge-dot"></span> hover提示</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="title" placeholder="默认为空" class="layui-input" style="width: 400px;">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">注：默认为空字符串，自定义div、img、text的hover提示</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">动画时长</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" name="animateTime" value="600" placeholder="默认为600" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">注：默认为600，为0时关闭动画效果</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">遮罩z-index</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" name="overlayZIndex" value="19999999" placeholder="默认为19999999" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">注：默认为19999999（1,000,000），同时imgZIndex = overlayZIndex + 1</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item my-margin">
|
||||
<b>生成配置</b>
|
||||
<hr class="layui-bg-green">
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item layui-form-text" id="my-show-1">
|
||||
<label class="layui-form-label">自定义配置 / <span style="color:red">默认预览区</span></label>
|
||||
<div class="layui-input-block">
|
||||
<textarea placeholder="生成您的自定义配置" id="textarea" class="layui-textarea" readonly name="setting">正在生成自定义配置...</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item my-fixed">
|
||||
<div class="layui-input-block">
|
||||
<button class="layui-btn layui-anim" data-anim="upbit" lay-submit="" lay-filter="my-submit">预览配置</button>
|
||||
<button class="layui-btn layui-btn-danger layui-anim" data-anim="rotate" id="my-reset">重置设置</button>
|
||||
<button class="layui-btn layui-btn-normal layui-anim" data-anim="fadeout" id="my-close-all">关闭所有</button>
|
||||
<button class="layui-btn layui-btn-primary layui-anim" data-anim="scaleSpring" id="my-body">按配置全屏(3s)</button>
|
||||
<button class="layui-btn layui-btn-primary layui-anim" data-anim="scaleSpring" id="my-layer">按配置layer(5s)</button>
|
||||
<button class="layui-btn layui-btn-primary layui-anim" data-anim="scaleSpring" id="my-more">按配置多区域</button>
|
||||
<button class="layui-btn layui-btn-primary" id="my-upload">上传按钮</button>
|
||||
<button class="layui-btn layui-btn-primary layui-anim" data-anim="scaleSpring" id="my-in-loading">叠加嵌套</button>
|
||||
<button class="layui-btn layui-btn-primary" id="my-date">日期控件</button>
|
||||
<button class="layui-btn layui-btn-warm layui-anim" data-anim="up" id="my-demo">Text效果</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="layout" id="my-doc">
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>全局配置及使用文档</legend>
|
||||
</fieldset>
|
||||
<div style="margin-bottom: 10px;">
|
||||
<textarea class="code auto-code">
|
||||
$(element).loading(); // 此方式 “仅调用show方法”
|
||||
$(element).loading({ ... }); // 重要提示：此方式会更新 “全局配置 + 执行show方法”
|
||||
|
||||
// 配置说明
|
||||
options = {
|
||||
overlayClassName: '' // 类型String，自定义遮罩层className，可多个，默认空String
|
||||
, imgClassName: '' // 类型String，自定义image的className，可多个，默认空String
|
||||
, background: '#fff' // 类型String，自定义遮罩层背景色，默认#fff
|
||||
, opacity: 0.6 // 类型Number，自定义遮罩层的透明度，默认0.6，注：为0时无遮罩层
|
||||
, text: '' // 类型String，自定义loading文本，默认空String，注：非空时参考offsetTop设置
|
||||
, textCss: {} // 类型Object，自定义loading文本样式，默认空{}
|
||||
, textClassName: '' // 类型String，自定义文本的className，可多个，默认空String
|
||||
, title: '' // 类型String，自定义div、img、text的title，默认空String
|
||||
, offsetTop: 0 // 类型Number，自定义图片+文本模式的top偏移量，注：text为空时无需设置offsetTop
|
||||
, imgSrc: 0 // 类型String|null|Number，自定义loading图片，默认为图片序列的0索引（共0-10），可自定义url路径，注：为null时无图片
|
||||
, beforeShow: function () {} // 类型Function，自定义loading显示前的回调，默认空Function，参数1=this，参数2=jQuery
|
||||
, afterShow: function () {} // 类型Function，自定义loading显示后的回调，默认空Function，参数1=this，参数2=jQuery，参数3=$loading
|
||||
, imgZIndex: 19999999+1 // 类型Number，自定义图片的z-index值，默认19999999+1
|
||||
, overlayZIndex: 19999999 // 类型Number，自定义遮罩层的z-index值，默认19999999
|
||||
, afterHide: function () {} // 类型Function，自定义loading隐藏/销毁后的回调，默认空Function，参数1=this，参数2=jQuery，参数3=$loading(销毁时无参数3)
|
||||
, afterHideAll: function () {} // 类型Function，自定义全部loading隐藏/销毁后的回调，默认空Function，参数1=this，参数2=jQuery，参数3=$loading(销毁时无参数3)
|
||||
, animateTime: 600 // 类型Number，自定义loading显示/隐藏的动画时长，默认600毫秒，注：为0时无动画
|
||||
, clickHide: false // 类型Boolean，自定义单击loading遮罩层/图片/文字是否隐藏loading，默认false
|
||||
, inheritRadius: false // 类型Boolean，自定义遮罩层是否继承父节点的边框效果，默认false
|
||||
}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layout">
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>回调</legend>
|
||||
</fieldset>
|
||||
|
||||
<div class="layui-tab layui-tab-brief" lay-filter="code-tab">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this">beforeShow</li>
|
||||
<li>afterShow</li>
|
||||
<li>afterHide</li>
|
||||
<li>afterHideAll</li>
|
||||
</ul>
|
||||
|
||||
<div class="layui-tab-content" style="padding-bottom: 0;">
|
||||
<div class="layui-tab-item layui-show">
|
||||
<textarea class="code auto-code">
|
||||
// loading显示之前的回调
|
||||
var loading = $(element).loading('show', {
|
||||
/* 私有配置 */
|
||||
beforeShow: function (loading, $obj) {
|
||||
// loading == this;
|
||||
// $obj == $(element);
|
||||
// 回调内容
|
||||
}
|
||||
});</textarea>
|
||||
</div>
|
||||
<div class="layui-tab-item">
|
||||
<textarea class="code">
|
||||
// loading显示之后的回调
|
||||
var loading = $(element).loading('show', {
|
||||
/* 私有配置 */
|
||||
afterShow: function (loading, $obj, $loading) {
|
||||
// loading == this;
|
||||
// $obj == $(element);
|
||||
// $loading == $(div,img,text);
|
||||
// 回调内容
|
||||
}
|
||||
});</textarea>
|
||||
</div>
|
||||
<div class="layui-tab-item">
|
||||
<textarea class="code">
|
||||
// loading隐藏之后的回调
|
||||
var loading = $(element).loading('show', {
|
||||
/* 私有配置 */
|
||||
afterHide: function (loading, $obj, $loading?) {
|
||||
// loading == this;
|
||||
// $obj == $(element);
|
||||
// $loading? == $(div,img,text); 销毁时无此参数
|
||||
// 回调内容
|
||||
}
|
||||
});</textarea>
|
||||
</div>
|
||||
<div class="layui-tab-item">
|
||||
<textarea class="code">
|
||||
// loading全部隐藏之后的回调（注：全部隐藏的回调默认覆盖全局配置，最后配置及调用者优先级最高）
|
||||
var loading = $(element).loading('show', {
|
||||
/* 私有配置 */
|
||||
afterHideAll: function (loading, $obj, $loading?) {
|
||||
// loading == this;
|
||||
// $obj == $(element);
|
||||
// $loading? == $(div,img,text); 全部销毁时无此参数
|
||||
// 回调内容
|
||||
}
|
||||
});</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layout">
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>方法</legend>
|
||||
</fieldset>
|
||||
|
||||
<div class="layui-tab layui-tab-brief" lay-filter="code-tab">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this">show()</li>
|
||||
<li>toggle()</li>
|
||||
<li>hide()</li>
|
||||
<li>hideAll()</li>
|
||||
<li>destroy()</li>
|
||||
<li>destroyAll()</li>
|
||||
</ul>
|
||||
|
||||
<div class="layui-tab-content" style="padding-bottom: 0;">
|
||||
<div class="layui-tab-item layui-show">
|
||||
<textarea class="code auto-code">
|
||||
/*
|
||||
- 可以直接jQuery对象调用，也可以创建一个loading对象，以备用；
|
||||
- 注：如果是jQuery对象数组，则返回的loading也是对应的对象数组；
|
||||
- 注：若jQuery数组中包含body，则默认只对body有效（body最好单独调用）；
|
||||
- 注：destroy/destroyAll后loading对象仍可调用show等方法；
|
||||
- 更详尽的说明，请查看源码中的注释；
|
||||
*/
|
||||
|
||||
// show（loading.show()不支持链式调用）
|
||||
var loading = $(element).loading('show', { /* 私有配置 */ });</textarea>
|
||||
</div>
|
||||
<div class="layui-tab-item">
|
||||
<textarea class="code">
|
||||
// hide <--> show
|
||||
$(element).loading('toggle');
|
||||
|
||||
// 或者
|
||||
loading.toggle(); // 支持链式调用</textarea>
|
||||
</div>
|
||||
<div class="layui-tab-item">
|
||||
<textarea class="code">
|
||||
// hide
|
||||
$(element).loading('hide');
|
||||
|
||||
// 或者
|
||||
loading.hide(); // 支持链式调用</textarea>
|
||||
</div>
|
||||
<div class="layui-tab-item">
|
||||
<textarea class="code">
|
||||
// hideAll
|
||||
$(element).loading('hideAll');
|
||||
|
||||
// 或者
|
||||
loading.hideAll(); // 支持链式调用</textarea>
|
||||
</div>
|
||||
<div class="layui-tab-item">
|
||||
<textarea class="code">
|
||||
// destroy（注：为避免切换页面兼容性，配合onload的loading隐藏建议使用destroy注销对象）
|
||||
$(element).loading('destroy');
|
||||
|
||||
// 或者
|
||||
loading.destroy(); // 支持链式调用</textarea>
|
||||
</div>
|
||||
<div class="layui-tab-item">
|
||||
<textarea class="code">
|
||||
// destroyAll
|
||||
$(element).loading('destroyAll');
|
||||
|
||||
// 或者
|
||||
loading.destroyAll(); // 支持链式调用</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layout">
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>事件</legend>
|
||||
</fieldset>
|
||||
|
||||
<div class="layui-tab layui-tab-brief" lay-filter="code-tab">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this">show</li>
|
||||
<li>hide</li>
|
||||
<li>hideAll</li>
|
||||
<li>destroy</li>
|
||||
<li>destroyAll</li>
|
||||
</ul>
|
||||
<div class="layui-tab-content">
|
||||
<div class="layui-tab-item layui-show">
|
||||
<textarea class="code auto-code">
|
||||
$(element).on('lay-loading.show', function (event, loadingObj) {
|
||||
// 监听show事件的回调
|
||||
});</textarea>
|
||||
</div>
|
||||
<div class="layui-tab-item">
|
||||
<textarea class="code">
|
||||
$(element).on('lay-loading.hide', function (event, loadingObj) {
|
||||
// 监听hide事件的回调
|
||||
});</textarea>
|
||||
</div>
|
||||
<div class="layui-tab-item">
|
||||
<textarea class="code">
|
||||
$(element).on('lay-loading.hideAll', function (event, loadingObj) {
|
||||
// 监听hideAll事件的回调
|
||||
});</textarea>
|
||||
</div>
|
||||
<div class="layui-tab-item">
|
||||
<textarea class="code">
|
||||
$(element).on('lay-loading.destroy', function (event, loadingObj) {
|
||||
// 监听destroy事件的回调
|
||||
});</textarea>
|
||||
</div>
|
||||
<div class="layui-tab-item">
|
||||
<textarea class="code">
|
||||
$(element).on('lay-loading.destroyAll', function (event, loadingObj) {
|
||||
// 监听destroyAll事件的回调
|
||||
});</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script src="../../../layui/layui.all.js?v=v2.4.3" charset="utf-8"></script>
|
||||
<script src="../index.js?v=v1.3.1" charset="utf-8"></script>
|
||||
|
||||
<link rel=stylesheet href="http://codemirror.net/lib/codemirror.css">
|
||||
<link rel=stylesheet href="https://codemirror.net/theme/eclipse.css">
|
||||
|
||||
<script src="http://codemirror.net/lib/codemirror.js"></script>
|
||||
<script src="http://codemirror.net/mode/xml/xml.js"></script>
|
||||
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
|
||||
<script src="http://codemirror.net/mode/css/css.js"></script>
|
||||
<script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
|
||||
<script src="http://codemirror.net/addon/selection/active-line.js"></script>
|
||||
<script src="http://codemirror.net/addon/edit/matchbrackets.js"></script>
|
||||
|
||||
<script src='http://codemirror.net/addon/hint/show-hint.js'></script>
|
||||
<script src='http://codemirror.net/addon/hint/javascript-hint.js'></script>
|
||||
<script src='http://codemirror.net/addon/hint/sql-hint.js'></script>
|
||||
<script src='http://codemirror.net/addon/hint/html-hint.js'></script>
|
||||
<script src='http://codemirror.net/addon/hint/xml-hint.js'></script>
|
||||
<script src='http://codemirror.net/addon/hint/anyword-hint.js'></script>
|
||||
<script src='http://codemirror.net/addon/hint/css-hint.js'></script>
|
||||
<script src='http://codemirror.net/addon/hint/show-hint.js'></script>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 777 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 771 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 729 B |
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB |
@@ -1,525 +0,0 @@
|
||||
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);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,489 +0,0 @@
|
||||
/**
|
||||
* 区域/全局 loading 效果<layui组件，依赖jQuery>
|
||||
* @version v1.3 最新版
|
||||
* @author jlx (neusofts#neusofts.com)
|
||||
* @extends {jQuery.fn.loading}
|
||||
* @param {String|Object=} arg1 调用方法名<均为空参则默认show，其他方法：toggle,hide,hideAll,destroy,destroyAll>，若为一个Object参数则更新全局配置&show<返回loading>
|
||||
* @param {Object=} arg2 若arg1为{String}，arg2为{Object}，则优先私有配置
|
||||
* @property {String=''} overlayClassName 自定义遮罩层className，可多个，默认空String
|
||||
* @property {String=''} imgClassName 自定义image的className，可多个，默认空String
|
||||
* @property {String='#fff'} background 自定义遮罩层背景色，默认#fff
|
||||
* @property {Number=0.6} opacity 自定义遮罩层的透明度，默认0.6 <为0时无遮罩层>
|
||||
* @property {String=''} text 自定义loading文本，默认空String<非空时参考offsetTop设置>
|
||||
* @property {String=''} textCss 自定义loading文本样式，默认空String<高优先级>
|
||||
* @property {String=''} textClassName 自定义文本的className，可多个，默认空String
|
||||
* @property {String=''} title 自定义div、img、text的title，默认空String
|
||||
* @property {Number=0} offsetTop 自定义图片+文本模式的top偏移量<text为空建议不设置offsetTop>
|
||||
* @property {Number=0|String=''|null} imgSrc 自定义loading图片路径，默认为图片序列的0索引<0-10>，可配索引或图片url路径<为null时无图片>
|
||||
* @property {Function=} beforeShow 自定义loading显示前的回调，默认空Function，参数1=this，参数2=jQuery
|
||||
* @property {Function=} afterShow 自定义loading显示后的回调，默认空Function，参数1=this，参数2=jQuery，参数3=$loading
|
||||
* @property {Number=19999999+1} imgZIndex 自定义图片的z-index值，默认19999999+1
|
||||
* @property {Number=19999999} overlayZIndex 自定义遮罩层的z-index值，默认19999999
|
||||
* @property {Function=} afterHide 自定义loading隐藏/销毁后的回调，默认空Function，参数1=this，参数2=jQuery，参数3=$loading(销毁时无参数3)
|
||||
* @property {Function=} afterHideAll 自定义全部loading隐藏/销毁后的回调，默认空Function，参数1=this，参数2=jQuery，参数3=$loading(销毁时无参数3)
|
||||
* @property {Number=600} animateTime 自定义loading显示/隐藏的动画时长 <为0时无动画>，默认600
|
||||
* @property {Boolean=false} clickHide 自定义单击loading遮罩层/图片/文字是否隐藏loading，默认false
|
||||
* @property {Boolean=false} inheritRadius 自定义遮罩层是否继承父节点的边框效果，默认false
|
||||
* @event hide,hideAll,destroy,destroyAll 均监听$(obj)的lay-loading(.hide | .hideAll | .destroy | .destroyAll)事件，参数event, loadingObj
|
||||
* @return {Object|jQuery|Object<Array>} 返回<loading | loadingArr | jQuery | Error>对象
|
||||
* @example
|
||||
* $('body').loading(str?: string = 'show'); // 创建/显示loading <body,html,window,document均处理为body>
|
||||
* $('body|other').loading({...}); // 注：更新全局配置 + show
|
||||
* $('body|other').loading('show', {...}); // 创建/显示 + 局部配置优先
|
||||
* var loadingObj = $('body|other').loading('hide').show(); // 隐藏 -> 显示
|
||||
* var loadingObj = $('body|other').loading('show', {afterHide: function (loadingObj, jQueryObj, $loading) {...}});
|
||||
*/
|
||||
|
||||
(() => {
|
||||
'use strict';
|
||||
goog.require('path');
|
||||
goog.require('layui');
|
||||
goog.provide('layui.loading');
|
||||
const { loading } = layui;
|
||||
loading.IMG_PATH = path.join(goog.basePath, '../ui/layui/extend/loading/images');
|
||||
var _ = $.extend
|
||||
, W = window // BOM/DOM
|
||||
, fnName = {}
|
||||
, lang = {Illegal_operation: '非法操作'} // 外部语言包模块
|
||||
, _toString = Object.prototype.toString
|
||||
, ds = { // 外部工具模块
|
||||
getTime: function (arg) {
|
||||
return arg ? (+ new Date(arg)) : (+ new Date());
|
||||
},
|
||||
|
||||
is: {
|
||||
string: function (str) {
|
||||
return _toString.call(str) == '[object String]';
|
||||
},
|
||||
number: function (num) {
|
||||
return _toString.call(num) == '[object Number]';
|
||||
},
|
||||
plainObject: function (obj) {
|
||||
if (obj === undefined) {
|
||||
return false;
|
||||
} else {
|
||||
return _toString.call(obj) === '[object Object]';
|
||||
}
|
||||
},
|
||||
'undefined': function (v) {
|
||||
return v === undefined || v === null;
|
||||
},
|
||||
'function': function (fun) {
|
||||
return _toString.call(fun) === '[object Function]';
|
||||
}
|
||||
},
|
||||
|
||||
loadImage: function (url, callback, error) {
|
||||
if (!url) {
|
||||
return callback({src: url});
|
||||
}
|
||||
|
||||
var imgObj;
|
||||
|
||||
imgObj = new Image();
|
||||
imgObj.src = url;
|
||||
|
||||
if (imgObj.complete && callback) {
|
||||
return callback(imgObj);
|
||||
}
|
||||
|
||||
imgObj.onload = function () {
|
||||
imgObj.onload = null;
|
||||
callback && callback(imgObj);
|
||||
};
|
||||
|
||||
imgObj.onerror = function (e) {
|
||||
imgObj.onerror = null;
|
||||
error && error(e);
|
||||
};
|
||||
|
||||
return imgObj;
|
||||
}
|
||||
};
|
||||
|
||||
_($.fn, {
|
||||
loading: function () {
|
||||
var nodeNames = 'BODY,HTML,#document,undefined'
|
||||
, $that = !this[0] || nodeNames.indexOf(this[0].nodeName) > -1 ? $('body') : this // 多集合仅保留body对象
|
||||
, isBODY = $that[0].nodeName == 'BODY'
|
||||
, arg1 = arguments[0], arg2 = arguments[1]
|
||||
, loadingClassName = 'lay-loading' // 注：hideAll等操作的索引，若冲突请自行改之
|
||||
, eventNameResize = 'resize.' + loadingClassName
|
||||
, eventNameClick = 'click.'+ loadingClassName +'.clickHide'
|
||||
, zIndex = 19999999
|
||||
, errorFn = function () {
|
||||
throw new Error(lang.Illegal_operation);
|
||||
}
|
||||
, imgUrl = layui.loading.IMG_PATH + '/loading/loading'
|
||||
, imgSrcArr = [
|
||||
imgUrl + '.gif',
|
||||
imgUrl + '-bars.gif'
|
||||
].concat(function () { for (var arr = [], i = 0; i <= 8; i++) { arr.push(imgUrl + '-' + i + '.gif'); }; return arr; }())
|
||||
, pteMethods = {
|
||||
resize: function () {
|
||||
if (!this || !this instanceof $) return;
|
||||
|
||||
var offsetTop = this.settings && (this.settings.offsetTop || 0);
|
||||
var $objs = this.$this.children('.' + loadingClassName + ':visible');
|
||||
var hasImgSrc = !ds.is['undefined'](this.settings.imgSrc);
|
||||
var imageH = 0, $parent = {}, parentW = 0, parentH = 0, isFixed, offsetP, safariBug, parentPosition;
|
||||
var isSafari = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent); // !document.documentMode;
|
||||
|
||||
$objs.each(function (key, divAndimg) {
|
||||
$parent = $(divAndimg).parent();
|
||||
parentPosition = ('fixed,relative').indexOf($parent.css('position'));
|
||||
isFixed = parentPosition > -1 || $parent[0] === $(this)[0].offsetParent;
|
||||
safariBug = parentPosition < 0 && $parent[0].offsetParent !== $('body')[0] && isSafari;
|
||||
// console.log(parentPosition); // -1 -1
|
||||
// console.log($parent[0]); // YS-in YS-in
|
||||
// console.log($(this)[0].offsetParent); // body YS-in
|
||||
// console.log($parent[0].offsetParent); // body YS-out
|
||||
offsetP = isFixed || safariBug ? { top: 0, left: 0 } : { top: $parent[0].offsetTop, left: $parent[0].offsetLeft };
|
||||
parentW = $parent.outerWidth();
|
||||
parentH = $parent.outerHeight();
|
||||
|
||||
if ($parent[0].nodeName == 'BODY') {
|
||||
if ($(divAndimg).is('div')) {
|
||||
$(divAndimg).css({
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
position: 'fixed'
|
||||
});
|
||||
} else if ($(divAndimg).is('img')) {
|
||||
imageH = $(divAndimg).height();
|
||||
$(divAndimg).css({
|
||||
position: 'fixed',
|
||||
top: $(W).height() / 2 - $(divAndimg).height() / 2 - offsetTop,
|
||||
left: $(W).width() / 2 - $(divAndimg).width() / 2
|
||||
});
|
||||
} else {
|
||||
$(divAndimg).css({
|
||||
position: 'fixed',
|
||||
top: $(W).height() / 2 + (imageH ? 6 : ( - $(divAndimg).height() / 2)) + imageH / 2 - offsetTop,
|
||||
left: $(W).width() / 2 - $(divAndimg).width() / 2
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if ($(divAndimg).is('div')) {
|
||||
$(divAndimg).css({
|
||||
// width: parentW,
|
||||
// height: parentH,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
top: offsetP.top,
|
||||
left: offsetP.left
|
||||
});
|
||||
} else if ($(divAndimg).is('img')) {
|
||||
imageH = $(divAndimg).height();
|
||||
$(divAndimg).css({
|
||||
top: parentH / 2 - $(divAndimg).height() / 2 + offsetP.top - offsetTop,
|
||||
left: parentW / 2 - $(divAndimg).width() / 2 + offsetP.left
|
||||
});
|
||||
} else {
|
||||
imageH = hasImgSrc ? imageH : 0;
|
||||
$(divAndimg).css({
|
||||
top: parentH / 2 + imageH / 2 + (imageH ? 6 : ( - $(divAndimg).height() / 2)) + offsetP.top - offsetTop,
|
||||
left: parentW / 2 - $(divAndimg).width() / 2 + offsetP.left
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
subsequent: function () {
|
||||
var $loading = arguments[0];
|
||||
var that = $loading.parent().data('loading') || this;
|
||||
var time = that.settings.animateTime;
|
||||
var $this = that.$this;
|
||||
var fn = that.settings[arguments[1]]
|
||||
var operate = arguments[2];
|
||||
var method = arguments[3];
|
||||
var isAuto = arguments[4];
|
||||
|
||||
if (arguments[1] === 'afterHideAll') {
|
||||
fn = fnName.settings.afterHideAll;
|
||||
}
|
||||
|
||||
$loading.fadeOut(time, function () {
|
||||
$(this)[operate]();
|
||||
});
|
||||
|
||||
W.setTimeout(function () {
|
||||
!isAuto && fn && fn(that, $this, operate == 'hide' ? $loading : undefined);
|
||||
!isAuto && $this.trigger(loadingClassName + '.' + method, that);
|
||||
}, time);
|
||||
|
||||
return that;
|
||||
}
|
||||
};
|
||||
|
||||
fnName.settings = fnName.settings || {
|
||||
'overlayClassName': '',
|
||||
'imgClassName': '',
|
||||
'background': '#fff',
|
||||
'opacity': 0.6,
|
||||
'text': '',
|
||||
'textCss': '', // {}
|
||||
'textClassName': '',
|
||||
'title': '',
|
||||
'offsetTop': 0, // img&text的top偏移量
|
||||
'imgSrc': imgSrcArr[0], // 注：默认以图片居中为主，若img&text同时微调可设置offsetTop
|
||||
'beforeShow': function () {},
|
||||
'afterShow': function () {},
|
||||
'imgZIndex': zIndex + 1, // text共用
|
||||
'overlayZIndex': zIndex,
|
||||
'afterHide': function () {},
|
||||
'afterHideAll': function () {},
|
||||
'animateTime': 600,
|
||||
'clickHide': !1, //可配置afterHide为reload需求
|
||||
'inheritRadius': false
|
||||
}
|
||||
|
||||
var initialCss = {
|
||||
'top': -zIndex,
|
||||
'left': -zIndex,
|
||||
'z-index': 0,
|
||||
'position': 'absolute',
|
||||
'padding': 'initial',
|
||||
'margin': 'initial',
|
||||
'border': 'initial',
|
||||
'width': 'initial',
|
||||
'min-width': 'initial',
|
||||
'max-width': 'initial',
|
||||
'height': 'initial',
|
||||
'min-height': 'initial',
|
||||
'max-height': 'initial',
|
||||
'opacity': 'initial'
|
||||
}
|
||||
, overlayStyle = {
|
||||
'background': '#fff',
|
||||
'height': 0, // resize value
|
||||
'width': 0, // resize value
|
||||
'top': 0, // resize value <html除外, 子标签在body内>
|
||||
'left': 0, // resize value <html除外, 子标签在body内>
|
||||
'z-index': 0,
|
||||
'opacity': 0,
|
||||
'position': 'absolute',
|
||||
'border': '1px solid transparent',
|
||||
'border-radius': 0,
|
||||
'padding': 'initial',
|
||||
'margin': 'initial',
|
||||
'border': 'initial'
|
||||
}
|
||||
, imageStyle = _({}, initialCss)
|
||||
, textStyle = _({}, initialCss, {
|
||||
'background': 'initial',
|
||||
'overflow': 'initial',
|
||||
'white-space': 'nowrap',
|
||||
'line-height': '120%',
|
||||
'text-align': 'center',
|
||||
'vertical-align': 'middle'
|
||||
});
|
||||
|
||||
function Class(options) {
|
||||
if (options && options.imgSrc !== null && ds.is.number(options.imgSrc)) {
|
||||
options.imgSrc = imgSrcArr[options.imgSrc]; // undefined时$.extend不覆盖默认配置
|
||||
}
|
||||
|
||||
this.hasNewSetting = ds.is.plainObject(options);
|
||||
this.$this = options.$this;
|
||||
this.settings = _({}, fnName.settings, this.hasNewSetting ? options : {});
|
||||
this.settings.overlayStyle = overlayStyle;
|
||||
this.settings.imageStyle = imageStyle;
|
||||
this.settings.textStyle = textStyle;
|
||||
}
|
||||
|
||||
_(Class.prototype, {
|
||||
show: function () {
|
||||
var _this = this;
|
||||
var $this = this.$this;
|
||||
var settings = this.settings;
|
||||
var beforeShow = settings.beforeShow;
|
||||
var overlayStyle = settings.overlayStyle;
|
||||
var imageStyle = settings.imageStyle;
|
||||
var textStyle = settings.textStyle;
|
||||
var textCss = settings.textCss || {};
|
||||
var $loadingObjSingle = $this.children('.' + loadingClassName);
|
||||
var hasImgSrc = !ds.is['undefined'](settings.imgSrc);
|
||||
|
||||
beforeShow && beforeShow(this, $this);
|
||||
|
||||
if (!this.hasNewSetting && $loadingObjSingle.size() > 0) {
|
||||
pteMethods.subsequent.apply(this, [
|
||||
$loadingObjSingle,
|
||||
'afterShow',
|
||||
'show',
|
||||
'show'
|
||||
]);
|
||||
|
||||
$(W).trigger(eventNameResize);
|
||||
} else {
|
||||
this.destroy('auto'), ds.loadImage(hasImgSrc ? settings.imgSrc : null, function (imgObj) {
|
||||
// create时不考虑动画
|
||||
var $overlay = $('<div></div>');
|
||||
var $image = $('<img />');
|
||||
var $text = $('<span></span>');
|
||||
var text = $.trim(settings.text);
|
||||
var overlayW = isBODY ? window.screen.availWidth : $this.outerWidth();
|
||||
var overlayH = isBODY ? window.screen.availHeight : $this.outerHeight();
|
||||
|
||||
overlayStyle['background'] = settings['background'];
|
||||
overlayStyle['z-index'] = settings['overlayZIndex'];
|
||||
overlayStyle['opacity'] = settings['opacity'];
|
||||
overlayStyle['height'] = overlayH;
|
||||
overlayStyle['width'] = overlayW;
|
||||
if (settings.inheritRadius) {
|
||||
// For IE
|
||||
overlayStyle['border-top-left-radius'] = $this.css('border-top-left-radius');
|
||||
overlayStyle['border-top-right-radius'] = $this.css('border-top-right-radius');
|
||||
overlayStyle['border-bottom-left-radius'] = $this.css('border-bottom-left-radius');
|
||||
overlayStyle['border-bottom-right-radius'] = $this.css('border-bottom-right-radius');
|
||||
}
|
||||
imageStyle['z-index'] = settings['imgZIndex'];
|
||||
textStyle['z-index'] = settings['imgZIndex'];
|
||||
|
||||
$overlay
|
||||
.addClass(loadingClassName)
|
||||
.addClass(settings.overlayClassName)
|
||||
.css(overlayStyle)
|
||||
.attr('title', settings.title)
|
||||
.appendTo($this).hide();
|
||||
|
||||
imgObj.src && $image
|
||||
.addClass(loadingClassName)
|
||||
.addClass(settings.imgClassName)
|
||||
.css(imageStyle)
|
||||
.attr('src', imgObj.src)
|
||||
.attr('title', settings.title)
|
||||
.appendTo($this).hide();
|
||||
|
||||
$text
|
||||
.addClass(loadingClassName)
|
||||
.addClass(settings.textClassName)
|
||||
.css(_({}, textStyle, textCss))
|
||||
.html(text)
|
||||
.attr('title', settings.title)
|
||||
.appendTo($this).hide();
|
||||
|
||||
setTimeout(function () {
|
||||
$overlay[!settings['opacity'] ? 'remove' : 'show']();
|
||||
$image[!hasImgSrc ? 'remove' : 'show']();
|
||||
$text[!text.length ? 'remove' : 'show']();
|
||||
$(W).trigger(eventNameResize);
|
||||
settings.afterShow && settings.afterShow(_this, $this);
|
||||
$this.trigger(loadingClassName + '.' + 'show', _this);
|
||||
}, 0.1e3);
|
||||
}, function (e) {
|
||||
throw new Error(e);
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
hide: errorFn,
|
||||
hideAll: errorFn,
|
||||
destroy: errorFn,
|
||||
destroyAll: errorFn
|
||||
};
|
||||
},
|
||||
|
||||
toggle: function () {
|
||||
if (this.$this.children('.' + loadingClassName + ':visible').size() > 0) {
|
||||
return this.hide();
|
||||
} else {
|
||||
return this.show();
|
||||
}
|
||||
},
|
||||
|
||||
hide: function () {
|
||||
return pteMethods.subsequent.apply(this, [
|
||||
this.$this.children('.' + loadingClassName),
|
||||
'afterHide',
|
||||
'hide',
|
||||
'hide'
|
||||
]);
|
||||
},
|
||||
|
||||
hideAll: function () {
|
||||
return pteMethods.subsequent.apply(this, [
|
||||
$('.' + loadingClassName),
|
||||
'afterHideAll',
|
||||
'hide',
|
||||
'hideAll'
|
||||
]);
|
||||
},
|
||||
|
||||
// <传入新配置/销毁后> 新建将启用最新全局配置
|
||||
destroy: function (isAuto) {
|
||||
return pteMethods.subsequent.apply(this, [
|
||||
this.$this.children('.' + loadingClassName),
|
||||
'afterHide',
|
||||
'remove',
|
||||
'destroy',
|
||||
isAuto
|
||||
]);
|
||||
},
|
||||
|
||||
destroyAll: function () {
|
||||
return pteMethods.subsequent.apply(this, [
|
||||
$('.' + loadingClassName),
|
||||
'afterHideAll',
|
||||
'remove',
|
||||
'destroyAll'
|
||||
]);
|
||||
}
|
||||
});
|
||||
|
||||
// 一个{}参数：更新全局配置&show <兼容IE8>
|
||||
if (ds.is.plainObject(arg1)) {
|
||||
if (arg1.imgSrc) {
|
||||
arg1.imgSrc = imgSrcArr[arg1.imgSrc];
|
||||
}
|
||||
|
||||
return $that.loading('show', _(fnName.settings, arg1));
|
||||
}
|
||||
|
||||
// arg1为string默认调用方法 & arg2默认为局部配置
|
||||
if (ds.is.string(arg1) || !arg1) {
|
||||
var loading = {}, loadingArr = [], rdm;
|
||||
|
||||
arg1 = arg1 ? arg1 : 'show';
|
||||
|
||||
$that.each(function (index, obj) {
|
||||
if (arg2) {
|
||||
arg2.$this = $(obj);
|
||||
|
||||
if (arg2.afterHideAll) {
|
||||
fnName.settings.afterHideAll = arg2.afterHideAll;
|
||||
}
|
||||
} else {
|
||||
arg2 = {$this: $(obj)};
|
||||
}
|
||||
|
||||
rdm = '.rdm' + ds.getTime() + index;
|
||||
loading = new Class(arg2);
|
||||
$(obj).data('loading', loading);
|
||||
ds.is['function'](loading[arg1]) && loading[arg1]();
|
||||
loadingArr.push(loading);
|
||||
|
||||
// 单击div/img/text是否隐藏
|
||||
$(obj).off(eventNameClick).on(eventNameClick, '.' + loadingClassName, function (e) {
|
||||
loading.settings.clickHide && $(obj).data('loading').hide();
|
||||
e.stopPropagation();
|
||||
return false;
|
||||
});
|
||||
|
||||
// resize监听
|
||||
$(W).off(eventNameResize + rdm).on(eventNameResize + rdm, function () {
|
||||
pteMethods.resize.call($(obj).data('loading') || null);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return loadingArr.length > 1 ? loadingArr : loadingArr[0];
|
||||
}
|
||||
});
|
||||
|
||||
return $;
|
||||
})();
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user