模拟电子签章盖章效果的jQuery插件jquery.zsign
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 = $("").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("");
}
},
//添加签章
add: function () {
handle.btnAddToggle();
var sign = $("").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;
}
测试
jQuery模拟签章插件
可以内嵌在各种容器中，已包装成jQuery插件，调用方便。点击“盖章”按钮添加一个新章，可以自由拖动位置，点击确定后保存并触发回调函数方便处理保存，有需要的下载试试。
可以内嵌在各种容器中，已包装成jQuery插件，调用方便。点击“盖章”按钮添加一个新章，可以自由拖动位置，点击确定后保存并触发回调函数方便处理保存，有需要的下载试试。
可以内嵌在各种容器中，已包装成jQuery插件，调用方便。点击“盖章”按钮添加一个新章，可以自由拖动位置，点击确定后保存并触发回调函数方便处理保存，有需要的下载试试。
盖章：
请多多支持谢谢！
可以内嵌在各种容器中，已包装成jQuery插件，调用方便。点击“盖章”按钮添加一个新章，可以自由拖动位置，点击确定后保存并触发回调函数方便处理保存，有需要的下载试试。