He creado una versión del terminal móvil de chat WeChat h5. Durante este período de tiempo, clasifiqué los proyectos anteriores y los actualicé en función de la versión original, por lo que tenemos la versión actual de imitación alta de WeChat h5. Se agregan otros nuevos: Wechat, Libreta de direcciones, Explorar y Yo. El módulo tiene cambio de pantalla táctil y deslizante hacia la izquierda y hacia la derecha, la página de chat ha optimizado la vista previa de múltiples imágenes, reproducción de video, interfaz de usuario del menú de pulsación larga, el editor en la parte inferior del chat ha sido reoptimizado y organizado (se agregaron más emoticones) Y la ventana emergente utiliza wcPop.js de desarrollo propio. ¡Específicamente, mire las representaciones del proyecto!
fragmento de código html:
<!-- //Panel de funciones inferior de Wechat--><div class=wc__footTool-panel> <!-- Módulo de cuadro de entrada--> <div class=wc__editor-panel wc__borT flexbox> <div class=wrap-editor flex1 > <div class=editor J__wcEditor contenteditable=true></div></div> <i class=btn btn-emotion></i> <i class=btn btn-choose></i> <button class=btn-submit J__wchatSubmit>Enviar</button> </div> <!-- Expresión, módulo de selección--> <div class=wc__choose-panel wc__borT style= mostrar: ninguno;> <!-- Área de expresión--> <div class=wrap-emotion style=display: none;> <div class=emotion__cells flexbox flex__direction-column> <div class=emotion__cells-swiper flex1 id=J__swiperEmotion> <div class=swiper-container> <div class=swiper-wrapper></div> <div class=paginación-emoción></div> < /div> </div> <div class=emotion__cells-footer id=J__emotionFootTab> <ul class=clearfix> <li class=swiperTmpl cur tmpl=swiper__tmpl-emotion01><img src=img/emotion/face01/face-lbl.png <li class=swiperTmpl tmpl=swiper__tmpl-emotion02><img src=img/emotion/ face02/face-lbl.gif <li clase=swiperTmpl tmpl=swiper__tmpl-emotion03><img src=img/emotion/face03/face-lbl.gif <li class=swiperTmpl tmpl=swiper__tmpl-emotion04><img src=img/emotion/face04/face-lbl.gif <li clase =swiperTmpl tmpl=swiper__tmpl-emoción05><img src=img/emotion/face05/face-lbl.gif <li class=swiperTmpl tmpl=swiper__tmpl-emotion06><img src=img/emotion/face06/face-lbl.gif <li class=swiperTmplSet><img src=img /wchat/icon__emotion-set.png </ul> </div> </div> </div> <!-- Seleccionar área--> <div class=wrap-choose style=display: none;> <div class=choose__cells> <ul class=clearfix> <li><a class=J__wchatZp href=javascript :;><span class=img><img src=img/wchat/icon__choose-zp.png /><tipo de entrada=archivo aceptar=imagen/* /></span><em>Fotos</em></a></li> <li><a class=J__wchatSp href=javascript:;><span class=img><img src=img/wchat/ icon__choose-sp.png /><tipo de entrada=archivo aceptar=video/* /></span><em>Video</em></a></li> <li><a class=J__wchatHb href=javascript:;><span class=img><img src=img/wchat/icon__choose-hb.png /></span><em>Sobre rojo</em></a></li> <li > <a class=J__wchatSc href=javascript:;><span class=img><img src=img/wchat/icon__choose-sc.png /></span><em>Mi colección</em></a></li> <li><a class=J__wchatWj href=javascript:;><span class=img><img src=img/ wchat /icon__choose-wj.png /></span><em>Archivo</em></a></li> </ul> </div> </div> </div></div>< div class=wc__choosePanel-tmpl> <!-- //Sobre rojo template.begin --> <div id=J__popupTmpl-Hongbao style=display:none;> <div class=wc__popupTmpl tmpl-hongbao> <i class=wc-xclose > </i> <ul class=clearfix> <li class=item flexbox> <label class=txt>Cantidad total</label><input class=ipt-txt flex1 type=tel name=hbAmount placeholder=0.00 /><em class=unit>元</em> </li> <li class=item flexbox> <label class=txt>Número de sobres rojos< /li> etiqueta><input class=ipt-txt flex1 type=tel name=hbNum placeholder=completa el número/><em class=unit>piezas</em> </li> <li class=tips>El número total de personas en línea es <em class=memNum>186</em></li> <li class=item item-area> <textarea class=describe name=content placeholder=Felicitaciones por hacerse rico y buena suerte></ textarea> </li> <li class=amountTotal>￥<em class=num>0.00</em></li> </ul> </div> </div> <!-- //plantilla de sobre rojo.end --></div>
Fragmento de código Js:
// ...menú emergente con pulsación larga $(#J__chatMsgList).on(longTap, li .msg, function(e){ var that = $(this), menuTpl, menuNode = $(<div class='wc__chatTapMenu anim animado -fadeIn'></div>); that.addClass(grabado); that.parents(li).siblings().find(.msg).removeClass(taped); var isRevoke = that.parents(li).hasClass(me); var _revoke = isRevoke ? <i class='ico i4'></i>Retirar</a> : ; if(that.hasClass(imagen)){ console.log(imagen pulsación larga menuTpl =); <div class='menú menú-imagen'><a href='#'><i class='ico i1'></i>Copiar</a><a href='#'><i class=' ico i2'></i>Recopilar</a><a href='#'><i class='ico i3'></i>Guardar como</a>+ _revoke +<a href='#' ><i clase='ico i5'></i>Eliminar</a></div>; }else if(that.hasClass(video)){ console.log(video pulsación larga); menuTpl = <div class='menu menu-video'; ><a href='#'><i class='ico i3'></i>Guardar como</a> + _revoke +<a href='#'><i class='ico i5'></i>Eliminar</a></div>; }else{ console.log(texto pulsación larga = <div class='menu menu-text'><a href='#'> <i class='ico i1'></i>Copiar</a><a href='#'><i class='ico i2'></i>Recopilar</a> + _revoke +<a href ='#'><yo class='ico i5'></i>Eliminar</a></div>; } if(!$(.wc__chatTapMenu).length){ $(.wc__chatMsg-panel).append(menuNode.html(menuTpl) ); autoPos(); }más{ $(.wc__chatTapMenu).hide().html(menuTpl).fadeIn(250); autoPos(); función autoPos(){ console.log(that.position().top) var _other = that.parents(li ).hasClass(otros); $(.wc__chatTapMenu).css({ posición: absoluta, izquierda: esa.posición().izquierda + parseInt(that.css(marginLeft)) + (_other? 0: that.outerWidth() - $(.wc__chatTapMenu).outerWidth()), arriba: that.position().top - $(.wc__chatTapMenu).outerHeight( ) - 8 }); }});Representación:
ResumirLo anterior es la función de editor de cuadro de diálogo de WeChat Chat y WeChat de alta imitación HTML5. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá. usted en el tiempo de. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!