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

前端之家收集整理的这篇文章主要介绍了JavaScript结合Bootstrap仿微信后台多图文界面管理前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

效果图:

详细代码

html:

Box">

<div class="cover" onmouSEOut="removeCover(this);"
onmouSEOver="showCover(this);">
<h4 class="msg-t" style="width: 320px;" id="title2div0">
标题<span class="i-title">

增加一条
<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;">

<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="删除" />

javascript:

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"

");
$("#main")
.append(
"
"
  • "
    "
  • " <input type='text' name='Title' id='title"
  • msgDiv
  • "' onchange='setTitle(\""
  • msgDiv
  • "\")' class='msg-input'>"
  • " "
  • ""
  • "
    "
  • "<input type='button' value='上传' onclick='ajaxFileUpload(\""
  • msgDiv
  • "\")'/>"
  • " "
  • "<a id='rm"
  • msgDiv
  • "' href='#' onclick='removeImage(\""
  • msgDiv
  • "\")' style='vertical-align: bottom;'>删除
  • "
  • / " "+
    ""+
    /
    ""

  • "
    "
  • " "
  • "
    ");
    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";
    }
    }
    }

    源码下载:

    本文已被整理到了《》,欢迎大家学习阅读。

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

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    原文链接:https://www.f2er.com/bootstrap/47145.html
    Bootstrap微信多图文界面js微信多图文界面js微信界面

    猜你在找的Bootstrap相关文章