JSは、WeChat BackEnd Managementのマルチグラフィックインターフェイスを模倣し、参照用の非同期ファイルのアップロード用にAjaxプラグインを統合します。特定のコンテンツは次のとおりです
複製画像:
詳細なコード:
HTML:
<div id = "wrap"> <div id = "sidebar"> <div> <! - <p style = "マージン: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 = "../ assets/homer_admin-v1.5/emages/2.png"/> <ul style = "マージン:10px 10px; width:320px; href = "javascript:void(0)" onclick = "editdiv( 'div0')"> <div> edit </div> </a> </ul> </div> </div> <div> <a href = "#" id = "add"> <span>追加</a>追加method = "post" enctype = "multipart/form-data" action = "" "> <label for =" "> title </label> <入力タイプ=" text "name =" value "value =" tittlediv0 "onchange =" setitle( 'div0') "/> <label for =" " value = "" id = "Author" /> <label for = "" "> <span id =" upload-tip ">大きな画像推奨サイズ:720ピクセル* 400ピクセル< /span>カバー< /label> <div style =" vertical-align:bortical-align:bortial-align:bortom:10px; "> <inputタイプ="ファイル "nam onclick = "ajaxfileupload( 'div0')"/> <img src = "" id = "imgdiv0"/> <a id = "rmdiv0" href = "#" onclick = "remoimage( 'div0')" style = " type = "text" name = "message_url" value = "" id = "url"> - > <label for = ""> text </label> <textarea name = "content" = "myeditor"> </textarea> <div div = "url-block" stiled = "margin-top:14px;"> <label) " <入力タイプ= "text" name = "content_link" value = "" id = "surl"/> <br/> </div> </form> </div> </div> <div style = "clear:blod; padding-top:20px;"> <div style = "clear:clear:blote; text-align:center; padtop:border solid tppx; onclick = 'publishtemplate()' value = "save"/> <input type = "button" 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(option); editor.render( "myeditor");関数removeImage(id){$( "#img" + id).hide(); $( "#rm" + id).hide(); } function showcover(obj){$(obj).addclass( "sub-msg-opr-show"); }関数removecover(obj){$(obj).removeclass( "sub-msg-opr-show"); } function editdiv(obj){if(showdiv!= obj){$( "#" + showdiv).hide(); $( "#" + obj).show(); showdiv = obj; }} function 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); }}} 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(); arr2.push(msgdiv); showdiv;グラフィック情報); id = 's " + msgdiv +"' style = 'border-top:1px solid#c6c6c6; height:120px;' removecover( '" +" onmouseover =' showcover(this); id = 'title2 "+msgdiv+"'> title </div> <div style = 'float:right;'> "+" <img src = '../assets/homer_admin-v1.5/images/1.png' style = 'width:80px; height:80px;' //画像/1.png 'width:' width:<px; class = 'abs tc sub-msg-opr' style = 'margin-left:0;'> <li> <div style = 'width; " +" height:16px; <a style =' line-height:100px; ' "/"); return false; '>編集</a> "<a style =' line-height: 'href =' javascript:void(0) '" + "onclick =' remavediv(/" " + msgdiv +"/"); <div class = 'msg-editer' id = '" + msgdiv +"'> " +" <form method = 'post' enctype = 'multipart/form-data' action = ''> <label class = 'block' for = '' "/") 'class =' msg-input '> " +" <label class =' block 'for =' '>著者<em class =' mp_desc '>(optional)</em> </label> <input type =' text 'name ='著者 'value =' id = 'class =' class = 'msg-input'/> r'id = 'upload-tip'>大きな画像提案サイズ:720ピクセル* 400ピクセル</span> cover> cover </label> " +" <div class = 'cover-area' style = 'vertical-align:bortical-align:10px;'> <input type = 'file'name =' file " +" onclick = 'ajaxfileupload(/"" + msgdiv + "/")'/> " +" <img src = '' id = 'img " + msgdiv +"' style = 'width:' width:100px; onClick = 'RemoveImage(/"" + msgdiv + "/")' style = 'vertical-align:bortical-align:bortial-align;'> delete </a> </div> " +/*" <ラベルクラス= 'ブロック' for = ''> picture link </label> class = 'block' for = ''> text </label> <textarea name = 'content' id = 'rich " + msgdiv +"'> </textarea> " +" <div class = 'none' id = 'url-block' style = 'マージントップ:14px;'> " +" <ラベルクラス= 'for =' <入力型= '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サフィックス; if(filename!= ""){suffix = filename.substr(filename.indexof( "。") + 1、filename.length); } if(filename == ""){alert( "アップロードする画像を選択してください"); } else if(suffix!= "jpg" && suffix!= "png"){alert( "ファイル形式"); } else {$ .ajaxfileupload({url: 'fileupload'、//サーバー側の要求アドレスタイプ: 'post'、fileElementId: 'file' + id、// file upload domain datatype: 'json'、//戻り値タイプは一般的にJSONに設定されています。 function(data、status、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マルチグラフィックインターフェイス
この記事は「JavaScript Wechat Development Skillsの要約」にまとめられており、誰もが学習して読むことを歓迎します。
「WeChat Mini Program Development Tutorial」が皆の編集者によって慎重に編集されているWechat Miniプログラムに関するチュートリアルをお勧めします。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。