模拟电子签章盖章效果的jQuery插件源码

客户提了个需求，需要在已审核的文档上加盖公章，网上找了找没有现成的，自己动手丰衣足食

老规矩，上图看效果：

   
     可以内嵌在各种容器中，已包装成jQuery插件，调用方便。点击“盖章”按钮添加一个新章，可以自由拖动位置，点击确定后保存并触发回调函数方便处理保存，有需要的下载试试。

[javascript]

/*
    desc:jQuery模拟盖章
    author:hyf
    date:2012-11-08
*/ 
;$.fn.zSign = function (options) {
    var _s = $.extend({
        img: ”,
        width: 120,
        height: 120,
        offset: 8,           //边界值
        callBack: null
    }, options || {});
    var _parent = $(this).addClass(‘zsign’);
    var range = {
        minX: _s.offset,
        minY: _s.offset,
        maxX: _parent.width() – _s.width – _s.offset – 18,      //扣去2个padding=8px以及2个边框1px
        maxY: _parent.height() – _s.height – _s.offset – 18
    };
    var _btnPanel = $(“<div class=’panel’><button class=’btn add’ >盖 章</button><button class=’btn cancel’>关 闭</button></div>”).appendTo(_parent);
    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 ok’ >确定</button><button class=’btn del’ >删除</button></div>”;
 
    var _add = $(‘.add’, _btnPanel).click(function (e) {
        _add.attr(‘disabled’, ‘disabled’);
        var sign = $(_html).appendTo(_parent);
        $(‘.ok’, sign).click(function () {
            //确定盖章
            sign.addClass(‘ok’).off(‘mousedown’).find(‘.btn’).remove();