Un projet récent concerne les exigences fonctionnelles pour les signatures manuscrites sur les terminaux mobiles. Le code de mise en œuvre sera enregistré ici pour référence de vos amis~.
Code HTML :
<!--Zone d'écriture manuscrite--> <div class=mSign_signMark_box> <div class=mSign_signMark_write_box> <div id=mSign_signMark_signature_pad class=mSign_signMark_body_box> <div class=mSign_signMark_body> <span class=mSign_signMark_clear_out> <img src=../images/mCommon_basicIcon_deleteRed.png> </span> <p>Zone d'écriture manuscrite</p> <canvas id=mSign_signMark_canvas></canvas> </div> </div> </div> </div> <!--Fin de la zone d'écriture manuscrite--> <!--Bouton du bas--> <div class=mSign_signMark_footer> <span id=mSign_signMark_clear_out class=mSign_signMark_footer_cancle>Effacer</span> <span id=mSign_signMark_submit class=mSign_signMark_footer_sure>OK</span> </div> <!--Fin du bouton inférieur-->
Style CSS :
.mSign_signMark_box{padding : 15px 15px 26px 15px;}.mSign_signMark_footer{max-width:640px;margin:0 auto;hauteur : 44px;arrière-plan : #4ba7eb;position : fixe;bas : 0;gauche : 0;droite : 0; couleur : #fff ; taille de police : 16px;alignement du texte : centre;hauteur de la ligne : 44 px;}.mSign_signMark_footer span{affichage : bloc;largeur : 50 %;alignement du texte : centre;flottant : gauche;}.mSign_signMark_footer_cancle{fond : #f4f4f5;couleur : #333333;}/*Signature manuscrite*/.mSign_signMark_write_box{position : relative;hauteur : 240px;}.mSign_signMark_body_box {position : absolue;background-color: #fff;border: 1px solid #ccc;top:0;left: 0 ;droite : 0;bas : 0;largeur : 99 %;hauteur : auto;min-width : 250px;min-height : 140px;}.mSign_signMark_body {position : absolue;gauche : 0;droite : 0;haut : 0;bas : 0;}.mSign_signMark_body canvas {position : absolue;gauche : 0 ;haut : 0;largeur : 100 %;hauteur : 100 %;}.mSign_signMark_body p{position : absolue ; taille de police : 14 px ; couleur : #ccc ; text-align : centre ; largeur : 100 % ; haut : 50 % ; marge-haut : -22 px ;}.mSign_signMark_clear_out{position : absolue ; haut : -10px;droite : -5px;z-index : 10;affichage : aucun;}.mSign_signMark_clear_out img{largeur : 18 px ; hauteur : 18 px ;}La page présente JS :
//Événement tactile de la zone d'écriture manuscrite $(function() { var ctouch=$('.mSign_signMark_body canvas'); ctouch.bind(touchstart,function(event){ $('.mSign_signMark_body p').hide(); }) ; ctouch.mouseover(function(event) { $('.mSign_signMark_body p').hide(); });});Adresse du fichier js d'introduction de la signature manuscrite : qianmian-js.rar
L'effet est le suivant :
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.