jquery.color.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. (function($){
  2. $(function(){
  3. if (!$('#easyui-color-style').length){
  4. $('head').append(
  5. '<style id="easyui-color-style">' +
  6. '.color-cell{display:inline-block;float:left;cursor:pointer;border:1px solid #fff}' +
  7. '.color-cell:hover{border:1px solid #000}' +
  8. '</style>'
  9. );
  10. }
  11. });
  12. function create(target){
  13. var opts = $.data(target, 'color').options;
  14. $(target).combo($.extend({}, opts, {
  15. panelWidth: opts.cellWidth*8+2,
  16. panelHeight: opts.cellHeight*7+2,
  17. onShowPanel: function(){
  18. var p = $(this).combo('panel');
  19. if (p.is(':empty')){
  20. var colors = [
  21. "0,0,0","68,68,68","102,102,102","153,153,153","204,204,204","238,238,238","243,243,243","255,255,255",
  22. "244,204,204","252,229,205","255,242,204","217,234,211","208,224,227","207,226,243","217,210,233","234,209,220",
  23. "234,153,153","249,203,156","255,229,153","182,215,168","162,196,201","159,197,232","180,167,214","213,166,189",
  24. "224,102,102","246,178,107","255,217,102","147,196,125","118,165,175","111,168,220","142,124,195","194,123,160",
  25. "204,0,0","230,145,56","241,194,50","106,168,79","69,129,142","61,133,198","103,78,167","166,77,121",
  26. "153,0,0","180,95,6","191,144,0","56,118,29","19,79,92","11,83,148","53,28,117","116,27,71",
  27. "102,0,0","120,63,4","127,96,0","39,78,19","12,52,61","7,55,99","32,18,77","76,17,48"
  28. ];
  29. for(var i=0; i<colors.length; i++){
  30. var a = $('<a class="color-cell"></a>').appendTo(p);
  31. a.css('backgroundColor', 'rgb('+colors[i]+')');
  32. }
  33. var cells = p.find('.color-cell');
  34. cells._outerWidth(opts.cellWidth)._outerHeight(opts.cellHeight);
  35. cells.bind('click.color', function(e){
  36. var color = $(this).css('backgroundColor');
  37. $(target).color('setValue', color);
  38. $(target).combo('hidePanel');
  39. });
  40. }
  41. }
  42. }));
  43. if (opts.value){
  44. $(target).color('setValue', opts.value);
  45. }
  46. }
  47. $.fn.color = function(options, param){
  48. if (typeof options == 'string'){
  49. var method = $.fn.color.methods[options];
  50. if (method){
  51. return method(this, param);
  52. } else {
  53. return this.combo(options, param);
  54. }
  55. }
  56. options = options || {};
  57. return this.each(function(){
  58. var state = $.data(this, 'color');
  59. if (state){
  60. $.extend(state.options, options);
  61. } else {
  62. state = $.data(this, 'color', {
  63. options: $.extend({}, $.fn.color.defaults, $.fn.color.parseOptions(this), options)
  64. });
  65. }
  66. create(this);
  67. });
  68. };
  69. $.fn.color.methods = {
  70. options: function(jq){
  71. return jq.data('color').options;
  72. },
  73. setValue: function(jq, value){
  74. return jq.each(function(){
  75. var tb = $(this).combo('textbox').css('backgroundColor', value);
  76. value = tb.css('backgroundColor');
  77. if (value.indexOf('rgb') >= 0){
  78. var bg = value.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
  79. value = '#' + hex(bg[1]) + hex(bg[2]) + hex(bg[3]);
  80. }
  81. $(this).combo('setValue', value).combo('setText', value);
  82. function hex(x){
  83. return ('0'+parseInt(x).toString(16)).slice(-2);
  84. }
  85. })
  86. },
  87. clear: function(jq){
  88. return jq.each(function(){
  89. $(this).combo('clear');
  90. $(this).combo('textbox').css('backgroundColor', '');
  91. });
  92. }
  93. };
  94. $.fn.color.parseOptions = function(target){
  95. return $.extend({}, $.fn.combo.parseOptions(target), {
  96. });
  97. };
  98. $.fn.color.defaults = $.extend({}, $.fn.combo.defaults, {
  99. editable: false,
  100. cellWidth: 20,
  101. cellHeight: 20
  102. });
  103. $.parser.plugins.push('color');
  104. })(jQuery);