PHP建站技术分享-从入门到精通PHP建站技术分享-从入门到精通PHP建站技术分享-从入门到精通

QQ:420220301 微信/手机:150-3210-7690
当前位置:首页 > CMS教程 > Fastadmin

后台系统配置“自定义”键值组件

管理员 2024-12-14
Fastadmin
10

后台系统配置需要自定义的键值组件,改了一下,记录一个
自定义html

<style>    .upload-image {        background: url('/assets/img/plus.png') no-repeat center center;        background-size: 30px 30px;        height: 30px;        width: 30px;        border: 1px solid #ccc;    }</style><dl class="fieldlist" data-template="leveltpl" data-name="row[{name}]" id="second-table">    <dd>        <ins>标题名称</ins>        <ins>描述文字</ins>        <ins>icon地址</ins>        <ins>按钮文字</ins>        <ins>跳转地址</ins>    </dd>    <dd><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> 追加</a></dd>    <textarea name="row[{name}]" class="form-control hide" cols="30" rows="5">{value}</textarea></dl><script id="leveltpl" type="text/html">    <dd class="form-inline">        <ins>            <input type="text" name="row[<%=name%>][<%=index%>][name]" class="form-control" value="<%=row['name']%>" placeholder="标题名称" size="10">        </ins>        <ins>            <input type="text" name="row[<%=name%>][<%=index%>][text]" class="form-control" value="<%=row['text']%>" placeholder="描述文字" size="10">        </ins>        <ins>            <input type="hidden" name="<%=name%>[<%=index%>][image]" id="c-image-<%=index%>" value="<%=row.image%>">            <button type="button" id="faupload-image" class="btn btn-danger faupload upload-image" data-input-id="c-image-<%=index%>" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false" <%if(row.image){%>style="background-image: url('<%=row.image%>')"<%}%>></button>        </ins>        <ins>            <input type="text" name="row[<%=name%>][<%=index%>][gowhat]" class="form-control" value="<%=row['gowhat']%>" placeholder="按钮文字" size="10">        </ins>        <ins>            <input type="text" name="row[<%=name%>][<%=index%>][pages]" class="form-control" value="<%=row['pages']%>" placeholder="跳转地址" size="10">        </ins>        <span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span>        <span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span>    </dd></script>

再到assets/js/general/config.js 添加上传
index: function () {

// 自定义上传图片            $(document).on("fa.event.appendfieldlist", "#second-table .btn-append", function (e, obj) {                //绑定上传组件                Form.events.faupload(obj);                //上传成功回调事件,变更按钮的背景                $(".upload-image", obj).data("upload-success", function (data) {                    $(this).css("background-image", "url('" + Fast.api.cdnurl(data.url) + "')");                })            });

}
样式图片


希望以上内容对你有所帮助!如果还有其他问题,请随时提问。 各类知识收集 拥有多年CMS企业建站经验,对 iCMS, Fastadmin, ClassCMS, LeCMS, PbootCMS, PHPCMS, 易优CMS, YzmCMS, 讯睿CMS, 极致CMS, Wordpress, HkCMS, YznCMS, WellCMS, ThinkCMF, 等各类cms的相互转化,程序开发,网站制作,bug修复,程序杀毒,插件定制都可以提供最佳解决方案。

扫码关注

qrcode

QQ交谈

回顶部