当前位置: 首页 > Linux

JavaScript结合Bootstrap仿微信后台多图形界面管理

时间:2023-04-06 20:29:17 Linux

本文主要介绍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"``>``Title<``span``class``=``"i-title"``>````<``img``src``=``"../assets/homer_admin-v1.5/images/2.png"``style``=``"width:320px;"``/>``<``ul``class``=``"abstcsub-msg-opr"``style``=``"margin:10px10px;height:150px;width:320px;"``>``<``a``class``=``"th"``href``=``"javascript:void(0)"``onclick``=``"editDiv('div0')"``>``<``div``style``=``"宽度:320px;高度:120px;font-size:16px;"``>``编辑``````````<``div``class``=``"sub-add"``>``<``a``class``=``"blocktcsub-add-btn"``href``=``"#"``id``=``"add"``><``span``class``=``"vmdibsub-add-icon"``>增加一条````````<``div``id``=``"main"``>``<``div``class``=``"msg-editer"``id``=``"div0"``>``<``form``method``=``"POST"``enctype``=``"multipart/form-data"``action``=``""``>``<``label``class``=``"block"``for``=``""``>标题<``input``type``=``"text"``name``=``"Title"``value``=``"第0个"``id``=``"titlediv0"``onchange``=``"setTitle('div0')"``class``=``"msg-input"``/><``label``class``=``"block"``for``=``""``>作者<``em``class``=``"mp_desc"``>(选填)<``input``type``=``"text"``name``=``"Author"``value``=``""``id``=``"author"``class``=``"msg-input"``/>``<``label``class``=``"block"``for``=``""``>``span``class``=``"upload-tipr"``id``=``"upload-tip"``>建议大图尺寸:720像素*400像素封面``<``div``class``=``"cover-area"``style``=``"vertical-align:bottom;margin-bottom:10px;"``>``<``input``type``=``"file"``name``=``"file"``id``=``"filediv0"``/><``input``type``=``"按钮"``value``=``"上传"``onclick``=``"ajaxFileUpload('div0')"```/><``img``src``=``""``id``=``"imgdiv0"``style``=``"width:100px;vertical-align:bottom;border:1pxsolidgray"``/>``<``a``id``=``"rmdiv0"``href``=``"#"``onclick``=``"removeImage('div0')"``style``=``"vertical-align:bottom;"``>去掉``````<``label``class``=``"block"``for``=``""``>文字``<``textarea``name``=``"Content"``id``=``"myEditor"``>``<``div``class``=``"none"``id``=``"url-block"``style``=``"margin-top:14px;"``>``<``label``class``=``"block"``for``=``""``>原始链接<``em``class``=``'mp_desc'``>(选填)``<``input``type``=``"text"``name``=``"Content_Link"``value``=``""``id``=``"surl"``class``=``"msg-input"``/><``br``/>``````````<``div``style``=``"clear:both;padding-top:20px;"``>``<``div``style``=``"clear:both;文本对齐:居中;填充顶部:20px;border-top:1pxsolid#dddddd;"``>``<``input``type``=``"button"``onclick``=``'publishTemplate()'``class``=``"btnspan2btn-success"``value``=``"保存"``/><``input``type``=``"button"``onclick``=``"removeTemplate()"``class``=``"btnspan2btn-danger"``value``=``"delete"``/>```````javascript:``源码下载:微信多图文界面本文已整理成《JavaScript微信开发技巧汇总》了解更多,欢迎大家学习阅读给大家推荐一个现在很受关注的微信小程序教程:《微信小程序开发教程》了解更多,我已经为你精心整理,希望你喜欢。