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


Posted in Javascript onJuly 22, 2016

js模仿微信后台管理的多图文界面,集成了ajax异步上传文件的插件,供大家参考,具体内容如下

效果图:

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

详细代码:

html:

<div id="wrap">
 <div id="sidebar">
 <div class="previewBox">
  <!-- <p style="margin:10px 14px 0 14px;"><span class="msg-date">2013-08-14</span></p>-->

  <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>
  <input type="text" name="Message_URL" value="" id="url" class="msg-input">
-->
  <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 #dddddd;">
  <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:

<script>
 var arr = [ 'div1', 'div2', 'div3', 'div4', 'div5', 'div6', 'div7' ];
 var arr2 = new Array();
 var showDiv = "div0";
 var option = {
 initialContent : '在编辑器中默认显示的内容',//初始化编辑器的内容

 initialFrameHeight : 340
 };
 var editor = new UE.ui.Editor(option);
 editor.render("myEditor");

 function removeImage(id) {
 $("#img" + id).hide();
 $("#rm" + id).hide();
 }

 function showCover(obj) {
 $(obj).addClass("sub-msg-opr-show");
 }
 function removeCover(obj) {
 $(obj).removeClass("sub-msg-opr-show");
 }

 function editDiv(obj) {
 if (showDiv != obj) {
  $("#" + showDiv).hide();
  $("#" + obj).show();
  showDiv = obj;
 }
 }

 function removeDiv(obj) {
 $("#s" + obj).remove();
 $("#" + obj).remove();
 $("#rich" + obj).remove();
 arr.push(obj);
 arr2.splice($.inArray(obj, arr2), 1);
 if (arr2.length == 0) {
  showDiv = "div0";
  $("#" + showDiv).show();
 } else {
  if (obj == showDiv) {
  showDiv = arr2.pop();
  arr2.push(showDiv);
  $("#" + showDiv).show();
  } else {
  $("#" + showDiv).show();
  showDiv = arr2.pop();
  arr2.push(showDiv);
  }
 }
 }

 function setTitle(obj) {
 $("#title2" + obj).text($("#title" + obj).val());
 }

 $("#add")
  .click(
  function() {
  var msgDiv;
  //var msgDiv2;
  if (arr.length == 7) {
   $("#" + showDiv).hide();
   msgDiv = arr.pop();
   arr2.push(msgDiv);
   showDiv = msgDiv;
  } else if (arr.length == 0) {
   alert('最多添加8个图文信息');
   return;
  } else {
   msgDiv = arr.pop();
   //msgDiv2=arr2.pop();
   $("#" + showDiv).hide();
   //arr2.push(msgDiv2);
   arr2.push(msgDiv);
   showDiv = msgDiv;
  }
  $(".previewBox")
   .append(
   "<div class='cover' id='s"
   + msgDiv
   + "' style='border-top:1px solid #C6C6C6;height: 120px;' onmouseout='removeCover(this);'"
   + " onmouseover='showCover(this);'><div> <div style='float:left;width: 250px; word-break:break-all;' id='title2"+msgDiv+"'>标题</div> <div style='float:right;'> "
   + "<img src='../assets/homer_admin-v1.5/images/1.png' style='width: 80px;height: 80px;'/> </div> </div> <ul class='abs tc sub-msg-opr' style='margin-left: 0;'> <li><div style='width: 150px;"+
   " height: 120px; font-size: 16px;'><a style='line-height:100px;' href='javascript:void(0)' onclick='editDiv(\""
   + msgDiv
   + "\");return false;'> 编辑</a> "
   + "<a style='line-height:100px;' href='javascript:void(0)'"
   + " onclick='removeDiv(\""
   + msgDiv
   + "\");return false;'> 删除 </a></div> </li></ul> </div>");
  $("#main")
   .append(
   " <div class='msg-editer' id='"+msgDiv+"'> "
   + "<form method='POST' enctype='multipart/form-data' action=''> <label class='block' for=''>标题</label>"
   + " <input type='text' name='Title' id='title"
   + msgDiv
   + "' onchange='setTitle(\""
   + msgDiv
   + "\")' 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"+msgDiv+"'/>"
   + "<input type='button' value='上传' onclick='ajaxFileUpload(\""
   + msgDiv
   + "\")'/>"
   + " <img src='' id='img"+msgDiv+"' style='width: 100px;vertical-align: bottom;border: 1px solid gray'/>"
   + "<a id='rm"
   + msgDiv
   + "' href='#' onclick='removeImage(\""
   + msgDiv
   + "\")' style='vertical-align: bottom;'>删除</a></div>"
   +
    /* " <label class='block' for=''>图文链接</label>"+
    "<input type='text' name='Message_URL' value='' id='url' class='msg-input'>"+*/
   "<label class='block' for=''>正文</label><textarea name='Content' id='rich"+msgDiv+"'></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>");
  editor.render("rich" + msgDiv);
  });
 function ajaxFileUpload(id) {
 var filename = $("#file" + id).val();
 var suffix;
 if (filename != "") {
  suffix = filename.substr(filename.indexOf(".") + 1,
   filename.length);
 }
 if (filename == "") {
  alert("请选择要上传的图片");
 } else if (suffix != "jpg" && suffix != "png") {
  alert("文件格式有无");
 } else {
  $.ajaxFileUpload({
  url : 'fileUpload', //用于文件上传的服务器端请求地址
  type: 'post',
  fileElementId : 'file' + id, //文件上传域的ID
  dataType : 'json', //返回值类型 一般设置为json
  success : function(data, status) //服务器成功响应处理函数
  {
   alert("成功");
  },
  error : function(data, status, e)//服务器响应失败处理函数
  {
   alert(e);
  }
  })
 }
 }
 function publishTemplate() {

 if ("@ViewBag.Template.Row_ID") {
  var result = window.confirm("确定发布这条图文?");
  if (result) {
  window.location = "@PublishUrl";
  }
 }
 }
 function removeTemplate() {
 if ("@ViewBag.Template.Row_ID") {
  var result = window.confirm("确定删除这条图文?");
  if (result) {
  window.location = "@RemoveUrl";
  }
 }
 }
