资讯专栏INFORMATION COLUMN

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

terasum / 2157人阅读

摘要:这篇文章主要为大家详细介绍了结合仿微信后台多图文界面管理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下模仿微信后台管理的多图文界面,集成了异步上传文件的插件,供大家参考,具体内容如下效果图详细代码标题编辑

这篇文章主要为大家详细介绍了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"``>`
``
`<``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` `class``=``"sub-add"``>`
`<``a` `class``=``"block tc sub-add-btn"` `href``=``"#"` `id``=``"add"``> <``span`
`class``=``"vm dib sub-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-tip r"`
`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``=``"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;"``>删除`
``
``
`<``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; 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``=``"删除"` `/>`
``
``
``

javascript:

``

源码下载:微信多图文界面

本文已被整理到了《JavaScript微信开发技巧汇总》了解更多,欢迎大家学习阅读。

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》了解更多小编为大家精心整理的,希望喜欢。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/33761.html

相关文章

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

    摘要:这篇文章主要为大家详细介绍了结合仿微信后台多图文界面管理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下模仿微信后台管理的多图文界面,集成了异步上传文件的插件,供大家参考,具体内容如下效果图详细代码标题编辑 这篇文章主要为大家详细介绍了js结合Bootstrap仿微信后台多图文界面管理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 js模仿微信后台管理的多图文界面,集成了ajax...

    wushuiyong 评论0 收藏0
  • JavaScript结合Bootstrap仿微信后台多图界面管理

    摘要:这篇文章主要为大家详细介绍了结合仿微信后台多图文界面管理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下模仿微信后台管理的多图文界面,集成了异步上传文件的插件,供大家参考,具体内容如下效果图详细代码标题编辑 这篇文章主要为大家详细介绍了js结合Bootstrap仿微信后台多图文界面管理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 js模仿微信后台管理的多图文界面,集成了ajax...

    tain335 评论0 收藏0
  • Android实用库和项目 - 收藏集 - 掘金

    摘要:高仿微信融云版掘金一简述本项目由个人独立开发。项目博客地址高仿微信融云版项目源码地址码云最新最全的开源项目合集掘金是由整理并维护的安卓相关开源项目库集合。 Android 高仿微信图片查看花式效果 - Android - 掘金图片查看器,为各位追求用户体验的daLao提供更优质的服务 它能够 1、点击图片时以一种无缝顺畅的动画切换到图片查看的界面,同样以一种无缝顺畅的动画退出图片查看界...

    darkbaby123 评论0 收藏0
  • GitHub 上受欢迎的 Android UI Library 整理二

    摘要:通知克服和的限制高仿淘宝微信等热门通知视图通过一行代码实现通知功能工具类轮播框通知全新的通知栏聊天视图简化开发快速创建聊天信息视图聊天视图实现聊天界面基于实际需求做出的灵活可定制的功能模仿饿了么详情页的例子带 通知 https://github.com/Tapadoo/Al... ★2528 - 克服Toast和Snackbar的限制https://github.com/wenming...

    nifhlheimr 评论0 收藏0
  • app - 收藏集 - 掘金

    摘要:掘金该应用内容灵感来源于应用。理财计算器掘金理财计算器本文原创,转载请注明出处。前言最云阅一个仿网易云音乐,使用及豆瓣开发的开源项目掘金一款基于网易云音乐,使用及豆瓣开发的符合阅读类的开源项目。 [[源码] Android 不要错过的 7 个完整项目学习 - Android - 掘金](https://juejin.im/entry/58ba1...上周推荐了一个商业课程,很多人由于没...

    Rango 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<