头像样式修改,支持背景显示,图片不变形

This commit is contained in:
Anyon 2020-09-25 19:14:10 +08:00
parent 60835b8219
commit 6a44f51de5
9 changed files with 99 additions and 120 deletions

View File

@ -57,9 +57,7 @@
<label><input data-action-blur="{:request()->url()}" data-value="id#{$vo.id};action#sort;sort#{value}" data-loading="false" value="{$vo.sort}" class="list-sort-input"></label> <label><input data-action-blur="{:request()->url()}" data-value="id#{$vo.id};action#sort;sort#{value}" data-loading="false" value="{$vo.sort}" class="list-sort-input"></label>
</td> </td>
<td class='text-left nowrap'> <td class='text-left nowrap'>
<div class="headimg"> <div class="headimg" data-tips-image data-lazy-src="{$vo.headimg|default=''}"></div>
<img alt="img" data-tips-image src="{$vo.headimg|default=''}">
</div>
<div class="inline-block sub-span-blue"> <div class="inline-block sub-span-blue">
登录账号:<span><b>{$vo.username|default=''}</b></span><br> 登录账号:<span><b>{$vo.username|default=''}</b></span><br>
用户昵称:<span><b>{$vo.nickname|default='-'|raw}</b></span><br> 用户昵称:<span><b>{$vo.nickname|default='-'|raw}</b></span><br>

View File

@ -26,9 +26,7 @@
<label><input class="list-check-box" value='{$vo.id}' type='checkbox'></label> <label><input class="list-check-box" value='{$vo.id}' type='checkbox'></label>
</td> </td>
<td class="sub-span-blue nowrap"> <td class="sub-span-blue nowrap">
<div class="headimg"> <div class="headimg" data-tips-image data-lazy-src="{$vo.headimg|default='__ROOT__/static/theme/img/headimg.png'}"></div>
<img alt="img" data-tips-image src="{$vo.headimg|default='__ROOT__/static/theme/img/headimg.png'}">
</div>
<div class="inline-block"> <div class="inline-block">
{notempty name='vo.username'} {notempty name='vo.username'}
<div>姓名:<span>{$vo.username|default='-'}</span></div> <div>姓名:<span>{$vo.username|default='-'}</span></div>

View File

@ -55,9 +55,7 @@
</td> </td>
<td class='nowrap'> <td class='nowrap'>
{notempty name='vo.cover'} {notempty name='vo.cover'}
<div class="headimg"> <div class="headimg" data-tips-image data-lazy-src="{$vo.cover}"></div>
<img alt="img" data-tips-image src="{$vo.cover|default=''}">
</div>
{/notempty} {/notempty}
<div class="inline-block text-top sub-span-blue"> <div class="inline-block text-top sub-span-blue">
商品编号:<span>{$vo.code|default='--'}</span><br> 商品编号:<span>{$vo.code|default='--'}</span><br>

View File

@ -42,9 +42,7 @@
<label><input class="list-check-box" value='{$vo.openid}' type='checkbox'></label> <label><input class="list-check-box" value='{$vo.openid}' type='checkbox'></label>
</td> </td>
<td class='text-left nowrap'> <td class='text-left nowrap'>
<div class="headimg"> <div class="headimg" data-tips-image data-lazy-src="{$vo.headimgurl|default=''}"></div>
<img alt="img" src="{$vo.headimgurl|default=''}" data-tips-image>
</div>
<div class="inline-block"> <div class="inline-block">
<p>昵称:{$vo.nickname|default='--'}</p> <p>昵称:{$vo.nickname|default='--'}</p>
<p>区域:{$vo.country|default='--'} {$vo.province|default=''} {$vo.city|default=''}</p> <p>区域:{$vo.country|default='--'} {$vo.province|default=''} {$vo.city|default=''}</p>

View File

