JS เลียนแบบอินเทอร์เฟซแบบหลายกราฟิกของการจัดการแบ็กเอนด์ WeChat และรวมปลั๊กอิน AJAX สำหรับการอัปโหลดไฟล์แบบอะซิงโครนัสสำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
ภาพการทำซ้ำ:
รหัสรายละเอียด:
html:
<div id = "wrap"> <div id = "sidebar"> <div> <!-<p style = "มาร์จิ้น: 10px 14px 0 14px;"> <pan> 2013-08-14 </span> </p>-> <div onmouseout = "RemoveCover (นี้);" onMouseOver = "showcover (this);"> <h4 id = "title2div0"> title <span> </pan> </h4> <img src = "../ assets/homer_admin-v1.5/ภาพ/2.png"/> <ul style = "margin: 10px 10px; href = "javascript: void (0)" onclick = "editdiv ('div0')"> <div> แก้ไข </div> </a> </ul> </div> </div> <div> <a href = "#" id = "เพิ่ม"> <pan> method = "post" enctype = "multipart/form-data" action = ""> <label for = ""> title </label> <input type = "text" name = "title" value = "0th" id = "titleDiv0" onChange = "settItle ('div0') value = "id =" Author " /> <label for =" "> <span id =" อัพโหลดปลาย "> ภาพขนาดใหญ่ที่แนะนำขนาด: 720 พิกเซล* 400 พิกเซล </span> ครอบคลุม < /label> <div style =" แนวตั้ง: lign "lignd" onclick = "ajaxfileupload ('div0')"/> <img src = "" id = "imgdiv0"/> <a id = "rmdiv0" href = "#" onclick = "removemage ('div0') type = "text" name = "message_url" value = "" id = "url">-> <label for = ""> ข้อความ </label> <textarea name = "content" id = "myeditor"> </textarea> <div id = "url-block" <อินพุต type = "text" name = "content_link" value = "" id = "surl"/> <br/> </div> </form> </div> </div> <div style = "Clear: ทั้งสอง; onclick = 'publishTemplate ()' value = "บันทึก"/> <อินพุต type = "ปุ่ม" onclick = "removeTemplate ()" value = "ลบ"/> </div> </div> </div>JavaScript:
<script> var arr = ['div1', 'div2', 'div3', 'div4', 'div5', 'div6', 'div7']; var arr2 = new Array (); var showdiv = "div0"; ตัวเลือก var = {initialContent: 'เนื้อหาที่แสดงโดยค่าเริ่มต้นในตัวแก้ไข', // เริ่มต้นเนื้อหาของตัวแก้ไข initialFrameHeight: 340}; var editor = ใหม่ ue.ui.editor (ตัวเลือก); editor.render ("myeditor"); ฟังก์ชั่น removeImage (id) {$ ("#img" + id) .hide (); $ ("#rm" + id) .hide (); } ฟังก์ชั่น ShowCover (OBJ) {$ (OBJ) .AddClass ("Sub-MSG-OPR-Show"); } ฟังก์ชั่น RemoveCover (OBJ) {$ (OBJ) .RemoVeclass ("Sub-MSG-OPHOW"); } ฟังก์ชั่น editdiv (obj) {ถ้า (showdiv! = obj) {$ ("#" + showdiv) .hide (); $ ("#" + obj). show (); showdiv = obj; }} ฟังก์ชั่น 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 {ถ้า (obj == showdiv) {showdiv = arr2.pop (); arr2.push (showdiv); $ ("#" + showdiv). show (); } else {$ ("#" + showdiv) .show (); showdiv = arr2.pop (); arr2.push (showdiv); }}} ฟังก์ชั่น settitle (obj) {$ ("#title2" + obj) .Text ($ ("#title" + obj) .val ()); } $ ("#add") .click (function () {var msgdiv; // var msgdiv2; ถ้า (arr.length == 7) {$ ("#" + showdiv) .hide (); msgdiv = arr.pop () arr2.push (msgdiv); ข้อมูลกราฟิก '); id = 's " + msgdiv +"' style = 'border-top: 1px solid #c6c6c6; ความสูง: 120px; id = 'title2 "+msgdiv+"'> title </div> <div style = 'float: ขวา;'> "+" <img src = '../ทรัพย์สิน/homer_admin-v1.5/images/1.png' style = 'ความกว้าง: 80px; class = 'abs tc sub-msg-opr' style = 'margin-left: 0;'> <li> <div style = 'ความกว้าง: 150px; " +" ความสูง: 120px; "/"); return false; '> แก้ไข </a> " +" <a style =' line-height: 100px; 'href =' javascript: void (0) '" +" onclick =' removediv (/"" msgdiv + "/"); <div class = 'msg-editer' id = '" + msgdiv +"'> " +" <method method = 'post' enctype = 'multipart/form-data' action = ''> <label class = 'block' for = ''> title </label> " +" "/") 'class =' msg-input '> " +" <label class =' block 'สำหรับ =' '> ผู้แต่ง <em class =' mp_desc '> (ไม่บังคับ) </em> </label> <อินพุต type =' text 'name =' Author 'value =' 'id =' class = 'msg-input' R'ID = 'UPLOAD-TIP'> ภาพขนาดใหญ่ที่แนะนำขนาด: 720 พิกเซล* 400 พิกเซล </span> ปก </label> " +" <div class = 'cover-area' style = 'แนวตั้ง-แนว: ด้านล่าง; onclick = 'ajaxfileupload (/"" + msgdiv + "/")'/> " +" <img src = '' id = 'img " + msgdiv +"' style = 'ความกว้าง: 100px; Vertical-allign: bottom; onclick = 'removeImage (/"" + msgdiv + "/")' style = 'แนวตั้ง-แนว: ด้านล่าง;'> ลบ </a> </div> " +/*" <label class = 'block' สำหรับ = '' ลิงก์รูปภาพ </label> " +" class = 'block' for = ''> text </label> <textarea name = 'content' id = 'rich " + msgdiv +"'> </textarea> " +" <div class = 'id =' url-block 'style =' margin-top: 14px; '> " +" <label class =' <อินพุต type = 'text' name = 'content_link' value = '' id = 'surl' class = 'msg-input'/> " +" <br//</div> </div> </div> </div> "); editor.render (" rich " + msgdiv);}); ฟังก์ชั่น ajaxfileupload (id) {var filename = $ ("#ไฟล์" + id) .val (); คำต่อท้าย var; if (filename! = "") {suffix = filename.substr (filename.indexof (".") + 1, filename.length); } if (filename == "") {แจ้งเตือน ("โปรดเลือกรูปภาพเพื่ออัปโหลด"); } อื่นถ้า (ต่อท้าย! = "jpg" && คำต่อท้าย! = "png") {แจ้งเตือน ("มีรูปแบบไฟล์ใด ๆ "); } else {$ .ajaxFileUpload ({url: 'fileupload', // ประเภทที่อยู่คำขอของเซิร์ฟเวอร์: 'โพสต์', filelementId: 'ไฟล์' + id, // id ของไฟล์อัพโหลดข้อมูลโดเมน: 'JSON', // สถานะ, e) // ฟังก์ชั่นการประมวลผลความล้มเหลวของเซิร์ฟเวอร์ {Alert (e);}})}} ฟังก์ชั่น publishTemplate () {ถ้า ("@viewbag.template.row_id") {var result = window.confirm ("ยืนยันการเผยแพร่กราฟิกหรือข้อความนี้?"); if (ผลลัพธ์) {window.location = "@publishurl"; }}} ฟังก์ชั่น removeTemplate () {if ("@viewbag.template.row_id") {var result = window.confirm ("ยืนยันเพื่อลบกราฟิกนี้?"); if (ผลลัพธ์) {window.location = "@removeurl"; }}}} </script>ดาวน์โหลดซอร์สโค้ด: WeChat Multi-graphic Interface
บทความนี้ได้รวบรวมไว้ใน "สรุปทักษะการพัฒนา JavaScript WeChat" และทุกคนยินดีที่จะเรียนรู้และอ่าน
ฉันอยากจะแนะนำการสอนเกี่ยวกับโปรแกรม WeChat Mini ที่มีความกังวลอย่างมาก: "การสอนการพัฒนาโปรแกรม WeChat Mini" ได้รับการรวบรวมอย่างระมัดระวังโดยบรรณาธิการของทุกคนฉันหวังว่าคุณจะชอบ
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น