JavaScript combined with Bootstrap imitation WeChat background multi-graphic interface management, bootstrapjavascript

JavaScript integrates with Bootstrap to simulate multi-text interface management in the background, bootstrapjavascript

Js imitates the multi-text interface of background management and integrates the ajax plug-in for asynchronous file upload for your reference. The specific content is as follows:

:

Code details:

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

Javascript:
<Script> var arr = ['div1', 'div2', 'div3', 'div4', 'div5', 'div7']; var arr2 = new Array (); var showDiv = "div0"; var option = {initialContent: 'content displayed by default in the editor', // initialize the editor content 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-ms G-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 ('add up to 8 graphic infos'); 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 style = 'float: left; width: 250px; word-break: break-all; 'id = 'title2 "+ msgDiv +" '> title </div> <div st Yle = 'float: right; '> "+"  </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; '> edit </a> "+" <a style = 'line-height: 100px ;' Href = 'javascript: void (0) '"+" onclick = 'removediv (\ "" + msgDiv + "\"); return false; '> Delete </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 =''> Title </label> "+" <input type = 'text' name = 'title' id = 'title "+ msgDiv +" 'onchange = 'settitle (\ "" + msgDiv + "\") 'class = 'Ms G-input'> "+" <label class = 'block' for = ''> author <em class = 'mp _ desc'> (optional) </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 '> recommended size for large images: 720 pixels * 400 pixels </span> cover </label> "+" <div class = 'Cover-area' style = 'vertical-align: bottom; margin-bottom: 10px; '> <input type = 'file' name = 'file "+ msgDiv +"'/> "+" <Indium Ut type = 'button 'value = 'upload 'onclick = 'ajaxfileupload (\ "" + msgDiv + "\") '/> "+"  "+" <a id = 'rm "+ msgDiv +" 'href =' # 'onclick = 'removeimage (\ "" + msgDiv + "\") 'style = 'vertical-align: bottom; '> Delete </a> </div> "+/*" <label class = 'block' for = ''> Graphic Link </label>" + "<input type = 'text' name = 'message _ url' value = ''Id = 'url' class = 'msg-input'> "+ */" <label class = 'block' for = ''> body </label> <textarea name = 'content' id = 'rich "+ msgDiv +" '> </textarea> "+" <div class = 'none' id = 'url-Block' style =' margin-top: 14px; '> "+" <label class = 'block' for = ''> original link <em class = 'mp _ desc'> (optional) </em> </label> <input type = 'text' name = 'content _ link' value = ''id = 'surl' class = 'msg-input'/> "+" <br/> </div> </form> </div> "); editor. render ("ric H "+ msgDiv) ;}); function ajaxFileUpload (id) {var filename =$ (" # file "+ id). val (); var suffix; if (filename! = "") {Suffix = filename. substr (filename. indexOf (". ") + 1, filename. length);} if (filename = "") {alert ("select the image to upload");} else if (suffix! = "Jpg" & suffix! = "Png") {alert ("file format available");} else {$. ajaxFileUpload ({url: 'fileupload', // type: 'post', fileElementId: 'file' + id, // The ID of the file upload field dataType: 'json', // the return value type is generally set to json success: function (data, status) // The server responds to the processing function {alert ("successful") ;}, error: function (data, status, e) // server response failure handler {alert (e) ;}}} function publishTemplate () {if ("@ ViewBag. template. row_ID ") {var result = window. Confirm ("are you sure you want to publish this image? "); If (result) {window. location = "@ PublishUrl" ;}} function removeTemplate () {if ("@ ViewBag. template. row_ID ") {var result = window. confirm ("are you sure you want to delete this image? "); If (result) {window. location =" @ RemoveUrl ";}}</script>
Source code download: Multi-image Interface
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.