</script>

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
Apr 12 Javascript
JavaScript国旗变换效果代码
Aug 13 Javascript
js中call与apply的用法小结
Dec 28 Javascript
jQuery拖拽div实现思路
Feb 19 Javascript
jQuery实现checkbox全选的方法
Jun 10 Javascript
JS实现很实用的对联广告代码(可自适应高度)
Sep 18 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
实例详解ECMAScript5中新增的Array方法
Apr 05 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
Aug 19 Javascript
发布Angular应用至生产环境的方法
Dec 10 Javascript
Vue解析剪切板图片并实现发送功能
Feb 04 Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 Javascript
详细探究ES6之Proxy代理
Jul 22 #Javascript
jquery常用的12个小功能
Jul 22 #Javascript
BootStrap 附加导航组件
Jul 22 #Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
Jul 22 #Javascript
Select下拉框模糊查询功能实现代码
Jul 22 #Javascript
jQuery Select下拉框操作小结(推荐)
Jul 22 #Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
Jul 22 #Javascript
You might like
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
PHP实现163邮箱自动发送邮件
2016/03/29 PHP
thinkPHP实现多字段模糊匹配查询的方法
2016/12/01 PHP
php分页查询的简单实现代码
2017/03/14 PHP
DEFER怎么用?
2006/07/01 Javascript
javascript textContent与innerText的异同分析
2010/10/22 Javascript
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
改变checkbox默认选中状态及取值的实现代码
2016/05/26 Javascript
vue.js事件处理器是什么
2017/03/20 Javascript
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
有趣的python小程序分享
2017/12/05 Python
Django框架封装外部函数示例
2019/05/28 Python
pytorch实现mnist数据集的图像可视化及保存
2020/01/14 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
Python图像处理之膨胀与腐蚀的操作
2021/02/07 Python
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
阿玛尼美妆俄罗斯官网:Giorgio Armani Beauty RU
2020/07/19 全球购物
自我评价怎么写正确呢?
2013/12/02 职场文书
大学生会计职业生涯规划范文
2014/02/28 职场文书
《充气雨衣》教学反思
2014/04/07 职场文书
宣传活动总结范文
2014/07/01 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
技术入股合作协议书
2014/10/07 职场文书
总结会主持词
2015/07/02 职场文书
合理化建议书范文
2015/09/14 职场文书
七年级作文之游记
2019/12/11 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript