blackteay/ThinkAdmin
1
0
Fork 0
mirror of https://gitee.com/zoujingli/ThinkAdmin.git synced 2025-04-06 03:58:04 +08:00
Code Issues Projects Releases Wiki Activity

增加图片切换动画

Browse Source
This commit is contained in:
Anyon 2020-09-21 16:17:18 +08:00
parent 910b165ed5
commit 967f73aa98
2 changed files with 28 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
app/data/view/config/slider.html
View File

@ -2,24 +2,27 @@
{block name="content"} {block name="content"}
<div class="think-box-shadow"> <div class="think-box-shadow">
<form onsubmit="return false;" id="DataForm" class='layui-form' autocomplete="off" style="width:750px"> <form onsubmit="return false;" id="DataForm" class='layui-form layui-card noshadow' autocomplete="off" style="width:850px">
<div class="text-center font-s14 font-w7">{$title|default='图片数据管理'}<span class="color-desc font-s12">（建议尺寸：690px 250px）</span></div> <div class="layui-card-header text-center margin-20 font-w7 color-text layui-bg-gray border-radius-5">
<div class="hr-line-dashed"></div> {$title|default='图片数据管理'}<span class="color-desc font-s12"> ( 建议上传图片尺寸：690px 250px )</span>
<div class="padding-bottom-15" data-rule-list> </div>
<div class="layui-card-body margin-top-20 padding-bottom-0">
<div class="padding-left-20" data-rule-list>
<div class="layui-form-item text-center"> <div class="layui-form-item text-center">
<a data-item-add class="layui-btn layui-btn-primary">添加图片</a> <a data-item-add class="layui-btn layui-btn-primary">添加图片</a>
</div> </div>
</div> </div>
<div class="hr-line-dashed"></div> <div class="hr-line-dashed margin-top-30"></div>
<div class="layui-form-item text-center"> <div class="layui-form-item text-center padding-left-20">
<button class="layui-btn" data-submit>保存数据</button> <button class="layui-btn" data-submit>保存数据</button>
</div> </div>
</div>
</form> </form>
</div> </div>
<div data-item-tpl class="layui-hide"> <div data-item-tpl class="layui-hide">
<div class="layui-form-item padding-left-40 margin-left-40" data-rule-item> <div class="layui-form-item" data-rule-item>
<div class="layui-input-inline nowrap" style="width:120px"> <div class="layui-input-inline nowrap relative" style="width:180px">
<input data-upload-image name="img[]" type="hidden"> <input data-upload-image name="img[]" type="hidden">
</div> </div>
<label class="layui-input-inline nowrap relative margin-bottom-5" style="width:300px"> <label class="layui-input-inline nowrap relative margin-bottom-5" style="width:300px">
@ -49,6 +52,16 @@
margin-left: 5px; margin-left: 5px;
} }
[data-rule-item] {
padding-left: 40px;
margin-bottom: 20px;
}
[data-rule-item] .uploadimage {
width: 135px;
height: 100px;
}
[data-item-dn], [data-item-up], [data-item-rm] { [data-item-dn], [data-item-up], [data-item-rm] {
margin-top: -4px; margin-top: -4px;
margin-left: 5px; margin-left: 5px;

4
public/static/admin.js
View File

@ -511,7 +511,7 @@ $(function () {
/*! 上传单张图片 */ /*! 上传单张图片 */
$.fn.uploadOneImage = function () { $.fn.uploadOneImage = function () {
return this.each(function (input, template) { return this.each(function (input, template) {
input = $(this), template = $('<a data-file="one" class="uploadimage"><span class="layui-icon">&#x1006;</span></a>'); input = $(this), template = $('<a data-file="one" class="uploadimage transition"><span class="layui-icon">&#x1006;</span></a>');
template.attr('data-type', input.data('type') || 'png,jpg,gif'); template.attr('data-type', input.data('type') || 'png,jpg,gif');
template.attr('data-field', input.attr('name') || 'image').data('input', this); template.attr('data-field', input.attr('name') || 'image').data('input', this);
template.find('span').on('click', function (event) { template.find('span').on('click', function (event) {
@ -536,7 +536,7 @@ $(function () {
function showImageContainer(srcs) { function showImageContainer(srcs) {
$(srcs).each(function (idx, src, $image) { $(srcs).each(function (idx, src, $image) {
$image = $('<div class="uploadimage uploadimagemtl"><a class="layui-icon margin-right-5">&#xe602;</a><a class="layui-icon margin-right-5">&#x1006;</a><a class="layui-icon margin-right-5">&#xe603;</a></div>'); $image = $('<div class="uploadimage uploadimagemtl transition"><a class="layui-icon margin-right-5">&#xe602;</a><a class="layui-icon margin-right-5">&#x1006;</a><a class="layui-icon margin-right-5">&#xe603;</a></div>');
$image.attr('data-tips-image', encodeURI(src)).css('backgroundImage', 'url(' + encodeURI(src) + ')').on('click', 'a', function (event, index, prevs, $item) { $image.attr('data-tips-image', encodeURI(src)).css('backgroundImage', 'url(' + encodeURI(src) + ')').on('click', 'a', function (event, index, prevs, $item) {
event.stopPropagation(), $item = $(this).parent(), index = $(this).index(), prevs = $button.prevAll('div.uploadimage').length; event.stopPropagation(), $item = $(this).parent(), index = $(this).index(), prevs = $button.prevAll('div.uploadimage').length;
if (index === 0 && $item.index() !== prevs) $item.next().after($item); if (index === 0 && $item.index() !== prevs) $item.next().after($item);