JS imite l'interface multi-graphique de la gestion du backend WeChat et intègre le plug-in ajax pour le téléchargement asynchrone de fichiers pour votre référence. Le contenu spécifique est le suivant
Image de reproduction:
Code détaillé:
HTML:
<div id = "wrap"> <div id = "Sidebar"> <div> <! - <p style = "margin: 10px 14px 0 14px;"> <span> 2013-08-14 </span> </p> -> <div onMouseout = "renover (this);" onMouseover = "showcover (this);"> <h4 id = "title2div0"> title <span> </span> </h4> <img src = "../ actifs / homer_admin-v1.5 / images / 2.png" /> <ul style = "margin: 10px 10px; height: 150px; width: 320px;"> <a href = "javascript: void (0)" onclick = "editdiv ('div0')"> <v> edit </v> </a> </ul> </v> </div> <v> <a href = "#" id = "add"> <span> Ajouter un </a> </v> </v> </v> <div id = "Main"> <div> </v> </v> </v> <div id = "Main"> <div> </v> </v> </v> <v> <v Id = "Main"> <div> </v> </v> </v> <v> <v Id = "Main"> <div> </v> </v> </v> <v> <v Id = "Main "> Method = "Post" EncType = "multipart / form-data" action = ""> <label for = ""> title </ labe> <input type = "text" name = "title" value = "0th" id = "TitleDiv0" onchange = "Settitle ('div0')" /> <label for = ""> "name =" dieu = "Value =" Optional </em> </ label> id = "auteur" /> <étiquette pour = ""> <span id = "upload-tip"> Grande image Taille recommandée: 720 pixels * 400 pixels </span> couverture </ labe> <div style = "vertical-align: inférieur; margin-bottom: 10px;"> <entrée type = "file" name = "file" id = "filediv0" /> <fut type = "Button" value = "uplower" onclick = "ajaxfileupload ('div0')" /> <img src = "" id = "imgDiv0" /> <a id = "rmDiv0" href = "#" onclick = "retireImage ('div0')" style = "vertical-adign:"> picture; "> supprimer </a> </v> <! - type = "text" name = "message_url" value = "" id = "url"> -> <label for = ""> text </ label> <textarea name = "contenu" id = "myeditor"> </ textarea> <div id = "url-block" style = "margin-top: 14px;"> <label for = ""> lien d'origine <m class = 'mp_desc'> (facultatif) <input type = "text" name = "contenu_link" value = "" id = "Surl" /> <r /> </div> </ form> </div> </div> <div style = "Clear: les deux; padding-top: 20px;"> <div style = "Clear: Text-Adign: Center;"> <intrigue ". 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"; var option = {initialContent: 'Le contenu affiché par défaut dans l'éditeur', // initialise le contenu de l'éditeur initialFrameHeight: 340}; var editor = new ue.ui.editor (option); Editor.Render ("MyEditor"); Fonction SupportImage (id) {$ ("# img" + id) .hide (); $ ("# rm" + id) .hide (); } Fonction ShowCover (obj) {$ (obj) .addclass ("sub-msg-op-show"); } fonction reposover (obj) {$ (obj) .reMoveClass ("sub-msg-op-show"); } fonction editDiv (obj) {if (showDiv! = obj) {$ ("#" + showDiv) .Hide (); $ ("#" + obj) .show (); showDiv = obj; }} fonction supprime (obj) {$ ("# s" + obj) .Remove (); $ ("#" + obj) .reMove (); $ ("# riche" + 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); }}} fonction 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.Lengthyled == 0) {alert (" Information '); msgdiv + "'style =' border-top: 1px solide # c6c6c6; height: 120px; 'onMouseout =' reposover (this); '" + "onMouseOver =' showcover (this); '> <div> <div style =' float: width: 250px; word-baken: break-all; ' style = 'float: à droite;'> "+" <img src = '.. / actifs / homer_admin-v1.5 / images / 1.png' style = 'width: 80px; hauteur: 80px;' // images / 1.png 'style =' width: 80px; hight: 80px; '// div> <ul class =' ABS TC sub-msg-oPr 'style =' margin-lef 0; '> <li> <div style =' width: 150px; "+" hauteur: 120px; style = 'line-height: 100px;' id = '"+ msgDiv +"'> "+" <form metheth = 'post' enctype = 'multipart / form-data' action = ''> <label class = 'block' for = ''> title </ label> "+" <input type = 'name =' title 'id =' title "+ msgdiv + '' 'onchange =' settlele (/" + msgdiv + ") ' class = 'msg-input'> "+" <label class = 'block' for = ''> auteur <em class = 'mp_desc'> (facultatif) </em> </ label> <input type = 'text' name = 'auteur' value = '' id = 'auteur' class = 'msg-input' /> "+" <label = 'block' for imple Taille suggérée: 720 pixels * 400 pixels </span> couvercle </ label> "+" <div class = 'couverture de style' style = 'vertical-align: inférieur; margin-bottom: 10px;'> <entrée type = 'file'name =' file "+ msgDiv +" '//> "+" <entrée =' bouton '' msgdiv + "/") '/> "+" <img src =' 'id =' img "+ msgDiv +" 'style =' width: 100px; vertical-align: inférieur; bordure: 1px gris solide '/> "+" <a id =' rm "+ msgdiv +" 'href =' # 'onclick =' retireim (/ "" + ") style = 'vertical-align: inférieur;'> delete </a> </ div> "+ / *" <label class = 'block' for = ''> lien photo </ label> "+" <input type = 'text' name = 'Message_url' value = '' id = 'url' class = '> msg-input'> "+ * / '<label class =' block 'for =' ''> Text </ label> id = 'riche "+ msgdiv +"'> </ textarea> "+" <div class = 'nothe' id = 'url-block' style = 'margin-top: 14px;'> "+" <label class = 'block' for = ''> lien original <em class = 'MP_DESC'> (facultatif) </em> </ label> <entrée = 'text' name = 'name =' contenu ' class = 'msg-input' /> "+" <br//</div> </ form> </div> "); editor.render (" riche "+ msgDiv);}); fonction ajaxFileUpload (id) {var filename = $ ("# file" + id) .val (); suffixe var; if (filename! = "") {suffix = filename.substr (filename.indexof (".") + 1, filename.length); } if (filename == "") {alert ("Veuillez sélectionner l'image à télécharger"); } else if (suffix! = "jpg" && suffix! = "png") {alert ("il y a un format de fichier"); } else {$ .ajaxfileupload ({url: 'fileupload', // le type d'adresse de demande de serveur: 'post', fileelementId: 'file' + id, // id of fichet upload domain dataType: 'json', // return value type est généralement défini sur JSON Success: function (data, status) // Server la fonction de réponse à la réponse {alert ("success"); E) // Fonction de traitement de défaillance de la réponse du serveur {alerte (e);}})}} Fonction publietTemplate () {if ("@ Viewbag.Template.Row_id") {var result = window.confirm ("Confirmer pour publier ce graphique ou texte?"); if (result) {window.location = "@publishurl"; }}} Fonction Removetemplate () {if ("@ visuelbag.template.row_id") {var result = window.confirm ("Confirmer pour supprimer ce graphique?"); if (result) {window.location = "@RemoveUrl"; }}}} </ script>Téléchargement du code source: Interface multi-graphique WeChat
Cet article a été compilé dans "Résumé des compétences de développement de JavaScript WeChat", et tout le monde est le bienvenu pour apprendre et lire.
Je voudrais recommander un didacticiel sur le programme WECHAT MINI qui est fortement inquiet: "WECHAT Mini Program Development Tutorial" a été soigneusement compilé par le rédacteur en chef de tout le monde, j'espère que vous l'aimez.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.