In den letzten Tagen habe ich H5 verwendet, um eine WeChat-ähnliche Chat-Frontend-Oberfläche zu entwickeln, die sehr gut gehandhabt wird. Die Funktionen und Effekte sind jedoch nicht so umfassend wie bei WeChat , es ist immer noch ganz gut, Nachrichten zu senden, Emoticons und gesendete Nachrichten können automatisch nach unten scrollen. Darüber hinaus können Sie verschiedene Eingabeaufforderungen für die Verarbeitung von Nachrichten, Bildern und Videos sowie Belohnungen und Bildschirmbelegungen festlegen und andere Operationen.
HTML-Codeausschnitt:
<!--BEGIN Belohnung--><div class=js_dialog id=J_Dialog_dashang style=display: none;> <!--<div class=weui-mask></div>--> <div class=weui-dialog > <i class=weui-xclose></i> <div class=weui-dialog__bd> <!-- //Tipping template area--> <div class=ws__popup-template> <h2 class=hdTit>Tipp für Ihre Lieblingsprogramme</h2> <div class=item flexbox> <input class=ipt-txt align-l flex1 type=text name=dschooseProgram placeholder=Tipp auswählen Wertschätzungsprogramm readonly /> </div> <div class=item item-area> <textarea class=describe name=content placeholder=Geben Sie eine Belohnungsnachricht mit maximal 30 Wörtern ein (optional)></textarea> </div> <div class=item item-gift id=J__chooseGift> <div class=gift flexbox selected data-gift=001> <label class =txt><span>Luxusautos</span><em class=time>Beherrsche den Bildschirm für 50 Sekunden</em></label> <span class=amount>￥<em>12</em> <i class=chkbox></i></span> </div> <div class=gift flexbox data-gift=002> <label class=txt>< span>Moving Rose</span><em class=time>20 Sekunden lang den Bildschirm dominieren</em></label> <span class=amount>￥<em>8</em> <i class=chkbox></i></span> </div> </div> </div> </div> <div class=weui-dialog__ft> <a href=javascript:; dialog__btn_primary style=background: #ff4400; border-radius: 4px; color: #fff;>Payment<span>￥<em class=moneyNum>12</em></span> Belohnung</a> </div> </div></div><!--END Belohnung-->
Javascript-Codeausschnitt:
/* -Chat-Editorbereich*/var $editor = $(.J__editorText), editor = $editor[0];var $face = $(.emotion-area dd img);$face.on(click, function( e ){ if($(this).hasClass(face)){ //Image var img = $(this)[0].cloneNode(true); setTimeout(function(){ var range, node; if(document.selection && document.selection.createRange){ document.selection.createRange().pasteHTML(img); }else if(window.getSelection && window.getSelection().getRangeAt){ range = window .getSelection().getRangeAt(0); range.insertNode(img); window.getSelection(); sel.addRange(range); }else if($(this).hasClass(del)){ //Remove editor.focus(); = window.getSelection().getRangeAt(0); range.collapse(false); sel.removeAllRanges(); sel.addRange(range); document.execCommand(delete }});//...Der Formatierungseditor enthält Tags editor.addEventListener(focus, function(evt) { Surrounds()} , true);editor.addEventListener(input, function(evt) { Surrounds();}, False);Function Surrounds() { SetTimeout(Function () { //chrome var sel = window.getSelection(); var AnchorNode = sel.anchorNode; if (!anchorNode) return; if (sel.anchorNode === editor || (sel.anchorNode.nodeType === 3 && sel. AnchorNode.parentNode === Editor)) { var range = sel.getRangeAt(0); document.createElement(p); range.selectNodeContents(p); //chrome sel.collapse(p, 0); { var elems = [].slice.call(editor.children); for (var i = 0, len = elems.length; i < len; i++) { var el = elems[i]; if (el.tagName.toLowerCase() == br) { editor.removeChild(el } }, 0) ;}//...Scrollen Sie zum Ende der Chat-Inhaltsfunktion scrollToBottom(){ $('.ws__chatMsg-panel').animate({scrollTop: $(#J__chatMsgList).height()}, 300);}Betriebseffekt:
ZusammenfassenDas Obige ist die vom Herausgeber eingeführte HTML5-Imitation der WeChat-Chat-Schnittstelle. Ich hoffe, dass er Ihnen hilfreich sein wird. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!