JS meniru antarmuka multi-grafik dari WeChat Backend Management, dan mengintegrasikan plug-in AJAX untuk mengunggah file asinkron untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
Gambar reproduksi:
Kode terperinci:
html:
<Div ID = "Wrap"> <Div id = "sidebar"> <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 = "../ aset/homer_admin-v1.5/gambar/2.png"/> <ulo gaya = "margin: 10px 10px; tinggi: 150px; href = "JavaScript: void (0)" onclick = "editDiv ('div0')"> <div> Edit </div> </a> </ul> </div> </div> <viv> <a href = "#" id = "add"> Tambahkan satu </a> </div> div> <" Method = "Posting" enctype = "multipart/form-data" action = ""> <label for = ""> title </label> <input type = "text" name = "title" value = "0th" id = "TitledIv0" OnChange = "settitle ('Div0')"/<label for = ""> Onchange <"ih =" "" "" "" "" TEXPUT "" TEXPUT </OPOCTLE "('OPOCTICE (' Div0 ')" value = "" id = "penulis" /> <label for = ""> <span id = "unggah-tip"> gambar besar yang disarankan ukuran: 720 piksel* 400 piksel </span> tutupan < /label> <div style = "vertical-align: margin-bottom: 10px;"> <input type = "file" name = "" "" "" "" "" "" "" OnClick = "AjaxfileUpload ('Div0')"/> <img src = "" id = "imgdiv0"/> <a id = "rmdiv0" href = "#" onclick = "label </a>") "style =" vertikal-align: bottom; "> label </a> </a> </style =" vertical-align: Bottom; "> Delete </a> type = "text" name = "message_url" value = "" id = "url">-> <label for = ""> Text </label> <textarea name = "content" id = "myEditor"> </textArea> <div id = "orl-block" style = "margin-top: 14px;"> <label for for = "> class = class =" margin-top: 14px; "> <label for ="> <input type = "text" name = "content_link" value = "" id = "Surl"/> <br/> </div> </form> </div> </div> <div style = "Clear: keduanya; padding-top: 20px;"> <div style = "Clear: keduanya; teks-align: center; padding-top: 20px; type = "Tombol" ontClick = 'publishTemplate ()' value = "save"/> <input type = "tombol" ontClick = "removeTemplate ()" value = "delete"/> </div> </div> </div>Javascript:
<script> var arr = ['Div1', 'Div2', 'Div3', 'Div4', 'Div5', 'Div6', 'Div7']; var arr2 = array baru (); var showdiv = "div0"; var option = {initialContent: 'Konten yang ditampilkan secara default di editor', // inisialisasi konten editor initialframeHeight: 340}; editor var = new ue.ui.editor (opsi); editor.render ("myeditor"); function RemeFeImage (id) {$ ("#img" + id) .hide (); $ ("#rm" + id) .hide (); } function showcover (obj) {$ (obj) .addclass ("Sub-MSG-OPRR-Show"); } function removecover (obj) {$ (obj) .removeclass ("sub-msg-opr-show"); } function editDiv (obj) {if (showdiv! = obj) {$ ("#" + showdiv) .hide (); $ ("#" + obj) .show (); showdiv = obj; }} fungsi menghapusv (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); }}} fungsi 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 ke 8 lindung (arr2.pack (msgdiv); showDiv = msgdiv; informasi '); MSGDIV + "'Style =' Border-Top: 1px Solid #C6C6C6; Tinggi: 120px; ' style='float:right;'> " + "<img src='../assets/homer_admin-v1.5/images/1.png' style='width: 80px;height: 80px;'//images/1.png' style='width: 80px;height: 80px;'//div> <ul class='abs tc sub-msg-opr' style='margin-left: 0; '> <li> <div style =' width: 150px; " +" Tinggi: 120px; style = 'line-height: 100px;' href = 'javaScript: void (0)' " +" ontClick = 'RemovedIv (/"" + msgdiv + "/"); return false;'> hapus </a> </div> </li> </ul> </div> "); $ ("#"). 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 = 'Text' TEXT = 'Title' ID = '"/MSGDIV +"' OnChange = 'Text' 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 Ukuran yang Disarankan: 720 piksel* 400 piksel </span> Cover </label> " +" <div class = 'cover-area' style = 'vertikal-align: bawah; margin-bottom: 10px;'> <input type = 'file'name =' file " + msgDiv +" //> " +" + "nilai = 'kUCK =' KULATE = ' + MSGDIV +" //> " +" + "Nilai =' Nilai = 'KULATE =' + MSGDiv +" OnClick = 'AjaxFileUpload (/"" + MsgDiv + "/")'/> " +" <img src = '' id = 'img " + msgdiv +"' style = 'width: 100px; vertical-align: Bottom; border: 1px solid grey'/"/ +" <a id = ' OnClick = 'RemoveImage (/"" + msgdiv + "/")' style = 'vertikal-align: bottom;'> delete </a> </div> " +/*" <label class = 'block' for = '> tautan gambar </label> " +" <input type =' teks 'name =' message_url 'value =' ’Id = '' UR 'MSG =' MSG-INPUT = 'MsG-INPIT =' MSAGE = 'MESSAGE =' MESSAGE = 'Nilai =' 'Ms.' class='block' for=''>Text</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 (" 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 ("Silakan pilih gambar yang akan diunggah"); } else if (suffix! = "jpg" && suffix! = "png") {alert ("Ada format file"); } else {$ .AjaxFileUpload ({URL: 'Fileupload', // Jenis alamat permintaan sisi server: 'POST', FileElementId: 'File' + ID, // ID dari DATATIPE DOMAIN UEDLOAD AWIDE: 'JSON', // Jenis Nilai PERUBAHAN (FUNGSI PERUSAHAAN (FUNGSI PERUBAHAN (FUNGSI SUCKER (Fungsi) (Function) (Function) {function (function) {function (function) {function (function) {function (function) {function (function "," Function (Function, "Function (function") e) // Fungsi Pemrosesan Kegagalan Respons Server {ALERT (E); if (hasil) {window.location = "@publishurl"; }}} function removeTemplate () {if ("@viewbag.template.row_id") {var result = window.confirm ("Konfirmasi untuk menghapus grafik ini?"); if (hasil) {window.location = "@removeurl"; }}}} </script>Download Kode Sumber: Antarmuka Multi-Grafik WeChat
Artikel ini telah dikompilasi menjadi "Ringkasan Keterampilan Pengembangan JavaScript WeChat", dan semua orang dipersilakan untuk belajar dan membaca.
Saya ingin merekomendasikan tutorial tentang program mini WeChat yang sangat prihatin: "Tutorial Pengembangan Program Mini WeChat" telah disusun dengan cermat oleh editor semua orang, saya harap Anda menyukainya.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.