模拟电子签章盖章效果的jQuery插件jquery.zsign

来源：互联网发布：知乎什么是爱编辑：程序博客网时间：2024/04/29 15:29

2013-01-28更新：打包最新版本源码到csdn下载频道了，包括demo。下载地址：

上传中，稍候发布。。

CSDN审核还没通过，郁闷，直接贴代码吧：

/*    desc:jQuery模拟签章插件    author:hyf    date:2012-12-24    blog:http://blog.csdn.net/sweetsuzyhyf*/$.fn.zSign = function (options) {    var _s = $.extend({        img: '',                        //图片地址        width: 150,                     //签章图片大小        height: 150,        btnPanel: true,                 //是否开启按钮面板，若按钮面板不满足需求可以关闭后通过返回的handle对象直接调用方法        callBack: null,                 //保存按钮回调函数        list: null,                     //初始化签章，参数格式参照callBack回调函数返回的数据格式        isPercentage: false              //返回结果中的left、top是否以百分比显示，若夫容器是自适应布局推荐    }, options || {});    var _parent = $(this).addClass('zsign'), _pw = _parent.width(), _ph = _parent.height();    var range = {        minX: 0,        minY: 0,        maxX: _pw - _s.width - 2,      //扣去2个边框1px        maxY: _ph - _s.height - 2    };    //按钮面板    var _btnPanel = $("<div class='panel'><button class='btn add' >盖 章</button><button class='btn save'>保 存</button></div>").appendTo(_parent);    _btnPanel.css('display', _s.btnPanel ? 'block' : 'none');    //添加    var _add = $('.add', _btnPanel).click(function (e) {        handle.add();    });    //保存    $('.save', _btnPanel).click(function () {        handle.save();    });    if (_s.list) {        handle.init(_s.list);    }    var handle = {        list: [],        //初始化签章        init: function (list) {            handle.list = [];            $('.sign', _parent).remove();            for (var i = 0; i < list.length; i++) {                var item = list[i];                _parent.append("<div class='sign ok' style='height:" + _s.height + "px;width:" + _s.width + "px;background-image:" + item.img + ";top:" + item.top + ";left:" + item.left + "'></div>");            }        },        //添加签章        add: function () {            handle.btnAddToggle();            var sign = $("<div class='sign' style='height:" + _s.height + "px;width:" + _s.width + "px;background-image:url(" + _s.img + ");'><button class='btn ok' >确定</button><button class='btn del' >删除</button></div>").appendTo(_parent);            $('.ok', sign).click(function () {                //确定签章                handle.sign(sign);            });            $('.del', sign).click(function () {                //删除签章                handle.del(sign);            });            handle.move(sign);        },        //确定签章        sign: function (obj) {            obj.addClass('ok').off('mousedown').find('.btn').css('display', 'none');            handle.btnAddToggle();            handle.list.push({ img: obj.css('background-image') + "", top: obj.css('top'), left: obj.css('left') });        },        //删除        del: function (obj) {            obj.remove();            handle.btnAddToggle();        },        //移动        move: function (obj) {            //绑定移动事件            obj.on('mousedown', function (e) {                obj.data('x', e.clientX);                obj.data('y', e.clientY);                var position = obj.position();                $(document).on('mousemove', function (e1) {                    var x = e1.clientX - obj.data('x') + position.left;                    var y = e1.clientY - obj.data('y') + position.top;                    x = x < range.minX ? range.minX : x;                    x = x > range.maxX ? range.maxX : x;                    y = y < range.minY ? range.minY : y;                    y = y > range.maxY ? range.maxY : y;                    obj.css({ left: x, top: y });                }).on('mouseup', function () {                    $(this).off('mousemove').off('mouseup');                });            });        },        //保存        save: function () {            var r = true;            if ($('.sign:not(.ok)', _parent).length != 0) {                if (!confirm("未点击确认的签章将被移除，确定保存吗？")) {                    r = false;                }            }            if (r) {                //删除未确定位置的签章                $('.sign:not(.ok)', _parent).remove();                _btnPanel.remove();                if (_s.callBack) {                    if (_s.isPercentage) {                        for (var i = 0; i < handle.list.length; i++) {                            var item = handle.list[i];                            item.top = parseInt(item.top) / _ph * 100 + '%';                            item.left = parseInt(item.left) / _pw * 100 + '%';                        }                    } else {                        tmp = handle.list;                    }                    _s.callBack.call(this, handle.list);                }            }        },        //盖章按钮的状态切换        btnAddToggle: function () {            var disabled = _add.attr('disabled');            if (disabled) {                //判断是否有未确定的签章，若有则不切换                if ($('.sign:not(.ok)', _parent).length == 0) {                    _add.removeAttr('disabled');                }            } else {                _add.attr('disabled', 'disabled');            }        },        //返回参数列表，可以在外部直接修改        s: _s,        //签章移动范围        range: range    }    return handle;}

.zsign .panel{    position: absolute;    top:8px;    left:8px;}.zsign .btn{    display: inline-block;    padding: 4px 10px 4px;    margin-bottom: 0;    font-size: 13px;    line-height: 18px;    color: #333;    text-align: center;    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);    vertical-align: middle;    background-color: whiteSmoke;    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(#E6E6E6));    background-repeat: repeat-x;    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);    border: 1px solid #CCC;    border-bottom-color: #B3B3B3;    -webkit-border-radius: 4px;    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);    cursor: pointer;    -webkit-user-select: none;}.zsign .btn:hover{    color: #333;    text-decoration: none;    background-color: #E6E6E6;    background-position: 0 -15px;    -webkit-transition: background-position 0.1s linear;}.zsign .btn[disabled]{    cursor: default;    background-image: none;    background-color: #E6E6E6;    opacity: 0.65;    filter: alpha(opacity=65);    -webkit-box-shadow: none;    -moz-box-shadow: none;    box-shadow: none;}.zsign .btn.add{    margin-right:8px;}.zsign .cursor{    cursor: none;}.zsign .show{    display: block;}.zsign .hide{    display: none;}.zsign .sign{    position: absolute;    cursor: move;    border: 1px dashed #ccc;    background-size: contain;    background-position: center;    background-repeat: no-repeat;}.zsign .sign.ok{    cursor: default;    border-color:transparent;}.zsign .sign .btn{    padding: 2px 6px;    font-size: 11px;    line-height: 14px;    position: absolute;}.zsign .sign .btn.del{    bottom: 4px;    right: 4px;}.zsign .sign .btn.ok{    bottom: 4px;    right: 50px;}

<!DOCTYPE html><html><head>    <title>测试</title>    <link href="jquery.zsign.css" rel="stylesheet" type="text/css" />    <script src="../../jquery-1.7.1.min.js" type="text/javascript"></script>    <script src="jquery.zsign.js" type="text/javascript"></script></head><body>    <div id="test" style="position: relative; width: 80%; height: 400px; border: 1px solid red;        margin: 100px auto">        <div style="text-align: center; font-size: 30px; font-weight: bold">            jQuery模拟签章插件</div>        <p>            可以内嵌在各种容器中，已包装成jQuery插件，调用方便。点击“盖章”按钮添加一个新章，可以自由拖动位置，点击确定后保存并触发回调函数方便处理保存，有需要的下载试试。</p>        <p>            可以内嵌在各种容器中，已包装成jQuery插件，调用方便。点击“盖章”按钮添加一个新章，可以自由拖动位置，点击确定后保存并触发回调函数方便处理保存，有需要的下载试试。</p>        <p>            可以内嵌在各种容器中，已包装成jQuery插件，调用方便。点击“盖章”按钮添加一个新章，可以自由拖动位置，点击确定后保存并触发回调函数方便处理保存，有需要的下载试试。</p>        <div style="margin-left: 60%;">            盖章：</div>    </div>    <ul id="msg">    </ul>    <script>        var a = $("#test").zSign({ img: '1.png', isPercentage:true,callBack: function (obj) {            var html = [];            for (var i = 0; i < obj.length; i++) {                html.push('<li>img:"' + obj[i].img + '", top:"' + obj[i].top + '", left:"' + obj[i].left + '"</li>');            }            $('#msg').html(html.join(''));        }        });    a.init([{ img: "url(http://localhost:4872/Scripts/plugin/sign/1.png)", top: "136px", left: "522px" }, { img: "url(http://localhost:4872/Scripts/plugin/sign/1.png)", top: "34.25%", left: "72.3170731707317%"}]);    </script></body></html>

请多多支持谢谢！

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