JavaScript結(jié)合Bootstrap仿微信后臺多圖文界面管理
更新時間：2016年07月22日 11:03:41 投稿：lijiao
這篇文章主要為大家詳細(xì)介紹了js結(jié)合Bootstrap仿微信后臺多圖文界面管理，具有一定的參考價值，感興趣的小伙伴們可以參考一下
js模仿微信后臺管理的多圖文界面，集成了ajax異步上傳文件的插件，供大家參考，具體內(nèi)容如下
效果圖：
詳細(xì)代碼：
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">
標(biāo)題<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="">標(biāo)題</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 : '在編輯器中默認(rèn)顯示的內(nèi)容',//初始化編輯器的內(nèi)容
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+"'>標(biāo)題</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=''>標(biāo)題</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', //用于文件上傳的服務(wù)器端請求地址
type: 'post',
fileElementId : 'file' + id, //文件上傳域的ID
dataType : 'json', //返回值類型 一般設(shè)置為json
success : function(data, status) //服務(wù)器成功響應(yīng)處理函數(shù)
{
alert("成功");
},
error : function(data, status, e)//服務(wù)器響應(yīng)失敗處理函數(shù)
{
alert(e);
}
})
}
}
function publishTemplate() {
if ("@ViewBag.Template.Row_ID") {
var result = window.confirm("確定發(fā)布這條圖文？");
if (result) {
window.location = "@PublishUrl";
}
}
}
function removeTemplate() {
if ("@ViewBag.Template.Row_ID") {
var result = window.confirm("確定刪除這條圖文？");
if (result) {
window.location = "@RemoveUrl";
}
}
}
</script>
源碼下載：微信多圖文界面
本文已被整理到了《JavaScript微信開發(fā)技巧匯總》，歡迎大家學(xué)習(xí)閱讀。
為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript代碼實現(xiàn)春晚劉謙魔術(shù)的模擬程序
昨晚春晚上劉謙的兩個魔術(shù)表演都非常精彩,尤其是第二個魔術(shù),他演繹了經(jīng)典的約瑟夫環(huán)問題！約瑟夫環(huán)是一個經(jīng)典的數(shù)學(xué)問題,本文給出了完整的 JavaScript 代碼實現(xiàn),感興趣的同學(xué)可以自己動手實現(xiàn)一下2024-02-02
讓innerText在firefox火狐和IE瀏覽器都能用的寫法
下面的代碼主要是用來解決firefox瀏覽器不支持innerText的問題，需要的朋友可以參考下。2011-05-05
這篇文章主要給大家介紹了關(guān)于利用ECharts.js畫K線圖的相關(guān)資料,，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
原生js實現(xiàn)網(wǎng)頁頂部自動下拉/收縮廣告效果
本文主要介紹了原生js實現(xiàn)網(wǎng)頁頂部自動下拉/收縮廣告效果的實例代碼。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要給大家介紹了關(guān)于前端URL拼接路徑參數(shù)具體實現(xiàn)的相關(guān)資料,url地址拼接是經(jīng)常會遇到的問題,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
這篇文章主要為大家詳細(xì)介紹了微信小程序日期選擇器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要為大家詳細(xì)介紹了讓編輯器支持word復(fù)制黏貼、截屏的js代碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
下面小編就為大家?guī)硪黄猨s智能獲取瀏覽器版本UA信息的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
跟我學(xué)Node.js（四）---Node.js的模塊載入方式與機(jī)制
Node.js中模塊可以通過文件路徑或名字獲取模塊的引用。模塊的引用會映射到一個js文件路徑，除非它是一個Node內(nèi)置模塊。Node的內(nèi)置模塊公開了一些常用的API給開發(fā)者，并且它們在Node進(jìn)程開始的時候就預(yù)加載了。2014-06-06