JavaScript combined with bootstrap imitation micro-letter background multi-graphic interface management _javascript skills

JS Imitation micro-letter background management of the multi-graphic interface, integrated Ajax asynchronous upload file Plug-ins for your reference, the specific content as follows

Effect Chart:

Detailed code:

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"
   Removecover (this); " Onmouseover= "Showcover (this);" > 
 

JavaScript:

<script> var arr = [' Div1 ', ' div2 ', ' div3 ', ' div4 ', ' div5 ', ' div6 ', ' div7 '];
 var arr2 = new Array ();
 var showdiv = "Div0";
 var option = {initialcontent: ' Default display in Editor ',//Initialize editor contents 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 (' Add up to 8 text messages ');
  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+" ' > title </div> <div style= ' float:right; ' > "+"  </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; ' > Edit </a> "+" <a style= ' line-height:100px ' href= ' javascript:void (0) ' "+" onclick= ' Removediv (\ "" + M Sgdiv + "\"); return false; '
  > Delete </a></div> </li></ul> </div> "); $ ("#main"). Append ("<div class= ' msg-editer ' id= '" +msgdiv+ "' >" + "<form method= ' POST ' enctype= ') Multipa Rt/form-data ' action= ' > <label class= ' block ' for= ' > title </label> ' + ' <input type= ' text ' name= ' title ' Id= ' title "+ Msgdiv +" ' onchange= ' Settitle (\ "" + Msgdiv + "\") ' class= ' msg-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-t IP R ' id= ' Upload-tip ' > Big picture Recommended size: 720 pixel * 400 pixel </span> cover </label> "+" <div class= ' Cover-area ' style= ' vertical-align:bottom;margin-bottom:10px; ' ><input type= ' file ' name= ' file ' +msgdiv+ '/> ' + ' <input type= ' button ' value= ' upload ' onclick= ' ajaxfileupload (\ "" + Msgdiv + "\") '/> ' + '  "+" <a id= ' rm "+ msgdiv +" ' href= ' # ' onclick= ' removeimage (\ "" + Msgdiv + "\") ' s Tyle= ' Vertical-align:bottom; ' > Delete </a></div> "+/*" <label class= ' block ' for= ' > Text link </label> "+" <input type= ' te XT ' 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> </d
  Iv> ");
  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 ("Please select the picture to upload");
 else if (suffix!= "jpg" && suffix!= "png") {alert ("file format has none"); else {$.ajaxfileupload {url: ' fileupload ',//server-side request address type for file uploads: ' Post ', Fileelementid: ' file ' + ID,//file on
  Domain ID dataType: ' JSON ',//return value type is generally set to JSON success:function (data, status)/server successful response processing function {alert ("Success");
  }, Error:function (data, status, E)//server response failed processing function {alert (e); }}}} function publishtemplate() {if ("@ViewBag. template.row_id") {var result = Window.confirm ("OK) publish this text?"
  ");
  if (result) {window.location = "@PublishUrl"; }} function Removetemplate () {if ("@ViewBag. template.row_id") {var result = window.confirm ("OK delete this text?")
  ");
  if (result) {window.location = "@RemoveUrl";
 }} </script>

SOURCE Download: Micro-letter multi-graphic interface

This article has been organized into the "JavaScript micro-Credit Development Skills Summary", welcome to learn to read.

For everyone to recommend now more attention than the micro-letter Program Tutorial: "Micro-letter Small Program Development tutorial" Small series for everyone carefully organized, hope like.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.