基於jQuery UI的調色盤外掛推薦colorpicker

GabrielChenCN發表於2015-12-18
jQueryUI

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");

　　

 

 

更多原始碼和方法參考

 

 

 

 

     

相關文章