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 confirm选择判断
Oct 18 Javascript
$.ajax json数据传递方法
Nov 19 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
Jul 09 Javascript
jquery.messager.js插件导致页面抖动的解决方法
Jul 14 Javascript
一段非常简单的js判断浏览器的内核
Aug 17 Javascript
jquery实现加载进度条提示效果
Nov 23 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
May 19 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
js中事件对象和事件委托的介绍
Jan 21 Javascript
vue的滚动条插件实现代码
Sep 07 Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 Javascript
js 实现watch监听数据变化的代码
Oct 13 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
基于mysql的论坛(2)
2006/10/09 PHP
yii框架通过控制台命令创建定时任务示例
2014/04/30 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
javascript 有趣而诡异的数组
2009/04/06 Javascript
最新28个很棒的jQuery 教程
2011/05/28 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
jQuery 禁止表单用户名、密码自动填充功能
2017/10/30 jQuery
Vue 中axios配置实例详解
2018/07/27 Javascript
layui table 参数设置方法
2018/08/14 Javascript
jQuery pagination分页示例详解
2018/10/23 jQuery
Python不规范的日期字符串处理类
2014/06/10 Python
详解Python3.1版本带来的核心变化
2015/04/07 Python
python 实现求解字符串集的最长公共前缀方法
2018/07/20 Python
pymongo中group by的操作方法教程
2019/03/22 Python
python中bytes和str类型的区别
2019/10/21 Python
Python 操作 PostgreSQL 数据库示例【连接、增删改查等】
2020/04/21 Python
Python爬虫后获取重定向url的两种方法
2021/01/19 Python
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
Java基础知识面试要点
2016/07/29 面试题
银行服务明星推荐材料
2014/05/29 职场文书
节能环保口号
2014/06/12 职场文书
巾帼志愿者活动方案
2014/08/17 职场文书
有子女的离婚协议书怎么写(范本)
2014/09/29 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
MySQL数字类型自增的坑
2021/05/07 MySQL
python opencv通过4坐标剪裁图片
2021/06/05 Python
MySQL如何快速创建800w条测试数据表
2022/03/17 MySQL
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫
对讲机知识
2022/04/07 无线电
spring IOC容器的Bean管理XML自动装配过程
2022/05/30 Java/Android
Redis批量生成数据的实现
2022/06/05 Redis