JS ahmt die multi-grafische Schnittstelle des WeChat-Backend-Managements nach und integriert das AJAX-Plug-In für asynchrones Upload von Dateien für Ihre Referenz. Der spezifische Inhalt ist wie folgt
Reproduktionsbild:
Detaillierter Code:
HTML:
<div id = "Wrap"> <div id = "Sidebar"> <div> <!-<p style = "margin: 10px 14px 0 14px;"> <span> 2013-08-14 </span> </p>-> <divouseout = "removecover (this);" onmouseover = "showcover (this);"> <h4 id = "title2div0"> tital <span> </span> </h4> <img src = "../ assets/homer_admin-v1.5/bilder/2.png"/> <ul style = "margin: 10px 10px; href="javascript:void(0)" onclick="editDiv('div0')"> <div> Edit</div> </a> </ul> </div> </div> <div> <a href="#" id="add"> <span > Add one</a> </div> </div> </div> <div id="main"> <div id="div0"> <form methode = "post" engType = "MultiPart/Form-Data" action = ""> <label for = ""> tital </label> <Eingabe type = "text" name = "title" value = "0th" id = "titlediv0" Onchange = "settitle ('div0'") "/> </label für =" ". value = "" id = "Author" /> <label für = ""> <span id = "Upload-Tip"> großes Bild empfohlene Größe: 720 Pixel onclick = "ajaxFileUpload ('div0')"/> <img src = "id =" imgdiv0 "/> <a id =" rmdiv0 "href ="#"Onclick =" removeImage ('div0') "style =" style-align: booth; type = "text" name = "message_url" value = "" id = "url">-> <label für = ""> text </label> <textArea name = "content" id = "myeditor"> </textArea> <div id = "url-block" style = "margin-top: 14px; (optional) </em> </label> <Eingabe type = "text" name = "content_link" value = "" id = "surl"/> <br/> </div> </form> </div> </div> <div-style = "Clear: beide; padding-top: 20px;"> <divdy = "Clear: 1px: beide; #dddddd; "> <Eingabe type =" button "onclick = 'publishTemplate ()' value =" speichern "/> <Eingabe 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: 'Der Inhalt, der standardmäßig im Editor angezeigt wird. var editor = new Ue.ui.editor (Option); Editor.Render ("Myeditor"); Funktion REDIMAGE (ID) {$ ("#img" + id) .hide (); $ ("#rm" + id) .hide (); } function showcover (obj) {$ (obj) .AddClass ("sub-msg-op-show"); } function removecover (obj) {$ (obj) .removeclass ("sub-msg-op-show"); } function editDiv (obj) {if (showdiv! = obj) {$ ("#" + showDiv) .hide (); $ ("#" + obj) .show (); showdiv = obj; }} Funktion entfernte (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 setitle (obj) {$ ("#title2" + obj) .text ($ ("#title" + obj) .val ()); } $ ("#add") .click (function () {var msgdiv; // var msgdiv2; if (arr.length == 7) {$ ("#" + showdiv) .hide (); Informationen '); MSGDIV + "'Style =' Border-Top: 1px Solid #C6C6C6; Höhe: 120px; 'Onmouseout =' removecover (this); <div style = 'float: rechts;'> " +" <img src = '../assets/homer_admin-v1.5/bilder/1.png' style = 'width: 80px; Höhe: 80px;' // Bilder/1.png 'style =' width: 80px; hohe: 80px; 0; '> <li> <div style =' width: 150px; " +" Höhe: 120px; style = 'line-height: 100px;' id = '" + msgdiv +"'> " +" <Formmethode = 'post' engType = 'MultiPart/Form-Data' action = ''> <label class = 'block' für = ''> tital </label> " +" <Eingabe type = 'text' name = 'title' title 'title " + msgdiv +"' auf dem 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-tip r'id='upload-tip'>Large picture Vorgeschlagene Größe: 720 Pixel* 400 Pixel </span> Cover </label> " +" <div class = 'Cover-Area' Style = 'Vertical-Align: Bottom; Margin-Bottom: 10px;'> <Eingabe type = 'file'name =' file " + msgdiv +" //> " +" <Eingabe type = 'butth =' upload 'upload' upload 'upload' uplick 'uplick =' uplick = 'uply: + msgdiv + "/") '/> " +" <img src =' 'id =' img " + msgdiv +" 'style =' width: 100px; vertikal-align: bode; border: 1px solid grau style = 'vertikal-align: bo;'> delete </a> </div> "+/*" <label class = 'block' für = ''> bildlink </label> "+" <input type = 'text' name = 'message_url' value = '' id = 'url' class = 'msg-input'> "texte tection id = 'reich " + msgdiv +"'> </textArea> " +" <div class = 'none' id = 'url-block' style = 'margin-top: 14px;'> " +" <label class = 'block' für = '' original link <em class = 'mp_desc'> (optional) </em> </</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</<: id = 'surl' class = 'msg-input'/> " +" <br/sites/div> </form> </div> "); editor.render (" Rich " + msgdiv);}); Funktion ajaxFileUpload (id) {var Filename = $ ("#Datei" + id) .val (); var Suffix; if (Dateiname! } if (fileName == "") {alert ("Bitte wählen Sie das Bild zum Hochladen"); } else if (suffix! = "jpg" && suffix! = "png") {alert ("Es gibt ein Dateiformat"); } else {$ .ajaxFileUpload ({url: 'fileUpload', // Der serverseitige Anforderungsadressentyp: 'post', FileElementId: 'Datei' + ID, // ID der Datei-Upload-Domain-Domain-Datentype: 'JSON', // Rückgabewerttyp ist im Allgemeinen auf JSON-Erfolg eingestellt: Funktion (Data, Status), Status, Status, Status, Status, Status: STATUR: e) // Server -Antwortfehler -Verarbeitungsfunktion {alert (e); if (result) {window.location = "@publishurl"; }}} function removeVeTemplate () {if ("@viewbag.template.row_id") {var result = window.confirm ("Bestätigen Sie, um diese Grafik zu löschen?"); if (result) {window.location = "@removeurl"; }}}} </script>Quellcode-Download: Multi-Graphic-Schnittstelle WeChat
Dieser Artikel wurde in "Zusammenfassung von JavaScript Wechat Development Skills" zusammengestellt, und jeder kann gerne lernen und lesen.
Ich möchte ein Tutorial zum WeChat Mini -Programm empfehlen, das sehr besorgt ist: "WeChat Mini -Programmentwicklungs -Tutorial" wurde vom Herausgeber aller sorgfältig zusammengestellt. Ich hoffe, es gefällt Ihnen.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.