JQuery plug-in for simulating the effect of electronic signatures and seals

Source: Internet
Author: User
The jQuery plug-in source code that simulates the effect of electronic signatures and seals. If you need jQuery plug-ins, you can refer to the customer's requirement. You need to stamp the approved documents with the official seal. If you find any plug-in available on the internet, do it yourself

Old rules, see results:


It can be embedded in various containers and packaged into jQuery plug-ins for convenient calling. Click "Stamp" to add a new Chapter. You can drag the position freely. Click "OK" to save and trigger the callback function for easy processing and storage. You can download it as needed.

[Javascript]

The Code is as follows:


/*
Desc: jQuery simulated stamp
Author: hyf
Date: 2012-11-08
*/
; $. Fn. zSign = function (options ){
Var _ s = $. extend ({
Img :'',
Width: 120,
Height: 120,
Offset: 8, // Boundary Value
CallBack: null
}, Options | {});

Var _ parent = $ (this). addClass ('zsign ');
Var range = {
MinX: _ s. offset,
MinY: _ s. offset,
MaxX: _ parent. width ()-_ s. width-_ s. offset-18, // deduct 2 padding = 8px and 2 border 1px
MaxY: _ parent. height ()-_ s. height-_ s. offset-18
};

Var _ btnPanel = $ ("

StampClose

"). AppendTo (_ parent );
Var _ html ="

OKDelete

";


Var _ add = $ ('. add', _ btnPanel). click (function (e ){
_ Add. attr ('Disabled ', 'Disabled ');
Var sign = $ (_ html). appendTo (_ parent );
$ ('. OK', sign). click (function (){
// Confirm stamp
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 (){
// Cancel stamp
Sign. remove ();
_ Add. removeAttr ('Disabled ');
});

// Bind a mobile event
Sign. on ('mouseunder', function (e ){
Sign. data ('x', e. clientX );
Sign. data ('y', e. clientY );
Var position = 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 <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;

Sign.css ({left: x, top: y });
}). On ('mouseup', function (){
$ (This). off ('mousemove '). off ('mouseup ');
});
});
});

$ ('. Cancel', _ btnPanel). click (function (){
Var r = true;
If (_ add. attr ('Disabled ') = 'Disabled '){
If (! Confirm ("uncertain stamp will be canceled. Are you sure you want to close it? ")){
R = false;
}
}
If (r ){
// Delete the stamp of the undetermined position
$ ('. Sign: not (. OK)', _ parent). remove ();
_ BtnPanel. remove ();
}
});
};


[Css]

The Code is as follows:


. Zsign. panel
{
Position: absolute;
Top: 8px;
Right: 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.1 s 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. cursor
{
Cursor: none;
}
. Zsign. show
{
Display: block;
}
. Zsign. hide
{
Display: none;
}

. Zsign. sign
{
Position: absolute;
Cursor: move;
Border: 1px dashed # ccc;
Padding: 8px;
Display:-webkit-box;
-Webkit-box-pack: center;
-Webkit-box-align: center;
}
. Zsign. sign. OK
{
Cursor: default;
Border-color: transparent;
}
. Zsign. sign img
{
Max-height: 100%;
Max-width: 100%;
}
. 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;
}

[Html]

The Code is as follows:





Test

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.