يقلد JS الواجهة متعددة الفجوات لإدارة WeChat الخلفية ، ويدمج المكونات الإضافية AJAX للتحميل غير المتزامن للملفات للرجوع إليها. المحتوى المحدد كما يلي
صورة التكاثر:
رمز مفصل:
HTML:
<div id = "wrap"> <div id = "sidebar"> <div> <!-<p style = "margin: 10px 14px 0 14px ؛"> <span> 2013-08-14 </plan> </p>-> <div onMouseout = "redovecover (هذا) ؛" onMouseover = "Showcover (this) ؛"> <h4 id = "title2div0"> title <span> </span> </h4> <img src = "../ assets/homer_admin-v1.5/images/2.png"/> <ul style: 10px 10px ؛ href = "javaScript: void (0)" onClick = "editdiv ('div0')"> <viv> edit </viv> </a> </ul> </viv> </viv> <viv> <a href = "#" id = "add"> span> method = "post" enctype = "multipart/form-data" action = ""> <label for = ""> title </bally> <input type = "text" name = "title" value = "0th" id = "titlediv0 id = "uptor" /> <label for = ""> <span id = "upload-tip"> صورة كبيرة الموصى بها: 720 بكسل* 400 بكسل < /span> تغطية < /label> <div style = "vertical-align: bottom ؛ margin-bottom: 10px ؛ onClick = "ajaxfileupload ('div0')"/> <img src = "" id = "imgdiv0"/> <a id = "rmdiv0" href = "#" onClick = "removeImage ('div0')" style = "vertical-align: type = "text" name = "message_url" value = "" "id =" url ">-> <label for =" "> text </sably> <textArea name =" content "id =" myeditor "> </sevidea> <div id =" url-block "ystem =" margin-top: 14px ؛ " <type type = "text" name = "content_link" value = "" "id =" surl "/> <br/> </fire> </form> </viv> </viv> <div style =" clear: كلاهما ؛ padding-top: 20px ؛ onClick = 'publishTemplate ()' 'value = "Save"/> <input type = "button" onClick = "removetemplate ()" value = "delete"/> </viv> </viv> </viv>جافا سكريبت:
<script> var arr = ['Div1' ، 'Div2' ، 'Div3' ، 'Div4' ، 'Div5' ، 'Div6' ، 'Div7'] ؛ var arr2 = new array () ؛ var showdiv = "div0" ؛ var Option = {initialContent: "المحتوى المعروض افتراضيًا في المحرر" ، // قم بتهيئة محتوى المحرر initialFrameHeight: 340} ؛ var editor = new ue.ui.editor (Option) ؛ editor.render ("myeditor") ؛ دالة removeImage (id) {$ ("#img" + id) .Hide () ؛ $ ("#rm" + id) .hide () ؛ } وظيفة العرض (obj) {$ (obj) .addClass ("sub-msg-opr-show") ؛ } وظيفة redovecover (obj) {$ (obj) .removeclass ("sub-msg-opr-show") ؛ } الدالة editdiv (obj) {if (showdiv! = obj) {$ ("#" + showdiv) .hide () ؛ $ ("#" + obj) .show () ؛ showdiv = obj ؛ }} دالة redivediv (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 () ؛ } آخر {if (obj == showdiv) {showdiv = arr2.pop () ؛ arr2.push (showdiv) ؛ $ ("#" + showdiv) .show () ؛ } آخر {$ ("#" + 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 = msgv ؛ المعلومات ؛ msgdiv + "'style =' top-top: 1px solid #c6c6c6 ؛ الارتفاع: 120px ؛ <div style = 'float: right ؛'> " +" <img src = '../arcets/homer_admin-v1.5/images/1.png' style = 'width: 80px ؛ height: 80px ؛' // images/1.png 'style =' width ؛ height: 80px ؛ 0 ؛ '> <li> <div style =' width: 150px ؛ " +" الارتفاع: 120px ؛ style = "Line-Height: 100px ؛" id = "" + msgdiv + "'>" + "<method method =' post 'enctype =' multipart/form-data 'Action =' '> <label class =' block 'for =' '> title </billy>" + "<input type =' text 'name =' id = 'title" + msgdiv + "onChange =" class = 'msg-input'> " +" <label class = 'block' for = ''> المؤلف <em class = 'mp_desc'> (اختياري) </em> </sable> <input type = 'text' name = 'upult' value = '' id = 'upile' class = 'msg-input'/> الحجم: 720 بكسل* 400 بكسل </span> غطاء </label> " +" <div class = 'cover-area' style = 'allign-align: bottom ؛ margin-bottom: 10px ؛'> <input type = 'encloy =' file " + msgdiv +" //> msgdiv + "/") '/> " +" <img src =' '' id = 'img " + msgdiv +"' 'style =' width: 100px ؛ alsal-align: bottom ؛ border: 1px solid gray '/> " +" <a id =' rm " + msgdiv +" href = ' style = 'vertical-align: bottom ؛'> delete </a> </viv> "+/*" <label class = 'block' for = ''> link </billy> "+" <input type = 'text' name = 'message_url' value = '' id = 'url' class = 'msg-inpet' id = 'rich " + msgdiv +"'> </filectarea> " +" <div class = 'none' id = 'url-block style =' margin-top: 14px ؛ '> " +" <label class =' block 'for =' 'content_ link <em class =' mp_desc '> (اختياري) </em>' class = 'msg-input'/> " +" <br//</div> </form> </viv> ") ؛ editor.render (" Rich " + msgdiv) ؛}) ؛ دالة ajaxfileupload (id) {var fileName = $ ("#file" + id) .val () ؛ فار لاحقة if (filename! = "") {filename.substr (filename.indexof (".") + 1 ، filename.length) ؛ } if (filename == "") {Alert ("يرجى تحديد الصورة للتحميل") ؛ } آخر إذا (لاحقة! = "jpg" && fascix! = "png") {Alert ("هناك أي تنسيق ملف") ؛ } آخر {$ .ajaxfileUpload ({url: 'fileUpload' ، // نوع عنوان الطلب الخادم: 'post' ، fileElementId: 'file' + id ، // id of file file domain type type: 'json' الدالة (البيانات ، الحالة ، e) // failure failuding server {Alert (e) ؛ if (result) {window.location = "publichurl" ؛ }}} دالة removetemplate () {if ("@viewbag.template.row_id") {var result = window.confirm ("تأكيد لحذف هذا الرسم؟") ؛ if (النتيجة) {window.location = "removeurl" ؛ }}}} </script>تنزيل رمز المصدر: واجهة WeChat Multi-Graphic
تم تجميع هذه المقالة في "ملخص لمهارات تطوير JavaScript WeChat" ، والجميع مرحب بهم للتعلم والقراءة.
أود أن أوصي برمجيًا لبرنامج WeChat Mini الذي يهتم للغاية: "تم تجميع" WeChat Mini Program Development Tutorial "بعناية من قبل محرر الجميع ، وآمل أن أعجبك.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.