JS imita la interfaz multi-gráfica de WeChat Backend Management, e integra el complemento AJAX para la carga asíncrona de archivos para su referencia. El contenido específico es el siguiente
Imagen de reproducción:
Código detallado:
HTML:
<div id = "wrap"> <div id = "barra lateral"> <div> <!-<p style = "margin: 10px 14px 0 14px;"> <span> 2013-08-14 </span> </p>-> <div onMouseOut = "removecover (this);"; "; onMouseOver = "showcover (this);"> <h4 id = "title2Div0"> title <span> </span> </h4> <img src = "../ assets/homer_admin-v1.5/images/2.png"/> <ul style = "margen: 10px 10px; altura: 150px; width: 320px;" href = "javascript: void (0)" onClick = "editDiv ('div0')"> <iv> edit </iv> </a> </ul> </div> </div> <div> <a href = "#" id = "add"> <span> Agregue un </a> </div> </div> </iv> <iv Id = "principalmente> <divid método = "post" enctype = "multipart/form-data" action = ""> <etiqueta for = ""> title </label> <input type = "text" name = "title" valor = "0th" id = "titlediv0" onchange = "settitle ('' div0 ')"/> <label for = ""> autor <em> (opcional) </em> id = "autor" /> <etiqueta for = ""> <span id = "cargar-tip"> Imagen grande Tamaño recomendado: 720 píxeles* 400 píxeles </span> cover </label> <div style = "vertical-align: bottom; bottom: 10px;"> <type de entrada = "archivo" name = "archivo" id = "archediv0" /> <bocino de entrada = "bocino" onClick = "AjaxFileUpload ('div0')"/> <img src = "" id = "imgdiv0"/> <a id = "rmdiv0" href = "#" onClick = "removerImage ('' Div0 ')" estilo = "vertical-align: fondo;"> delete </a> </iv> <!-<etiqueta para = "Div0')" estilo " type = "text" name = "Message_url" value = "" id = "url">-> <etiqueta for = ""> text </label> <textArea name = "content" id = "myEditor"> </extarea> <div id = "url-blok" style = "margen-top: 14px;"> <label para = "> original en enlace <em class = 'mp_Desc'> (optional) (optional) <input type = "text" name = "content_link" value = "" id = "surl"/> <br/> </div> </form> </div> </div> <div style = "clear: ambos; padding-top: 20px;"> <div style = "clear: thuss; text-align: center; padding-top: 20px; border-top: 1px sólido #ddddd;" type ";" onClick = 'PublishTemplate ()' value = "Save"/> <input type = "Button" onClick = "removeTemplate ()" value = "delete"/> </div> </div> </div>JavaScript:
<script> var arr = ['div1', 'div2', 'div3', 'div4', 'div5', 'div6', 'div7']; var arr2 = new Array (); var showDiv = "div0"; opción var = {inicialContent: 'El contenido que se muestra por defecto en el editor', // Inicializa el contenido del editor InitialFrameHeight: 340}; editor var = new Ue.ui.Editor (opción); editor.render ("MyEditor"); función removeMage (id) {$ ("#img" + id) .hide (); $ ("#rm" + id) .Hide (); } función showcover (obj) {$ (obj) .addclass ("sub-msg-opr-show"); } función eliminar (obj) {$ (obj) .removeclass ("sub-msg-opr-show"); } función editDiv (obj) {if (showDiv! = obj) {$ ("#" + showDiv) .Hide (); $ ("#" + obj) .show (); showDiv = obj; }} function elimediv (obj) {$ ("#s" + obj) .remove (); $ ("#" + obj) .remove (); $ ("#rico" + 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;} más if (arr.length == 0) {ALTERT (ALTER AUTH (ATRADO (ATRADO AUTA ALTER (ATRADO (ATRAJE ALTER (ATRAJE ALTER (ATRAJE) Información ') msgdiv + "'style =' border-top: 1px sólido #c6c6c6; altura: 120px; ' <div style = 'float: right;'> " +" <img src = '../assets/homer_admin-v1.5/images/1.png' style = 'width: 80px; altura: 80px;' // imágenes/1.png 'style =' width: 80px; altura: 80px; '// div> <ul class =' aBs tc-msg-oopr ' 0; '> <li> <Div style =' Width: 150px; " +" Altura: 120px; style = 'Line-Height: 100px;' id = '" + msgdiv +"'> " +" <form de método = 'post' enctype = 'multipart/form-data' Action = ''> <etiqueta class = 'block' for = '' '> title </label> " +" <input type =' text 'name =' title 'id =' title " + msgdiv +" 'onchange =' settitle (/"" + msgdiv + ") + "<etiqueta class = 'block' for = ''> autor <em class = 'mp_desc'> (opcional) </em> </lelge> <input type = 'text' name = 'autor' value = '' id = 'autor' class = 'msg-input'/>" + "<label = 'block' para = '' '> <span class =' cargue-tip r'id = 'upload-tip-tip-tipeDing' 400 pixels</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 + "/") '/> " +" <img src =' 'id =' img " + msgdiv +" 'style =' width: 100px; vertical-align: fondo; border: 1px sólido gris '/> " +" <a id =' rm " + msgdiv +" 'href ='#'onclick =' eliminar (/"" + msgdiv + "/"/") style = 'Vertical-Align: Bottom;'> Eliminar </a> </div> "+/*" <etiqueta class = 'block' for = ''> imagen enlace de imagen </label> "+" <input type = 'text' name = 'message_url' value = '' id = 'url' url 'class =' msg-input '> "+*/" <etiqueta class =' block 'para ='> </etiqueta </etiquetado> text> n. id = 'Rich " + msgdiv +"'> </textAREA> " +" <div class = 'none' id = 'url-block' style = 'margin-top: 14px;'> " +" <etiqueta class = 'block' for = '' '> enlace original <em class =' mp_descc '> (opcional) </em> </label> <input type =' text 'name =' contada_link '' ' class = 'msg-input'/> " +" <br//</div> </form> </div> "); editor.render (" rico " + msgdiv);}); function aJaxFileUpload (id) {var filename = $ ("#archivo" + id) .val (); sufijo var; if (FileName! = "") {suffix = FileName.Substr (FileName.IndexOf (".") + 1, FileName.Length); } if (filename == "") {alerta ("Seleccione la imagen para cargar"); } else if (suffix! = "jpg" && sufix! = "png") {alerta ("Hay cualquier formato de archivo"); } else {$ .AJAXFILEUPLOAD ({url: 'fileUpload', // El tipo de dirección de solicitud de solicitud del lado del servidor: 'post', fileElementId: 'file' + id, // id id de la carga de la carga de la carga de la carga de la carga {la función de la respuesta de la respuesta del servidor {"JSON ', // El error de retorno está configurado en JSON. Estado, e) // Función de procesamiento de falla de respuesta del servidor {alert (e);}})}} function publishTemplate () {if ("@verbag.template.row_id") {var result = window.confirm ("confirma para publicar este gráfico o texto?"); if (resultado) {window.location = "@PublishUrl"; }}} función removeTemplate () {if ("@verbag.template.row_id") {var result = window.confirm ("¿confirmar para eliminar este gráfico?"); if (resultado) {window.location = "@RemoveUrl"; }}}} </script>Descarga del código fuente: interfaz múltiple de WeChat
Este artículo se ha compilado en "Resumen de las habilidades de desarrollo de JavaScript WeChat", y todos son bienvenidos a aprender y leer.
Me gustaría recomendar un tutorial sobre el programa WeChat Mini que esté muy preocupado: "Tutorial de desarrollo del programa WeChat Mini" ha sido cuidadosamente compilado por el editor de todos, espero que les guste.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.