@ -14,18 +14,18 @@
// Layui & jQuery // Layui & jQuery
if (typeof jQuery === 'undefined') window.$ = window.jQuery = layui.$; if (typeof jQuery === 'undefined') window.$ = window.jQuery = layui.$;
window.form = layui.form, window.layer = layui.layer, window.laydate = layui.laydate; window.form = layui.form, window.layer = layui.layer, window.laydate = layui.laydate;
/*! 应用根路径 */
window.appRoot = (function (src) { window.appRoot = (function (src) {
return src.pop(), src.pop(), src.join('/') + '/'; return src.pop(), src.pop(), src.join('/') + '/';
})(document.scripts[document.scripts.length - 1].src.split('/')); })(document.scripts[document.scripts.length - 1].src.split('/'));
/*! 静态插件库路径 */
window.baseRoot = (function (src) { window.baseRoot = (function (src) {
return src.substring(0, src.lastIndexOf("/") + 1); return src.substring(0, src.lastIndexOf("/") + 1);
})(document.scripts[document.scripts.length - 1].src); })(document.scripts[document.scripts.length - 1].src);
/*! 动态插件库路径 */
window.tapiRoot = window.tapiRoot || window.appRoot + "admin"
window.tapiRoot = window.tapiRoot || window.baseRoot + "?s=admin" /*! require 配置 */
// require 配置参数
require.config({ require.config({
waitSeconds: 60, waitSeconds: 60,
baseUrl: baseRoot, baseUrl: baseRoot,
@ -54,7 +54,7 @@ require.config({
} }
}); });
// 注册jquery到require模块 /*! 注册 jquery 到 require 模块 */
define('jquery', [], function () { define('jquery', [], function () {
return layui.$; return layui.$;
}); });
@ -141,7 +141,7 @@ $(function () {
}), $dom.find('input[data-date-range]').map(function () { }), $dom.find('input[data-date-range]').map(function () {
this.setAttribute('autocomplete', 'off'); this.setAttribute('autocomplete', 'off');
laydate.render({ laydate.render({
type: this.getAttribute('data-date-range') || 'date', type: this.dataset.dateRange || 'date',
range: true, elem: this, done: function (value) { range: true, elem: this, done: function (value) {
$(this.elem).val(value).trigger('change'); $(this.elem).val(value).trigger('change');
} }
@ -149,17 +149,26 @@ $(function () {
}), $dom.find('input[data-date-input]').map(function () { }), $dom.find('input[data-date-input]').map(function () {
this.setAttribute('autocomplete', 'off'); this.setAttribute('autocomplete', 'off');
laydate.render({ laydate.render({
type: this.getAttribute('data-date-input') || 'date', type: this.dataset.dateInput || 'date',
range: false, elem: this, done: function (value) { range: false, elem: this, done: function (value) {
$(this.elem).val(value).trigger('change'); $(this.elem).val(value).trigger('change');
} }
}); });
}), $dom.find('[data-file]:not([data-inited])').map(function (index, elem, $this, field) { }), $dom.find('[data-file]:not([data-inited])').map(function (index, elem, $this, field) {
$this = $(elem), field = $this.attr('data-field') || 'file'; $this = $(elem), field = this.dataset.field || 'file';
if (!$this.data('input')) $this.data('input', $('[name="' + field + '"]').get(0)); if (!$this.data('input')) $this.data('input', $('[name="' + field + '"]').get(0));
$this.uploadFile(function (url, file) { $this.uploadFile(function (url, file) {
$($this.data('input')).data('file', file).val(url).trigger('change'); $($this.data('input')).data('file', file).val(url).trigger('change');
}); });
}), $dom.find('[data-lazy-src]:not([data-lazy-loaded])').each(function () {
if (this.dataset.lazyLoaded !== 'true') {
if (this.nodeName === 'IMG') {
this.src = this.dataset.lazySrc;
} else {
this.style.backgroundImage = 'url(' + this.dataset.lazySrc + ')';
}
this.dataset.lazyLoaded = "true";
}
}); });
}; };
// 在内容区显示视图 // 在内容区显示视图
@ -171,8 +180,8 @@ $(function () {
// 以 HASH 打开新网页 // 以 HASH 打开新网页
this.href = function (url, obj) { this.href = function (url, obj) {
if (url !== '#') window.location.href = '#' + $.menu.parseUri(url, obj); if (url !== '#') window.location.href = '#' + $.menu.parseUri(url, obj);
else if (obj && obj.getAttribute('data-menu-node')) { else if (obj && obj.dataset.menuNode) {
$('[data-menu-node^="' + obj.getAttribute('data-menu-node') + '-"][data-open!="#"]:first').trigger('click'); $('[data-menu-node^="' + obj.dataset.menuNode + '-"][data-open!="#"]:first').trigger('click');
} }
}; };
// 异步加载的数据 // 异步加载的数据
@ -226,7 +235,7 @@ $(function () {
index = layer.open({ index = layer.open({
type: 1, btn: false, area: "800px", content: res, title: title || '', success: function (dom, index) { type: 1, btn: false, area: "800px", content: res, title: title || '', success: function (dom, index) {
$(dom).find('[data-close]').off('click').on('click', function () { $(dom).find('[data-close]').off('click').on('click', function () {
if ($(this).attr('data-confirm')) return $.msg.confirm($(this).attr('data-confirm'), function (_index) { if (this.dataset.confirm) return $.msg.confirm(this.dataset.confirm, function (_index) {
layer.close(_index), layer.close(index); layer.close(_index), layer.close(index);
}), false; }), false;
layer.close(index); layer.close(index);
@ -254,7 +263,7 @@ $(function () {
node = node || location.href.replace(/.*spm=([\d\-m]+).*/ig, '$1'); node = node || location.href.replace(/.*spm=([\d\-m]+).*/ig, '$1');
if (!/^m-/.test(node)) { if (!/^m-/.test(node)) {
var $menu = $('[data-menu-node][data-open*="' + url.replace(/\.html$/ig, '') + '"]'); var $menu = $('[data-menu-node][data-open*="' + url.replace(/\.html$/ig, '') + '"]');
return $menu.size() ? $menu.get(0).getAttribute('data-menu-node') : ''; return $menu.size() ? $menu.get(0).dataset.menuNode : '';
} }
return node; return node;
}; };
@ -272,7 +281,7 @@ $(function () {
} }
uri = this.getUri(uri); uri = this.getUri(uri);
if (typeof params.spm !== 'string') { if (typeof params.spm !== 'string') {
params.spm = obj && obj.getAttribute('data-menu-node') || this.queryNode(uri); params.spm = obj && obj.dataset.menuNode || this.queryNode(uri);
} }
if (typeof params.spm !== 'string' || params.spm.length < 1) delete params.spm; if (typeof params.spm !== 'string' || params.spm.length < 1) delete params.spm;
// 生成新的 URL 参数 // 生成新的 URL 参数
@ -294,7 +303,7 @@ $(function () {
}).trigger('resize'); }).trigger('resize');
/*! Mini 菜单模式时TIPS文字显示 */ /*! Mini 菜单模式时TIPS文字显示 */
$('[data-target-tips]').mouseenter(function () { $('[data-target-tips]').mouseenter(function () {
if ($menu.hasClass(miniClass)) $(this).attr('index', layer.tips($(this).attr('data-target-tips') || '', this)); if ($menu.hasClass(miniClass)) $(this).attr('index', layer.tips(this.dataset.targetTips || '', this));
}).mouseleave(function () { }).mouseleave(function () {
layer.close($(this).attr('index')); layer.close($(this).attr('index'));
}); });
@ -306,7 +315,7 @@ $(function () {
/*! 同步二级菜单展示状态 */ /*! 同步二级菜单展示状态 */
this.syncOpenStatus = function (mode) { this.syncOpenStatus = function (mode) {
$('[data-submenu-layout]').map(function (node) { $('[data-submenu-layout]').map(function (node) {
node = $(this).attr('data-submenu-layout'); node = this.dataset.submenuLayout;
if (mode === 1) { if (mode === 1) {
layui.data('admin-menu-stat', {key: node, value: $(this).hasClass('layui-nav-itemed') ? 2 : 1}); layui.data('admin-menu-stat', {key: node, value: $(this).hasClass('layui-nav-itemed') ? 2 : 1});
} else if ((layui.data('admin-menu-stat')[node] || 2) === 2) { } else if ((layui.data('admin-menu-stat')[node] || 2) === 2) {
@ -437,7 +446,7 @@ $(function () {
} }
return event.preventDefault(), false; return event.preventDefault(), false;
}).find('[data-form-loaded]').map(function () { }).find('[data-form-loaded]').map(function () {
$(this).html(this.getAttribute('data-form-loaded') || this.innerHTML); $(this).html(this.dataset.formLoaded || this.innerHTML);
$(this).removeAttr('data-form-loaded').removeClass('layui-disabled'); $(this).removeAttr('data-form-loaded').removeClass('layui-disabled');
}); });
return $(form).data('validate', this); return $(form).data('validate', this);
@ -447,11 +456,12 @@ $(function () {
/*! 自动监听规则内表单 */ /*! 自动监听规则内表单 */
$.vali.listen = function () { $.vali.listen = function () {
$('form[data-auto]').map(function () { $('form[data-auto]').map(function (index, form) {
if ($(this).attr('data-listen') !== 'true') $(this).attr('data-listen', 'true').vali(function (data) { if (this.dataset.listen === 'true') return true;
var call = $(this).attr('data-callback') || '_default_callback'; $(this).attr('data-listen', 'true').vali(function (data) {
var type = this.getAttribute('method') || 'POST', tips = this.getAttribute('data-tips') || undefined; var call = form.dataset.callback || '_default_callback';
var time = this.getAttribute('data-time') || undefined, href = this.getAttribute('action') || window.location.href; var type = form.method || 'POST', tips = form.dataset.tips || undefined;
var time = form.dataset.time || undefined, href = form.action || window.location.href;
$.form.load(href, data, type, window[call] || undefined, true, tips, time); $.form.load(href, data, type, window[call] || undefined, true, tips, time);
}); });
}); });
@ -465,7 +475,7 @@ $(function () {
/*! 表单转JSON */ /*! 表单转JSON */
$.fn.formToJson = function () { $.fn.formToJson = function () {
var self = this, data = {}, push = {}; var self = this, data = {}, push = {};
var patterns = {"key": /[a-zA-Z0-9_]+|(?=\[\])/g, "push": /^$/, "fixed": /^\d+$/, "named": /^[a-zA-Z0-9_]+$/}; var patterns = {"key": /[a-zA-Z0-9_]+|(?=\[])/g, "push": /^$/, "fixed": /^\d+$/, "named": /^[a-zA-Z0-9_]+$/};
this.build = function (base, key, value) { this.build = function (base, key, value) {
return (base[key] = value), base; return (base[key] = value), base;
}; };
@ -493,7 +503,7 @@ $(function () {
/*! 全局文件上传入口 */ /*! 全局文件上传入口 */
$.fn.uploadFile = function (callback) { $.fn.uploadFile = function (callback) {
if (this.attr('data-inited')) return false; if (this.attr('data-inited')) return false;
var that = this, mode = $(this).attr('data-file') || 'one'; var that = this, mode = this.attr('data-file') || 'one';
this.attr('data-inited', true).attr('data-multiple', (mode !== 'btn' && mode !== 'one') ? 1 : 0); this.attr('data-inited', true).attr('data-multiple', (mode !== 'btn' && mode !== 'one') ? 1 : 0);
require(['upload'], function (apply) { require(['upload'], function (apply) {
apply.call(this, that, callback); apply.call(this, that, callback);
@ -502,15 +512,15 @@ $(function () {
/*! 上传单张图片 */ /*! 上传单张图片 */
$.fn.uploadOneImage = function () { $.fn.uploadOneImage = function () {
return this.each(function (input, template) { return this.each(function ($in, $tpl) {
input = $(this), template = $('<a data-file="one" class="uploadimage transition"><span class="layui-icon">&#x1006;</span></a>'); $in = $(this), $tpl = $('<a data-file="one" class="uploadimage transition"><span class="layui-icon">&#x1006;</span></a>');
template.attr('data-type', input.data('type') || 'png,jpg,gif'); $tpl.attr('data-type', $in.data('type') || 'png,jpg,gif');
template.attr('data-field', input.attr('name') || 'image').data('input', this); $tpl.attr('data-field', $in.attr('name') || 'image').data('input', this);
template.find('span').on('click', function (event) { $tpl.find('span').on('click', function (event) {
event.stopPropagation(), template.attr('style', ''), input.val(''); event.stopPropagation(), $tpl.attr('style', ''), $in.val('');
}); });
input.attr('name', template.attr('data-field')).after(template).on('change', function () { $in.attr('name', $tpl.attr('data-field')).after($tpl).on('change', function () {
if (this.value) template.css('backgroundImage', 'url(' + encodeURI(this.value) + ')'); if (this.value) $tpl.css('backgroundImage', 'url(' + encodeURI(this.value) + ')');
}).trigger('change'); }).trigger('change');
}), this; }), this;
}; };
@ -546,11 +556,10 @@ $(function () {
/*! 注册 data-load 事件行为 */ /*! 注册 data-load 事件行为 */
$body.on('click', '[data-load]', function () { $body.on('click', '[data-load]', function () {
var url = $(this).attr('data-load'), tips = $(this).attr('data-tips'), time = $(this).attr('data-time'); var url = this.dataset.load, tips = this.dataset.tips, time = this.dataset.time;
if ($(this).attr('data-confirm')) return $.msg.confirm($(this).attr('data-confirm'), function () { this.dataset.confirm ? $.msg.confirm(this.dataset.confirm, function () {
$.form.load(url, {}, 'get', null, true, tips, time);
});
$.form.load(url, {}, 'get', null, true, tips, time); $.form.load(url, {}, 'get', null, true, tips, time);
}) : $.form.load(url, {}, 'get', null, true, tips, time);
}); });
/*! 注册 data-serach 表单搜索行为 */ /*! 注册 data-serach 表单搜索行为 */
@ -568,17 +577,17 @@ $(function () {
/*! 注册 data-modal 事件行为 */ /*! 注册 data-modal 事件行为 */
$body.on('click', '[data-modal]', function () { $body.on('click', '[data-modal]', function () {
return $.form.modal($(this).attr('data-modal'), 'open_type=modal', $(this).attr('data-title') || $(this).text() || '编辑'); return $.form.modal(this.dataset.modal, 'open_type=modal', this.dataset.title || this.innerText || '编辑');
}); });
/*! 注册 data-open 事件行为 */ /*! 注册 data-open 事件行为 */
$body.on('click', '[data-open]', function () { $body.on('click', '[data-open]', function () {
$.form.href($(this).attr('data-open'), this); $.form.href(this.dataset.open, this);
}); });
/*! 注册 data-dbclick 事件行为 */ /*! 注册 data-dbclick 事件行为 */
$body.on('dblclick', '[data-dbclick]', function () { $body.on('dblclick', '[data-dbclick]', function () {
$(this).find(this.getAttribute('data-dbclick') || '[data-dbclick]').trigger('click'); $(this).find(this.dataset.dbclick || '[data-dbclick]').trigger('click');
}); });
/*! 注册 data-reload 事件行为 */ /*! 注册 data-reload 事件行为 */
@ -587,44 +596,40 @@ $(function () {
}); });
/*! 注册 data-check 事件行为 */ /*! 注册 data-check 事件行为 */
$body.on('click', '[data-check-target]', function () { $body.on('click', '[data-check-target]', function (event) {
var checked = !!this.checked; $(this.dataset.checkTarget).map(function () {
$($(this).attr('data-check-target')).map(function () { (this.checked = !!event.target.checked), $(this).trigger('change');
(this.checked = checked), $(this).trigger('change');
}); });
}); });
/*! 注册 data-action 事件行为 */ /*! 注册 data-action 事件行为 */
$body.on('click', '[data-action]', function () { $body.on('click', '[data-action]', function () {
var $this = $(this), data = {}, time = $this.attr('data-time'), action = $this.attr('data-action'); var data = {}, time = this.dataset.time, action = this.dataset.action;
var loading = $this.attr('data-loading'), method = $this.attr('data-method') || 'post'; var loading = this.dataset.loading, method = this.dataset.method || 'post';
var rule = $this.attr('data-value') || (function (rule, ids) { var rule = this.dataset.value || (function (elem, rule, ids) {
$($this.attr('data-target') || 'input[type=checkbox].list-check-box').map(function () { $(elem.dataset.target || 'input[type=checkbox].list-check-box').map(function () {
(this.checked) && ids.push(this.value); (this.checked) && ids.push(this.value);
}); });
return ids.length > 0 ? rule.replace('{key}', ids.join(',')) : ''; return ids.length > 0 ? rule.replace('{key}', ids.join(',')) : '';
}).call(this, $this.attr('data-rule') || '', []) || ''; })(this, this.dataset.rule || '', []) || '';
if (rule.length < 1) return $.msg.tips('请选择需要更改的数据!'); if (rule.length < 1) return $.msg.tips('请选择需要更改的数据!');
var rules = rule.split(';'); rule.split(';').forEach(function (rule) {
for (var i in rules) { if (rule.length < 2) return $.msg.tips('异常的数据操作规则,请修改规则!');
if (rules[i].length < 2) return $.msg.tips('异常的数据操作规则,请修改规则!'); data[rule.split('#')[0]] = rule.split('#')[1];
data[rules[i].split('#')[0]] = rules[i].split('#')[1];
}
data['_token_'] = $this.attr('data-token') || $this.attr('data-csrf') || '--';
var load = loading !== 'false', tips = typeof loading === 'string' ? loading : undefined;
if (!$this.attr('data-confirm')) $.form.load(action, data, method, false, load, tips, time);
else $.msg.confirm($this.attr('data-confirm'), function () {
$.form.load(action, data, method, false, load, tips, time);
}); });
data['_token_'] = this.dataset.token || this.dataset.csrf || '--';
var load = loading !== 'false', tips = typeof loading === 'string' ? loading : undefined;
this.dataset.confirm ? $.msg.confirm(this.dataset.confirm, function () {
$.form.load(action, data, method, false, load, tips, time);
}) : $.form.load(action, data, method, false, load, tips, time);
}); });
/*! 表单元素失焦时提交 */ /*! 表单元素失焦时提交 */
$body.on('blur', '[data-action-blur]', function () { $body.on('blur', '[data-action-blur]', function () {
var data = {}, that = this, $this = $(this), action = $this.attr('data-action-blur'); var data = {}, that = this, $this = $(this), action = this.dataset.actionBlur;
var time = $this.attr('data-time'), loading = $this.attr('data-loading') || false; var time = this.dataset.time, loading = this.dataset.loading || false, load = loading !== 'false';
var load = loading !== 'false', tips = typeof loading === 'string' ? loading : undefined; var tips = typeof loading === 'string' ? loading : undefined, method = this.dataset.method || 'post';
var method = $this.attr('data-method') || 'post', confirm = $this.attr('data-confirm'); var attrs = this.dataset.value.replace('{value}', $this.val()).split(';');
var attrs = $this.attr('data-value').replace('{value}', $this.val()).split(';');
for (var i in attrs) { for (var i in attrs) {
if (attrs[i].length < 2) return $.msg.tips('异常的数据操作规则,请修改规则!'); if (attrs[i].length < 2) return $.msg.tips('异常的数据操作规则,请修改规则!');
data[attrs[i].split('#')[0]] = attrs[i].split('#')[1]; data[attrs[i].split('#')[0]] = attrs[i].split('#')[1];
@ -632,43 +637,39 @@ $(function () {
that.callback = function (ret) { that.callback = function (ret) {
return $this.css('border', (ret && ret.code) ? '1px solid #e6e6e6' : '1px solid red'), false; return $this.css('border', (ret && ret.code) ? '1px solid #e6e6e6' : '1px solid red'), false;
}; };
data['_token_'] = $this.attr('data-token') || $this.attr('data-csrf') || '--'; data['_token_'] = this.dataset.token || this.dataset.csrf || '--';
if (!confirm) return $.form.load(action, data, method, that.callback, load, tips, time); this.dataset.confirm ? $.msg.confirm(this.dataset.confirm, function () {
$.msg.confirm(confirm, function () {
$.form.load(action, data, method, that.callback, load, tips, time); $.form.load(action, data, method, that.callback, load, tips, time);
}); }) : $.form.load(action, data, method, that.callback, load, tips, time);
}); });
/*! 表单元素失去焦点时数字 */ /*! 表单元素失去焦点时数字 */
$body.on('blur', '[data-blur-number]', function (fiexd) { $body.on('blur', '[data-blur-number]', function (fiexd) {
fiexd = this.getAttribute('data-blur-number') || 0; fiexd = this.dataset.blurNumber || 0;
this.value = (parseFloat(this.value) || 0).toFixed(fiexd); this.value = (parseFloat(this.value) || 0).toFixed(fiexd);
}); });
/*! 注册 data-href 事件行为 */ /*! 注册 data-href 事件行为 */
$body.on('click', '[data-href]', function (href) { $body.on('click', '[data-href]', function (href) {
href = $(this).attr('data-href'); href = this.dataset.href;
if (href && href.indexOf('#') !== 0) window.location.href = href; if (href && href.indexOf('#') !== 0) window.location.href = href;
}); });
/*! 注册 data-iframe 事件行为 */ /*! 注册 data-iframe 事件行为 */
$body.on('click', '[data-iframe]', function () { $body.on('click', '[data-iframe]', function () {
$(this).attr('data-index', $.form.iframe( $(this).attr('data-index', $.form.iframe(this.dataset.iframe, this.dataset.title || '窗口', this.dataset.area || undefined));
$(this).attr('data-iframe'), $(this).attr('data-title') || '窗口',
$(this).attr('data-area') || undefined)
);
}); });
/*! 注册 data-icon 事件行为 */ /*! 注册 data-icon 事件行为 */
$body.on('click', '[data-icon]', function (field, location) { $body.on('click', '[data-icon]', function (field, location) {
location = tapiRoot + '/api.plugs/icon'; location = tapiRoot + '/api.plugs/icon';
field = $(this).attr('data-icon') || $(this).attr('data-field') || 'icon'; field = this.dataset.icon || this.dataset.field || 'icon';
$.form.iframe(location + (location.indexOf('?') > -1 ? '&' : '?') + 'field=' + field, '图标选择'); $.form.iframe(location + (location.indexOf('?') > -1 ? '&' : '?') + 'field=' + field, '图标选择');
}); });
/*! 注册 data-copy 事件行为 */ /*! 注册 data-copy 事件行为 */
$body.on('click', '[data-copy]', function () { $body.on('click', '[data-copy]', function () {
$.copyToClipboard(this.getAttribute('data-copy')); $.copyToClipboard(this.dataset.copy);
}); });
$.copyToClipboard = function (content, input) { $.copyToClipboard = function (content, input) {
input = document.createElement('textarea'); input = document.createElement('textarea');
@ -689,7 +690,7 @@ $(function () {
/*! 注册 data-tips-image 事件行为 */ /*! 注册 data-tips-image 事件行为 */
$body.on('click', '[data-tips-image]', function () { $body.on('click', '[data-tips-image]', function () {
$.previewImage(this.getAttribute('data-tips-image') || this.src, this.getAttribute('data-width')); $.previewImage(this.dataset.tipsImage || this.dataset.lazySrc || this.src, this.dataset.with);
}); });
$.previewImage = function (src, area) { $.previewImage = function (src, area) {
var img = new Image(), index = $.msg.loading(); var img = new Image(), index = $.msg.loading();
@ -710,7 +711,7 @@ $(function () {
/*! 注册 data-phone-view 事件行为 */ /*! 注册 data-phone-view 事件行为 */
$body.on('click', '[data-phone-view]', function () { $body.on('click', '[data-phone-view]', function () {
$.previewPhonePage(this.getAttribute('data-phone-view') || this.href); $.previewPhonePage(this.dataset.phoneView || this.href);
}); });
$.previewPhonePage = function (href, title, template) { $.previewPhonePage = function (href, title, template) {
template = '<div><div class="mobile-preview pull-left"><div class="mobile-header">_TITLE_</div><div class="mobile-body"><iframe id="phone-preview" src="_URL_" frameborder="0" marginheight="0" marginwidth="0"></iframe></div></div></div>'; template = '<div><div class="mobile-preview pull-left"><div class="mobile-header">_TITLE_</div><div class="mobile-body"><iframe id="phone-preview" src="_URL_" frameborder="0" marginheight="0" marginwidth="0"></iframe></div></div></div>';
@ -718,16 +719,15 @@ $(function () {
}; };
/*! 表单编辑返回操作 */ /*! 表单编辑返回操作 */
$body.on('click', '[data-history-back]', function (title) { $body.on('click', '[data-history-back]', function () {
title = this.getAttribute('data-history-back') || '确定要返回上一页吗?'; $.msg.confirm(this.dataset.historyBack || '确定要返回吗?', function (index) {
$.msg.confirm(title, function (index) {
history.back(), $.msg.close(index); history.back(), $.msg.close(index);
}) })
}); });
/*! 异步任务状态监听与展示 */ /*! 异步任务状态监听与展示 */
$body.on('click', '[data-queue]', function (action) { $body.on('click', '[data-queue]', function (action) {
action = this.getAttribute('data-queue') || ''; action = this.dataset.queue || '';
if (action.length < 1) return $.msg.tips('任务地址不能为空!'); if (action.length < 1) return $.msg.tips('任务地址不能为空!');
this.doRuntime = function (index) { this.doRuntime = function (index) {
$.form.load(action, {}, 'post', function (ret) { $.form.load(action, {}, 'post', function (ret) {
@ -736,7 +736,7 @@ $(function () {
} }
}), $.msg.close(index); }), $.msg.close(index);
}; };
$(this).attr('data-confirm') ? $.msg.confirm($(this).attr('data-confirm'), this.doRuntime) : this.doRuntime(0); this.dataset.confirm ? $.msg.confirm(this.dataset.confirm, this.doRuntime) : this.doRuntime(0);
}); });
$.loadQueue = function (code, doScript, doAjax) { $.loadQueue = function (code, doScript, doAjax) {
layer.open({ layer.open({
@ -800,29 +800,15 @@ $(function () {
})(code) })(code)
}; };
/*! 图片懒加载处理 */
$(window).on('scroll resize load', function () {
var notFoundCount = 0, maxNotFound = 2, screenHeight = $(window).height();
$('[data-lazy-src]:not([data-lazy-loaded])').each(function (src, pos) {
if (this.getAttribute('data-lazy-loaded')) return true;
src = this.dataset.lazySrc, pos = this.getBoundingClientRect();
if (pos.bottom <= 0 || !src) return true;
if (pos.top >= screenHeight) return (notFoundCount++) < maxNotFound;
this.nodeName === 'IMG' ? this.src = src : this.style.backgroundImage = 'url(' + src + ')';
this.setAttribute('data-lazy-loaded', true);
});
});
/*! 图片加载异常处理 */ /*! 图片加载异常处理 */
document.addEventListener('error', function (event, elem) { document.addEventListener('error', function (event) {
elem = event.target; var elem = event.target;
if (elem.tagName.toLowerCase() === 'img') { if (elem.nodeName === 'IMG') {
elem.src = baseRoot + 'theme/img/404_icon.png'; event.target.src = baseRoot + 'theme/img/404_icon.png';
} }
}, true); }, true);
/*! 初始化事件 */ /*! 初始化事件 */
$.menu.listen(); $.menu.listen();
$.vali.listen(); $.vali.listen();
}); });

View File

@ -33,12 +33,10 @@ $(function () {
/*! 登录图形验证码刷新 */ /*! 登录图形验证码刷新 */
$body.on('click', '[data-captcha]', function () { $body.on('click', '[data-captcha]', function () {
var $that = $(this), $form = $that.parents('form'); var $that = $(this), $form = $that.parents('form');
var action = this.getAttribute('data-captcha') || location.href; var action = this.dataset.captcha || location.href;
if (action.length < 5) return $.msg.tips('请设置验证码请求及验证地址'); if (action.length < 5) return $.msg.tips('请设置验证码请求及验证地址');
var type = this.getAttribute('data-captcha-type') || 'captcha-type'; var type = this.dataset.captchaType || 'captcha-type', token = this.dataset.captchaToken || 'captcha-token';
var token = this.getAttribute('data-captcha-token') || 'captcha-token'; var uniqid = this.dataset.fieldUniqid || 'captcha-uniqid', verify = this.dataset.fieldVerify || 'captcha-verify';
var uniqid = this.getAttribute('data-field-uniqid') || 'captcha-uniqid';
var verify = this.getAttribute('data-field-verify') || 'captcha-verify';
$.form.load(action, {type: type, token: token}, 'post', function (ret) { $.form.load(action, {type: type, token: token}, 'post', function (ret) {
if (ret.code) { if (ret.code) {
$that.html('<img alt="img" src="' + ret.data.image + '"><input type="hidden">').find('input').attr('name', uniqid).val(ret.data.uniqid || ''); $that.html('<img alt="img" src="' + ret.data.image + '"><input type="hidden">').find('input').attr('name', uniqid).val(ret.data.uniqid || '');

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -312,6 +312,9 @@ label.think-radio, label.think-checkbox {
border-radius: 50%; border-radius: 50%;
vertical-align: middle; vertical-align: middle;
box-shadow: @minShadow; box-shadow: @minShadow;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
> img { > img {
width: 110%; width: 110%;