colorpicker.html 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>ColorPicker Examples</title>
  6. <link rel="stylesheet" href="../themes/default/default.css" />
  7. <script src="../kindeditor-min.js"></script>
  8. <script>
  9. KindEditor.ready(function(K) {
  10. var colorpicker;
  11. K('#colorpicker').bind('click', function(e) {
  12. e.stopPropagation();
  13. if (colorpicker) {
  14. colorpicker.remove();
  15. colorpicker = null;
  16. return;
  17. }
  18. var colorpickerPos = K('#colorpicker').pos();
  19. colorpicker = K.colorpicker({
  20. x : colorpickerPos.x,
  21. y : colorpickerPos.y + K('#colorpicker').height(),
  22. z : 19811214,
  23. selectedColor : 'default',
  24. noColor : '无颜色',
  25. click : function(color) {
  26. K('#color').val(color);
  27. colorpicker.remove();
  28. colorpicker = null;
  29. }
  30. });
  31. });
  32. K(document).click(function() {
  33. if (colorpicker) {
  34. colorpicker.remove();
  35. colorpicker = null;
  36. }
  37. });
  38. });
  39. </script>
  40. </head>
  41. <body>
  42. <input type="text" id="color" value="" /> <input type="button" id="colorpicker" value="打开取色器" />
  43. </body>
  44. </html>