最近のプロジェクトには、モバイル端末での手書き署名の機能要件が含まれています。実装コードは、友人の参考のためにここに記録されます。
HTMLコード:
<!--手書き領域--> <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>手書きエリア</p> <canvas id=mSign_signMark_canvas></canvas> </div> </div> </div> </div> <!--手書き領域終了--> <!--下のボタン--> <div class=mSign_signMark_footer> <span id=mSign_signMark_clear_out class=mSign_signMark_footer_cancle>クリア</span> <span id=mSign_signMark_submit class=mSign_signMark_footer_sure>OK</span> </div> <!--下のボタンの端-->
CSS スタイル:
.mSign_signMark_box{パディング: 15px 15px 26px 15px;}.mSign_signMark_footer{最大幅: 640px;マージン: 0 自動;高さ: 44px;背景: #4ba7eb;位置: 固定;下: 0;左: 0;右: 0;色:#fff;フォントサイズ: 16 ピクセル;テキスト配置: センター;行の高さ: 44 ピクセル;}.mSign_signMark_footer スパン{表示: ブロック;幅: 50%;テキスト配置: センター;フロート: 左;}.mSign_signMark_footer_cancle{背景: #f4f4f5;カラー: #333333;}/*手書きの署名*/.mSign_signMark_write_box{位置: 相対;高さ: 240px;}.mSign_signMark_body_box {位置: 絶対;背景色: #fff;ボーダー: 1px 実線 #ccc;上:0;左: 0 ;右: 0;下: 0;幅: 99%;高さ: auto;min-width: 250px;min-height: 140px;}.mSign_signMark_body {位置: 絶対;左: 0;右: 0;上: 0;下: 0;}.mSign_signMark_body キャンバス {位置: 絶対;左: 0 ;上部: 0;幅: 100%;高さ: 100%;}.mSign_signMark_body p{位置: 絶対;フォント サイズ: 14px;色: #ccc;text-align: センター;幅: 100%;上部: 50%;マージン上部: -22px;}.mSign_signMark_clear_out{位置: 絶対;上部: -10px;右: -5px;z-index: 10;表示: なし;}.mSign_signMark_clear_out img{幅: 18px;高さ: 18px;}このページでは JS が紹介されています。
//手書き領域タッチイベント $(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(); });});手書き署名紹介jsファイルアドレス：qianmian-js.rar
効果は次のとおりです。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。