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

The customer raised a requirement and needs to stamp the official seal on the documents that have been reviewed. If there is no ready-made product found on the Internet, the customer needs to work on his own.

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]

Copy codeThe 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 = $ ("<div class = 'panel '> <button class = 'btn add'> stamp </button> <button class = 'btn cancel'> off close </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 '> <button class = 'btn OK '> OK </button> <button class = 'btn del'> Delete </button> </div> ";

 
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]Copy codeThe 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]

Copy codeThe Code is as follows: <! DOCTYPE html>
<Html>
<Head>
<Title> test </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 = "width: 800px; height: 500px; border: 1px solid red; margin: 40px auto; position: relative;"> </div>

<Script>
Var a = $ ("# test"). zSign ({img: '1.gif '});
</Script>
</Body>
</Html>