基于jQuery UI的调色板插件推荐colorpicker

1.下载地址

 

      点击网页最下端Download,即可下载

 

2.使用方法 

    本插件是基于jQuery UI,所以应该先行下载jQuery UI,当然jQuery也必不可少

  1. 引入和初始化   
    引入js文件
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/evol.colorpicker.min.js" type="text/javascript" charset="utf-8"></script>
    

    注意:jquery ui 和 jquery 插件应该放在此调色板之前 ,被墙的用户请使用其他cdn  


    引入css文件

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-lightness/jquery-ui.css">
    <link href="css/evol.colorpicker.css" rel="stylesheet" type="text/css">
    


    初始化插件

    <script type="text/javascript">
        $(document).ready(function() {
            $("#mycolor").colorpicker();
        });
    </script>
    
    <input style="width:100px;" id="mycolor" />
    

      

  2. 主要方法  

          1.设置颜色

$("#mycolor").colorpicker({
    color: "#ffffff"
});

       2.定义调色板主题样式

$("#mycolor").colorpicker({
    defaultPalette: 'web'
});

       3.本地化调色板插件语言

 $("#mycolor").colorpicker({
    strings: "主题颜色,标准颜色,web颜色,主题颜色,返回调色板,历史记录, 没有历史记录."
});

      4.隐藏调色板

$("#mycolor").colorpicker("hidePalette");

      5.调色板选中颜色后触发的事件

$("#mycolor").on("change.color", function(event, color){
    $('#title').css('background-color', color);
});

      6.鼠标移动到颜色后触发的事件

$("#mycolor").on("mouseover.color", function(event, color){
    $('#title').css('background-color', color);
});

       7.获取选中颜色和改变选中颜色

var colorValue = $("#mycolor").colorpicker("val");

$("#mycolor").colorpicker("val", "#d0d0d0");

  

 

 

更多源代码和方法参考

 

 

 

 

     

你可能感兴趣的:(基于jQuery UI的调色板插件推荐colorpicker)