<del id="kmqwi"><b id="kmqwi"></b></del>
      <track id="kmqwi"><del id="kmqwi"></del></track>
    1. <table id="kmqwi"></table>
      <acronym id="kmqwi"><strong id="kmqwi"></strong></acronym>
    2. 
      
      <p id="kmqwi"><strong id="kmqwi"></strong></p>
    3. 顏色選擇器文檔 - layui.colorpicker

      在主題定制的應用場景中,自然離不開顏色的自定義。而你往往需要的是關于它的直觀選擇,于是 colorpicker 模塊姍姍來遲,它支持 hex、rgb、rgba 三類色彩模式,在代碼中簡單的調用后,便可在你的網頁系統中自由拖拽去選擇你中意的顏色。
      模塊加載名稱:colorpicker

      注意:colorpicker 為 layui 2.4.0 新增模塊,不支持 ie10 以下版本,其它高級瀏覽器均支持。

      使用

      colorpicker 是一款顏色選擇器,如下是一個最基本的用法:

      <!DOCTYPE html>
      <html>
      <head>
        <meta charset="utf-8">
        <title>顏色選擇器</title>
        <link rel="stylesheet" href="../src/css/layui.css">
      </head>
      <body>
      <div id="test1"></div>
      <script src="../src/layui.js"></script>
      <script>
      layui.use('colorpicker', function(){
        var colorpicker = layui.colorpicker;
        //渲染
        colorpicker.render({
          elem: '#test1'  //綁定元素
        });
      });
      </script>
      </body>
      </html>
            
      基礎參數

      colorpicker 組件目前支持以下參數

      參數選項 說明 類型 默認值
      elem 指向容器選擇器 string/object -
      color 默認顏色,不管你是使用 hex、rgb 還是 rgba 的格式輸入,最終會以指定的格式顯示。 string -
      format 顏色顯示/輸入格式,可選值: hexrgb
      若在 rgb 格式下開啟了透明度,格式會自動變成 rgba。在沒有輸入顏色的前提下,組件會默認為 #000 也就是黑色。
      string hex(即 16 進制色值)
      alpha 是否開啟透明度,若不開啟,則不會顯示透明框。開啟了透明度選項時,當你的默認顏色為 hex 或 rgb 格式,組件會默認加上值為 1 的透明度。相同的,當你沒有開啟透明度,卻以 rgba 格式設置默認顏色時,組件會默認沒有透明度。
      注意:該參數必須配合 rgba 顏色值使用
      boolean false
      predefine 預定義顏色是否開啟 boolean false
      colors 預定義顏色,此參數需配合 predefine: true 使用。 Array 此處列舉一部分:['#ff4500','#1e90ff','rgba(255, 69, 0, 0.68)','rgb(255, 120, 0)']
      size 下拉框大小,可以選擇:lg、sm、xs。 string -
      預定義顏色

      預定義顏色,可以被認為是提供的參考色,因此除了我們默認的預定義顏色之外,你還可以自己定義

      layui.use('colorpicker', function(){
        var colorpicker = layui.colorpicker;、
         
        colorpicker.render({
          elem: '#test1'
          ,predefine: true
          ,colors: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)']
        });
      });
            
      顏色被改變的回調

      回調名:change
      當顏色在選擇器中發生選擇改變時,會進入 change 回調,你可以通過它來進行所需操作,下面的例子就是實時的輸出當前選擇器的顏色

      layui.use('colorpicker', function(){
        var colorpicker = layui.colorpicker;
         
        colorpicker.render({
          elem: '#test1'
          ,change: function(color){
            console.log(color)
          }
        });
      });
            
      顏色選擇后的回調

      回調名:done
      點擊顏色選擇器的“確認”和“清除”按鈕,均會觸發 done 回調,回調返回當前選擇的色值。

      layui.use('colorpicker', function(){
        var colorpicker = layui.colorpicker;
         
        colorpicker.render({
          elem: '#test1'
          ,done: function(color){
            console.log(color)
            //譬如你可以在回調中把得到的 color 賦值給表單
          }
        });
      });
            
      結語

      顏色選擇器不僅僅是獨立使用,它更多情況可能是跟表單結合使用。

      layui - 用心與你溝通

      亚洲图色