摘要:这篇文章主要为大家详细介绍了结合仿微信后台多图文界面管理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下模仿微信后台管理的多图文界面,集成了异步上传文件的插件,供大家参考,具体内容如下效果图详细代码标题编辑
这篇文章主要为大家详细介绍了js结合Bootstrap仿微信后台多图文界面管理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
js模仿微信后台管理的多图文界面,集成了ajax异步上传文件的插件,供大家参考,具体内容如下
效果图:
详细代码:
html:
`<``div` `id``=``"wrap"``>` `<``div` `id``=``"sidebar"``>` `<``div` `class``=``"previewBox"``>` `` `<``div` `class``=``"cover"` `onmouseout``=``"removeCover(this);"` `onmouseover``=``"showCover(this);"``>` `<``h4` `class``=``"msg-t"` `style``=``"width: 320px;"` `id``=``"title2div0"``>` `标题<``span` `class``=``"i-title"``>``span``>` ```h4``>` `<``img` `src``=``"../assets/homer_admin-v1.5/images/2.png"` `style``=``"width: 320px;"` `/>` `<``ul` `class``=``"abs tc sub-msg-opr"` `style``=``"margin: 10px 10px; height: 150px; width: 320px;"``>` `<``a` `class``=``"th"` `href``=``"javascript:void(0)"` `onclick``=``"editDiv("div0")"``>` `<``div` `style``=``"width: 320px; height: 120px; font-size: 16px;"``>` `编辑``div``>` ```a``>` ```ul``>` ```div``>` ```div``>` `<``div` `class``=``"sub-add"``>` `<``a` `class``=``"block tc sub-add-btn"` `href``=``"#"` `id``=``"add"``> <``span` `class``=``"vm dib sub-add-icon"``>``span``>增加一条` ```a``>` ```div``>` ```div``>` `<``div` `id``=``"main"``>` `<``div` `class``=``"msg-editer"` `id``=``"div0"``>` `<``form` `method``=``"POST"` `enctype``=``"multipart/form-data"` `action``=``""``>` `<``label` `class``=``"block"` `for``=``""``>标题``label``> <``input` `type``=``"text"` `name``=``"Title"` `value``=``"第0个"` `id``=``"titlediv0"` `onchange``=``"setTitle("div0")"` `class``=``"msg-input"` `/> <``label` `class``=``"block"` `for``=``""``>作者<``em` `class``=``"mp_desc"``>(选填)``em``>``label``> <``input` `type``=``"text"` `name``=``"Author"` `value``=``""` `id``=``"author"` `class``=``"msg-input"` `/>` `<``label` `class``=``"block"` `for``=``""``><``span` `class``=``"upload-tip r"` `id``=``"upload-tip"``>大图片建议尺寸:720像素 * 400像素``span``>封面``label``>` `<``div` `class``=``"cover-area"` `style``=``"vertical-align: bottom; margin-bottom: 10px;"``>` `<``input` `type``=``"file"` `name``=``"file"` `id``=``"filediv0"` `/> <``input` `type``=``"button"` `value``=``"上传"` `onclick``=``"ajaxFileUpload("div0")"` `/> <``img` `src``=``""` `id``=``"imgdiv0"` `style``=``"width: 100px; vertical-align: bottom; border: 1px solid gray"` `/>` `<``a` `id``=``"rmdiv0"` `href``=``"#"` `onclick``=``"removeImage("div0")"` `style``=``"vertical-align: bottom;"``>删除``a``>` ```div``>` `` `<``label` `class``=``"block"` `for``=``""``>正文``label``>` `<``textarea` `name``=``"Content"` `id``=``"myEditor"``>``textarea``>` `<``div` `class``=``"none"` `id``=``"url-block"` `style``=``"margin-top: 14px;"``>` `<``label` `class``=``"block"` `for``=``""``>原文链接<``em` `class``=``"mp_desc"``>(选填)``em``>``label``>` `<``input` `type``=``"text"` `name``=``"Content_Link"` `value``=``""` `id``=``"surl"` `class``=``"msg-input"` `/> <``br` `/>` ```div``>` ```form``>` ```div``>` ```div``>` `<``div` `style``=``"clear: both; padding-top: 20px;"``>` `<``div` `style``=``"clear: both; text-align: center; padding-top: 20px; border-top: 1px solid #ffffdffffd;"``>` `<``input` `type``=``"button"` `onclick``=``"publishTemplate()"` `class``=``"btn span2 btn-success"` `value``=``"保存"` `/> <``input` `type``=``"button"` `onclick``=``"removeTemplate()"` `class``=``"btn span2 btn-danger"` `value``=``"删除"` `/>` ```div``>` ```div``>` ```div``>`
javascript:
``
源码下载:微信多图文界面
本文已被整理到了《JavaScript微信开发技巧汇总》了解更多,欢迎大家学习阅读。
为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》了解更多小编为大家精心整理的,希望喜欢。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/99282.html
阅读 1147·2021-11-11 16:55
阅读 3039·2021-08-16 11:00
阅读 2866·2019-08-30 15:56
阅读 3420·2019-08-30 11:24
阅读 3396·2019-08-30 11:05
阅读 3514·2019-08-29 15:15
阅读 2596·2019-08-26 13:57
阅读 2505·2019-08-23 18:17