jquery的colorpicker:jPicker

来源:互联网 发布:数据预处理常用函数 编辑:程序博客网 时间:2024/06/06 03:07

两个参考地址:http://www.digitalmagicpro.com/jPicker/

http://blog.csdn.net/u013456765/article/details/21189799



小例子估计只有自己能看懂:

function test4(){
$.fn.jPicker.defaults.images.clientPath='images/';      //一定要把images文件也加载进项目。
    $('.color-pick').jPicker({
    window:{
    effects:  //打开和关闭时的效果
        {
          type: 'slide', // effect used to show/hide an expandable picker. Acceptable values "slide", "show", "fade"
          speed:         
          {
            show: 'fast', // duration of "show" effect. Acceptable values are "fast", "slow", or time in ms
            hide: 'fast' // duration of "hide" effect. Acceptable value are "fast", "slow", or time in ms
          }
        },
    position:   //设置显示位置,相对于屏幕而言。
    {  
        x: 'screenCenter', /* acceptable values "left", "center", "right", "screenCenter", or relative px value */  
        y: 'bottom' /* acceptable values "top", "bottom", "center", or relative px value */  
    }, 
      expandable:true,
      title:'请选择颜色',
      updateInputColor: true,
    },
    images:
      {
         clientPath: 'images/', // Path to image files
       }
    },
        function(color, context) //按下确定按钮后,获取当前选中的颜色,修改echarts背景颜色
        {
          var all = color.val('all');
          options.backgroundColor=all && '#' + all.hex || 'transparent'; 
          esbAbility(options); 
        }
    );
    $('.color-pick').on('change',function(e){ //当input框值改变时,echarts的背景颜色也改变。
    options.backgroundColor='#' + this.value;
       esbAbility(options);
    });


}




原创粉丝点击