JS подражает мульти-графическому интерфейсу управления Backend WeChat и интегрирует плагин AJAX для асинхронной загрузки файлов для вашей ссылки. Конкретный контент заключается в следующем
Изображение воспроизведения:
Подробный код:
HTML:
<div id = "wrap"> <div id = "боковая панель"> <div> <!-<p style = "margin: 10px 14px 0 14px;"> <pan> 2013-08-14 </span> </p>-> <div onmouseout = "RemoveCover (this);" onmouseover = "showcover (this);"> <h4 id = "title2div0"> title <pan> </span> </h4> <img src = "../ Assets/homer_admin-v1.5/images/2.png"/> <ul style = "margin: 10px 10px; рост: 150px; href = "javascript: void (0)" onclick = "editdiv ('div0')"> <div> edit </div> </a> </ul> </div> </div> <div> <a href = "#" id = "add"> <pan> add </a> </div> </div> <div> <div> "div =" div = "div =" div = "div =" div = "div ="> <pan> ". method="POST" enctype="multipart/form-data" action=""> <label for="">Title</label> <input type="text" name="Title" value="0th" id="titlediv0" onchange="setTitle('div0')" /> <label for="">Author<em>(optional)</em></label> <input type="text" name="Author" value="" id="author" /> <label for=""><span id="upload-tip">Large image recommended size: 720 pixels* 400 pixels</span> Cover</label> <div style="vertical-align: bottom; margin-bottom: 10px;"> <input type="file" name="file" id="filediv0" /> <input type="button" value="Upload" onclick = "ajaxfileupload ('div0')"/> <img src = "" id = "imgdiv0"/> <a id = "rmdiv0" href = "#" onclick = "removeImage ('div0')" style = "vertical-align: снизу;> delete ('div0')" <input type = "text" name = "message_url" value = "" id = "url">-> <label для = ""> text </label> <textarea name = "content" id = "myeditor"> </textarea> <div id = "url-block" style = "margin-top: 14px;"> <label for = "" rigine link = 'mp_dest'> 'mp_dest'> 'mp_dest'> 'mp_dest'> 'mp_desc'> 'mp_desc'> 'mp_dest'> (Необязательно) </em> </label> <input type = "text" name = "content_link" value = "" id = "surl"/> <br/> </div> </form> </div> </div> <div Style = "clear: оба; Padding-top: 20px;"> style = "clear: оба; #dddddd; "> <input type =" button "onclick = 'publishtemplate ()' value =" save "/> <input type =" кнопка "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: «Содержание, отображаемое по умолчанию в редакторе», // инициализировать содержимое редактора initialFrameHeight: 340}; var editor = new ue.ui.editor (опция); editor.render ("Myeditor"); function removeImage (id) {$ ("#img" + id) .hide (); $ ("#rm" + id) .hide (); } функция ShowCover (obj) {$ (obj) .AdDClass ("sub-msg-opr-show"); } функция removeCover (obj) {$ (obj) .RemoveClass ("sub-msg-opr-show"); } функция editDiv (obj) {if (showdiv! = obj) {$ ("#" + showdiv) .hide (); $ ("#" + obj) .show (); showdiv = obj; }} function elemoviviv (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 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.length = arderne uerte = arderte = arderne uerte = armergene = ardernect = armertene uerte uerte aeert uerte aeert uerte a armend armend ardence (msgdiv); showdiv = msgdiv; Информация ') MSGDIV + "Стиль = 'Border-top: 1px solid #c6c6c6; Высота: 120px;' onmouseout = 'removecover (this);" + " style = 'float: right;'> " +" <img src = '../assets/homer_admin-v1.5/images/1.png' style = 'width: 80px; высота: 80px;' // images/1.png 'style =' width: 80px; высота: 80px; '// div> <ul class =' abs tc sub-msg-style style: '; <li> <div style = 'width: 150px; " +" Высота: 120px; Style = 'line-hight: 100px;' href = 'javascript: void (0)' " +" onclick = 'removediv (/"" + msgdiv + "/"); вернуть false;'> delete </a> </div> </li> </ul> </div> "); id = '" + msgdiv +"'> " +" <form method = 'post' enctype = 'multiply/form-data' action = ''> <label class = 'block' for = '> title </label> " +" <input type =' text 'name =' title 'id =' title " + msgdiv +" onchange = 'settitle (/"" + msgdiv + ") class = 'msg-input'> " +" <label class = 'block' for = ''> author <em class = 'mp_desc'> (необязательно) </em> </label> <input type = 'text' name = 'value =' 'id =' Автор 'class =' msg-input '/> " +" label class =' block 'for =' '> <spanload class =' up 'uplload = Картинка Предлагаемое размер: 720 пикселей* 400 пикселей </span> Cover </label> " +" <div class = 'area-area' style = 'vertical-align: внизу; margin-bottom: 10px;'> <input type = 'file'name =' file " + msgdiv +" //> " +" <input = 'value =' ulload 'ulload' ulload 'ulload' upload '' //> " +" <input = ' onclick = 'ajaxfileupload (/"" + msgdiv + "/")'/> " +" <img src = '' 'id =' img " + msgdiv +" 'style =' width: 100px; вертикальный Align: внизу; граница: 1px solid ’/>" + "<a id = 'rm" + msgdiv + "href +" href + "href +" href + "href +" href + "href +" href + "href +" href + "href +" href + "href +" href + "href +" href + "href +" href + "href +" href + "href +" href + "href +" href + "href +" href + "hre. onclick = 'removeImage (/"" + msgdiv + "/")' style = 'vertical-align: notem;'> delete </a> </div> " +/*" <label class = 'block' for = '> link </label> " +" <input =' text 'name =' message_ value = '' ud = 'url' + '<inty name =' message_uurl 'value =' 'ur 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 ='> riginal link <em class = 'mp_dest. (Необязательно) </em> </label> <input type = 'text' name = 'content_link' value = '' id = 'surl' class = 'msg-input'/> " +" <br/</hyv> </form> </div> "); editor.render (" rich " + msgdiv);}); функция ajaxfileupload (id) {var filename = $ ("#file" + id) .val (); VAR Суффикс; if (filename! = "") {суффикс = файл filename.substr (filename.indexof (".") + 1, filename.length); } if (fileName == "") {alert ("Пожалуйста, выберите изображение для загрузки"); } else if (суффикс! = "jpg" && суффикс! = "png") {alert ("Есть какой -либо формат файла"); } else {$ .ajaxFileUpload ({url: 'fileupload', // Тип адреса запроса на стороне сервера: 'post', fileElementId: 'file' + id, // id of file Domain Datatype: 'json', // return Value Type, как правило, устанавливается на json uccess: function (data status) // Function Function {alert {alert {alert {alert {, ",") Статус, E) // Функция сбоя ответа сервера {alert (e); if (result) {window.location = "@publishurl"; }}} function removeTemplate () {if ("@viewbag.template.row_id") {var result = window.confirm ("Подтвердить удаление этой графики?"); if (result) {window.location = "@removeurl"; }}}} </script>Скачать исходный код: мультирафический интерфейс WeChat
Эта статья была составлена в «Краткое описание навыков развития WeChat JavaScript», и все могут учиться и читать.
Я хотел бы порекомендовать учебник по программе WeChat Mini, которая очень обеспокоена: «Учебник по разработке мини -программы WeChat» был тщательно скомпилирован редактором всех, я надеюсь, вам понравится.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.