電子署名とseal_jqueryの効果をシミュレートする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 = $("

盖 章关 闭

").appendTo(_parent);
    var _html = "

确定删除

";


var _add = $('.add', _btnPanel).click(function (e) {
_add.attr('disabled', 'disabled');
varsign = $(_html).appendTo(_parent);
$('.ok',sign).click(function () {
//确定盖章
sign.addClass('ok ').off('mousedown').find('.btn').remove();
_add.removeAttr('disabled');
if (_s.callBack) {
_s.callBack .call(this, { img: _s.img, top: parseInt(sign.css('top')), left: parseInt(sign.css('left')) });
}
} );
$('.del',sign).click(function () {
//取消盖章
sign.remove();
_add.removeAttr('disabled');
});

//绑定移動イベント
sign.on('mousedown', function (e) {
sign.data('x', e.clientX);
sign.data('y', e.clientY);
varposition =sign.position();
$(document).on('mousemove', function (e1) {
var x = e1.clientX -sign.data('x')position.left;
var y = e1.clientY -sign.data('y')position.top;
x = x x = x > range.maxX ? range.maxX : x;
y = y y = y >範囲.最大Y ? range.maxY : y;

sign.css({ 左: x, 上: y });
}).on('mouseup', function () {
$(this).off('mousemove').off('mouseup');
});
});
});

$('.cancel', _btnPanel).click(function () {
var r = true;
if (_add.attr('disabled') == 'disabled') {
if (!confirm("未決定的盖章将被取消，确定要关闭吗?")) {
r = false;
}
if (r) {
//删除未確定位置の盖章
$('.sign:not(.ok)', _parent).remove();
_btnPanel.remove();
🎜 > });
};


[css]

复制代码代码如下:

.zsign .panel
{
位置: 絶対。
上部: 8px;
右: 8px;
}
.zsign .btn
{
表示: インラインブロック;
パディング: 4px 10px 4px;
margin-bottom: 0;
フォントサイズ: 13px;
行の高さ: 18px;
カラー: #333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
垂直配置: 中央;
背景色: ホワイトスモーク;
背景画像: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(#E6E6E6));
background-repeat:repeat-x;
ボーダーカラー: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
境界線: 1px 実線 #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);
カーソル: ポインタ。
-webkit-user-select: なし。
}
.zsign .btn:hover
{
color: #333;
テキスト装飾: なし。
背景色: #E6E6E6;
背景位置: 0 -15px;
-webkit-transition: 背景位置 0.1 秒の線形。
}
.zsign .btn[無効]
{
カーソル: デフォルト;
背景画像: なし。
背景色: #E6E6E6;
不透明度: 0.65;
フィルター: alpha(opacity=65);
-webkit-box-shadow: なし。
-moz-box-shadow: なし。
box-shadow: なし。
}
.zsign .cursor
{
カーソル: なし。
}
.zsign .show
{
表示: ブロック;
}
.zsign .hide
{
表示: なし。
}

.zsign .sign
{
位置: 絶対。
カーソル: 移動;
境界線: 1px 破線 #ccc;
パディング: 8px;
表示: -webkit-box;
-webkit-box-pack: 中央;
-webkit-box-align: 中央;
}
.zsign .sign.ok
{
カーソル: デフォルト。
ボーダーカラー:透明;
}
.zsign .sign img
{
max-height: 100%;
最大幅: 100%;
}
.zsign .sign .btn
{
パディング: 2px 6px;
フォントサイズ: 11px;
行の高さ: 14px;
位置: 絶対。
}

.zsign .sign .btn.del
{
下: 4px;
右: 4px;
}
.zsign .sign .btn.ok
{
下: 4px;
右: 50px;
}

[html]

复制代码代码如下:

<スクリプト>
var a =$("#test").zSign({ img: '1.gif'});