电子签章盖章之jQuery插件jquery.zsign

 简介：  使用jquery.zsign可以实现电子签章盖章效果，使用方便，只需提供自己的章图片。效果图如下：

       页面引用：

      

[javascript]  view plain  copy

1. <link href="~/Content/js/zsign/jquery.zsign.css" rel="stylesheet" />  
2. <script src="~/Content/js/zsign/jquery.zsign.js"></script>  
3. <script>  
4.     $(function () {  
5.         top.$(".content-iframe").css("background-color", "#f9f9f9");  
6.         $(".price-box").zSign({ img: '/Content/js/zsign/signet.gif' });  
7.     })  
8. </script>  

[javascript]  view plain  copy

1. <div class="price-box"> //里面是自己的内容  </div>  

      js源码：

    

[javascript]  view plain  copy

1. ;$.fn.zSign = function (options) {  
2.     var _s = $.extend({  
3.         img: '',  
4.         width: 150,  
5.         height: 150,  
6.         offset: 30,           //边界值  
7.         callBack: null  
8.     }, options || {});  
9.   
10.     var _parent = $(this).addClass('zsign');  
11.     var range = {  
12.         minX: _s.offset,  
13.         minY: _s.offset,  
14.         maxX: $(window).width(),      //扣去2个padding=8px以及2个边框1px  
15.         maxY: $(window).height()  
16.     };  
17.   
18.     var _btnPanel = $("<div class='panels'><button class='btn btn-default add ' >盖 章</button><button class='btn btn-default cancel'>关 闭</button></div>").appendTo(_parent);  
19.     var _html = "<div class='sign' style='height:" + _s.height + "px;width:" + _s.width + "px;top:" + _s.offset + "px;left:" + _s.offset + "px'><img src='" + _s.img + "' draggable='false'/><button class='btn btn-default ok' >确定</button><button class='btn btn-default del' >删除</button></div>";  
20.   
21.   
22.     var _add = $('.add', _btnPanel).click(function (e) {  
23.         _add.attr('disabled', 'disabled');  
24.         var sign = $(_html).appendTo(_parent);  
25.         $('.ok', sign).click(function () {  
26.             //确定盖章  
27.             sign.addClass('ok').off('mousedown').find('.btn').remove();  
28.             _add.removeAttr('disabled');  
29.             if (_s.callBack) {  
30.                 _s.callBack.call(this, { img: _s.img, top: parseInt(sign.css('top')), left: parseInt(sign.css('left')) });  
31.             }  
32.         });  
33.         $('.del', sign).click(function () {  
34.             //取消盖章  
35.             sign.remove();  
36.             _add.removeAttr('disabled');  
37.         });  
38.   
39.         //绑定移动事件  
40.         sign.on('mousedown', function (e) {  
41.             sign.data('x', e.clientX);  
42.             sign.data('y', e.clientY);  
43.             var position = sign.position();  
44.             $(document).on('mousemove', function (e1) {  
45.                 var x = e1.clientX - sign.data('x') + position.left;  
46.                 var y = e1.clientY - sign.data('y') + position.top;  
47.                 x = x < range.minX ? range.minX : x;  
48.                 x = x > range.maxX ? range.maxX : x;  
49.                 y = y < range.minY ? range.minY : y;  
50.                 y = y > range.maxY ? range.maxY : y;  
51.   
52.                 sign.css({ left: x, top: y });  
53.             }).on('mouseup', function () {  
54.                 $(this).off('mousemove').off('mouseup');  
55.             });  
56.         });  
57.     });  
58.   
59.     $('.cancel', _btnPanel).click(function () {  
60.         var r = true;  
61.         if (_add.attr('disabled') == 'disabled') {  
62.             if (!confirm("未确定的盖章将被取消，确定要关闭吗？")) {  
63.                 r = false;  
64.             }  
65.         }  
66.         if (r) {  
67.             //删除未确定位置的盖章  
68.             $('.sign:not(.ok)', _parent).remove();  
69.             _btnPanel.remove();  
70.         }  
71.     });  
72. };  

css 源码：

 

[css]  view plain  copy

1. .zsign .panels  
2. {  
3.     position: absolute;  
4.     top: 22px;  
5.     right: 8px;  
6. }  
7. .zsign .btn  
8. {  
9.     margin-right:5px;  
10. }  
11.   
12. .zsign .btn[disabled]  
13. {  
14.     cursor: default;  
15.     background-image: none;  
16.     background-color: #E6E6E6;  
17.     opacity: 0.65;  
18.     filter: alpha(opacity=65);  
19.     -webkit-box-shadow: none;  
20.     -moz-box-shadow: none;  
21.     box-shadow: none;  
22. }  
23. .zsign .cursor  
24. {  
25.     cursor: none;  
26. }  
27. .zsign .show  
28. {  
29.     display: block;  
30. }  
31. .zsign .hide  
32. {  
33.     display: none;  
34. }  
35.   
36. .zsign .sign  
37. {  
38.     position: absolute;  
39.     cursor: move;  
40.     border: 1px dashed #ccc;  
41.     padding: 8px;  
42.     display: -webkit-box;  
43.     -webkit-box-pack: center;  
44.     -webkit-box-align: center;  
45. }  
46. .zsign .sign.ok  
47. {  
48.     cursor: default;  
49.     border-color:transparent;  
50. }  
51. .zsign .sign img  
52. {  
53.     max-height: 100%;  
54.     max-width: 100%;  
55. }  
56. .zsign .sign .btn  
57. {  
58.     padding: 2px 6px;  
59.     font-size: 11px;  
60.     line-height: 14px;  
61.     position: absolute;  
62. }  
63.   
64. .zsign .sign .btn.del  
65. {  
66.     bottom: 4px;  
67.     right: 4px;  
68. }  
69. .zsign .sign .btn.ok  
70. {  
71.     bottom: 4px;  
72.     right: 50px;