index.html 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
  6. Remove this if you use the .htaccess -->
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8. <meta name="viewport" content="initial-scale=1.0, target-densitydpi=device-dpi" /><!-- this is for mobile (Android) Chrome -->
  9. <meta name="viewport" content="initial-scale=1.0, width=device-height"><!-- mobile Safari, FireFox, Opera Mobile -->
  10. <script src="libs/modernizr.js"></script>
  11. <!--[if lt IE 9]>
  12. <script type="text/javascript" src="libs/flashcanvas.js"></script>
  13. <![endif]-->
  14. <script src="libs/jquery.js"></script>
  15. <script src="libs/jSignature.min.noconflict.js"></script>
  16. </head>
  17. <body>
  18. <div id="content">
  19. <div id="signatureparent">
  20. <div id="signature" style="border: 2px dotted black;"></div>
  21. </div>
  22. <div id="tools"></div>
  23. <div>
  24. <img id="myImg" />
  25. </div>
  26. </div>
  27. <script type="text/javascript">
  28. (function($) {
  29. var topics = {};
  30. $.publish = function(topic, args) {
  31. if (topics[topic]) {
  32. var currentTopic = topics[topic],
  33. args = args || {};
  34. for (var i = 0, j = currentTopic.length; i < j; i++) {
  35. currentTopic[i].call($, args);
  36. }
  37. }
  38. };
  39. $.subscribe = function(topic, callback) {
  40. if (!topics[topic]) {
  41. topics[topic] = [];
  42. }
  43. topics[topic].push(callback);
  44. return {
  45. "topic": topic,
  46. "callback": callback
  47. };
  48. };
  49. $.unsubscribe = function(handle) {
  50. var topic = handle.topic;
  51. if (topics[topic]) {
  52. var currentTopic = topics[topic];
  53. for (var i = 0, j = currentTopic.length; i < j; i++) {
  54. if (currentTopic[i] === handle.callback) {
  55. currentTopic.splice(i, 1);
  56. }
  57. }
  58. }
  59. };
  60. // This is the part where jSignature is initialized.
  61. var $sigdiv = $("#signature").jSignature({'UndoButton':true})
  62. // All the code below is just code driving the demo.
  63. , $tools = $('#tools')
  64. , pubsubprefix = 'jSignature.demo.'
  65. $('<input type="button" value="生成">').bind('click', function(e){
  66. var data = $sigdiv.jSignature('getData', 'default')
  67. $("#myImg").attr("src",data);
  68. console.log(data)
  69. }).appendTo($tools)
  70. $('<input type="button" value="Reset">').bind('click', function(e){
  71. $sigdiv.jSignature('reset')
  72. }).appendTo($tools)
  73. })(jQuery);
  74. </script>
  75. </body>
  76. </html>