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 相关文章推荐
javascript下4个跨浏览器必备的函数
Mar 07 Javascript
高亮显示web页表格行的javascript代码
Nov 19 Javascript
jQuery 选择器项目实例分析及实现代码
Dec 28 Javascript
Javascript中call与apply的学习笔记
Sep 22 Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
Oct 05 Javascript
学习vue.js条件渲染
Dec 03 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
Mar 09 Javascript
jQuery实现div跟随鼠标移动
Aug 20 jQuery
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 Javascript
Vue 数据绑定的原理分析
Nov 16 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 第二节 数据类型之数组
2012/04/28 PHP
PHP实现文件下载详解
2014/11/27 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
Javascript hasOwnProperty 方法 &amp; in 关键字
2008/11/26 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
jquery 无限级下拉菜单的简单实现代码
2014/02/21 Javascript
javascript实现添加附件功能的方法
2015/11/18 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
js Canvas实现的日历时钟案例分享
2016/12/25 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
2017/01/21 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
vue cli升级webapck4总结
2018/04/04 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
JavaScript获取页面元素的常用方法详解
2019/09/28 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
如何运行Python程序的方法
2013/04/21 Python
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
python基础学习之如何对元组各个元素进行命名详解
2018/07/12 Python
python 两个数据库postgresql对比
2019/10/21 Python
解决python cv2.imread 读取中文路径的图片返回为None的问题
2020/06/02 Python
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
送给他或她的礼物:FUN.com
2018/08/17 全球购物
香港家用健身器材、运动器材及健康美容仪器专门店:FitBoxx
2019/12/05 全球购物
如果NULL和0作为空指针常数是等价的,那我到底该用哪一个
2014/09/16 面试题
绿化先进工作者事迹材料
2014/01/30 职场文书
学校联谊协议书
2014/09/16 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
四年级数学上册教学计划
2015/01/20 职场文书
清明节寄语2015
2015/03/23 职场文书
超级礼物观后感
2015/06/15 职场文书
创业计划书之家教中心
2019/09/25 职场文书
Vue-Element-Admin集成自己的接口实现登录跳转
2021/06/23 Vue.js