O JS imita a interface multi-gráfica do WeChat Backend Management e integra o plug-in Ajax para fazer upload de arquivos assíncronos para sua referência. O conteúdo específico é o seguinte
Imagem de reprodução:
Código detalhado:
html:
<div id = "wrap"> <div id = "barra lateral"> <div> <!-<p style = "margem: 10px 14px 0 14px;"> <pan> 2013-08-14 </span> </p>-> <div onMouseout = "RemoveCover (this);" onMouseOverover = "ShowCover (this);"> <h4 id = "title2div0"> title <span> </span> </h4> <img src = "../ Assets/Homer_admin-V1.5/Images/2.png"/> <Ul Style = "Margin: 10px 10px; href = "javascript: void (0)" onclick = "editdiv ('div0')"> <div> editar </div> </a> </ul> </div> </div> <div> <ant href = "#" id = "add"> <span> adicionar um </ala> </div> </" Método = "Post" Enctype = "Multipart/Form-Data" Action = ""> <Label para = ""> title </elabel> <input type = "text" name = "title" value = "0th" id = "titlediv0" onchange = "Settitle ('div0')"/> <bel para = ""> autor <em> ( value = "" id = "Author" /> <Label for = ""> <span id = "upload-tip"> Grande imagem Tamanho recomendado: 720 pixels* 400 pixels < /span> tampa </elbel> <Div Style = "Vertical-align: Bottom; Margin-Bottom: 10px;"> <input Type = "FILE" Nome = "" "" FILD; OnClick = "AjaxfileUpload ('div0')"/> <img src = "" id = "imgdiv0"/> <a id = "rmdiv0" href = "#" onclick = "removeImage ('div0')" style = "vertical-alig. type = "text" name = "message_url" value = "" id = "url">-> <gravador para = ""> text </elabel> <textarea name = "content" id = "myeditor"> </sexttarea> <block = "url-block" style = "margin-top: 14px;"> <bel para = ""> <input type = "text" name = "content_link" value = "" id = "surl"/> <r/> </div> </form> </div> </div> <div style = "limpe: ambos; padding-top: 20px;"> <border-Toy = "Limpar: ambos; text-align: Center; PaddD-Top: 20px; type = "Button" OnClick = 'PublishTemplate ()' value = "salvar"/> <input type = "button" onclick = "removetemplate ()" value = "delete"/> </div> </div> </div>JavaScript:
<Cript> var arr = ['div1', 'div2', 'div3', 'div4', 'div5', 'div6', 'div7']; var Arr2 = new Array (); var showdiv = "div0"; var option = {InitialContent: 'O conteúdo exibido por padrão no editor', // inicialize o conteúdo do editor inicialFrameHeight: 340}; VAR Editor = new ue.ui.editor (opção); editor.render ("MyEditor"); função removeImage (id) {$ ("#img" + id) .hide (); $ ("#rm" + id) .hide (); } função mostra (obj) {$ (obj) .addclass ("sub-msg-opr-show"); } função removecover (obj) {$ (obj) .removeclass ("sub-msg-opr-show"); } função editdiv (obj) {if (showdiv! = obj) {$ ("#" + showdiv) .hide (); $ ("#" + obj) .show (); showdiv = obj; }} função 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 {if (obj == showdiv) {showdiv = arr2.pop (); arr2.push (showdiv); $ ("#" + showDiv) .show (); } else {$ ("#" + showdiv) .show (); showdiv = arr2.pop (); arr2.push (showdiv); }}} função 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); showdr = msgdr =}; informação '); Msgdiv + "Style = 'Border-top: 1px Solid #C6C6C6; Altura: 120px;' <div style = 'float: direita;'> " +" <img src = '../Assets/homer_admin-v1.5/imagens/1.png' style = 'width: 80px; altura: 80px;' // imagens/1.png 'style =' largura: 80px; altura: 80px; '// divis> 0; '> <li> <Div Style =' Largura: 150px; " +" Altura: 120px; estilo = 'altura da linha: 100px;' id = '' " + msgdiv +" '> " +" <form method =' post 'Enctype =' Multipart/form-data 'action =' ''> <Label class = 'Block' para = ''> title </elabel> " +" <input type = 'text' name = 'title =' title 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 Tamanho sugerido: 720 pixels* 400 pixels </span> tampa </elabel> " +" <div class = 'tob-area' style = 'vertical-align: Bottom; margem-bottom: 10px;'> <input type = 'file'name =' file " + msgdiv +" //> " +" <input Type = ' OnClick = 'AjaxFileUpload (/"" " + msgdiv +"/")'/>" + "<img src = '' id = 'img" + msgdiv + "' style = 'width: 100px; vertical-align: inferior; borda: 1px cinza sólido'/>" + "<a id = '' 'renmnm"/border: 1px Grey'/> "" + "<a id = '' '' rynm 'Rinnm'; ONCLICK = 'RemoneImage (/"" + msgdiv + "/")' style = 'vertical-align: Bottom;'> excluir </a> </div> " +/*" <rótulo class = 'bloco' para = ''> link de imagem </cret> " +" <input Type = 'text' = 'Message_url') class = 'bloqueio' para = ''> text </elabel> <textarea name = 'content' id = 'rich " + msgdiv +"'> </textarea> " +" <div class = 'nenhum' id = 'urlblock' style = 'margin-top: 14px;'> " +" <bel class = 'em' para = ''> <input type = 'text' name = 'content_link' value = '' id = 'surl' class = 'msg-input'/> " +" <br//</div> </morm> </div> "); editor.render (" rich " + msgdiv);}); função ajaxfileUpload (id) {var filename = $ ("#arquivo" + id) .val (); var sufixo; if (nome do arquivo! = "") {sufix = filename.substr (filename.indexOf (".") + 1, arquivo de nome.length); } if (filename == "") {alert ("Selecione a imagem para fazer upload"); } else if (sufixo! = "jpg" && sufix! = "png") {alert ("existe algum formato de arquivo"); } else {$ .ajaxfileUpload ({url: 'fileUpload', // O tipo de endereço de solicitação do servidor-side: 'post', fileElementId: 'arquivo' + id, // id de arquivo de upload de arquivo (datatype: 'JSON', // Tipo de retorno é geralmente definido para JSON SUCCEST: (Dados) /STATION) // função (dados, status, e) // função de falha da resposta ao servidor {alert (e); if (resultado) {window.Location = "@publishurl"; }}} função removetemplate () {if ("@viewbag.template.row_id") {var resultado = window.confirm ("confirmar para excluir este gráfico?"); if (resultado) {window.Location = "@removeurl"; }}}} </script>Download do código-fonte: interface multi-gráfica WeChat
Este artigo foi compilado em "Resumo das Habilidades de Desenvolvimento do Javascript WeChat", e todos são bem -vindos para aprender e ler.
Gostaria de recomendar um tutorial sobre o WeChat Mini Program, que está muito preocupado: "O tutorial de desenvolvimento de programas do WeChat Mini" foi cuidadosamente compilado pelo editor de todos, espero que gostem.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.