后台系统配置需要自定义的键值组件,改了一下,记录一个
自定义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修复,程序杀毒,插件定制都可以提供最佳解决方案。
未经允许不得转载:Str Tom工作室 » 后台系统配置“自定义”键值组件