fastadmin 编辑页面图片点击后再当前页面滑动

符文师

已于 2022-02-21 14:40:24 修改

阅读量293

点赞数

分类专栏： # php fastadmin 文章标签： javascript

于 2022-02-21 14:35:47 首次发布

本文链接：https://blog.csdn.net/qq_31315703/article/details/123046765

版权

php fastadmin 专栏收录该内容

30 篇文章 3 订阅

订阅专栏

edit.html

<div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Images')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-images" data-rule="" class="form-control" size="50" name="row[images]" type="text"
                       value="{$row.images}">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="plupload-images" class="btn btn-danger plupload"
                                  data-input-id="c-images"
                                  data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp"
                                  data-multiple="true" data-preview-id="p-images"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-images" class="btn btn-primary fachoose"
                                  data-input-id="c-images" data-mimetype="image/*" data-multiple="true"><i
                            class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-images"></span>
            </div>
            <ul class="row list-inline plupload-preview" id="p-images"></ul>
        </div>
    </div>

edit.js

define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'upload'], function ($, undefined, Backend, Table, Form, Upload) {
# 加载Upload模块

# edit 定义页面滑动效果
edit: function () {
     Upload.config.previewtpl = '<li class="col-xs-3"><a href="JavaScript:;" data-url="<%=url%>" class="thumbnail imgswitch"><img src="<%=fullurl%>" οnerrοr="this.src=\'' + Fast.api.fixurl("ajax/icon") + '?suffix=<%=suffix%>\';this.οnerrοr=null;" class="img-responsive img-center"></a><a href="javascript:;" class="btn btn-danger btn-xs btn-trash"><i class="fa fa-trash"></i></a></li>';
     
     $('#p-images').on('click', '.imgswitch',function(){

         var value = $("#c-images").val();

         var data = [];
         value = value.toString().split(",");

         $.each(value, function (index, value) {
             data.push({
                 src: Fast.api.cdnurl(value),
             });
         });
         Layer.photos({
             photos: {
                 "start": $(this).parent().index(),
                 "data": data
             },
             anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
         });
     })
     Controller.api.bindevent();
 },