在mouseup，keyup或完成後從wpColorPicker（Iris）獲取顏色

我想在用戶在ColorPicker（wpColorPicker或IrisColorPicker）上完成拖動後更改SVG形狀的填充顏色，因爲有十幾個SVG形狀，並且每個形狀都有很多圈子，路徑等等在mouseup，keyup或完成後從wpColorPicker（Iris）獲取顏色

於是，我就在AutomatticIris找到像活動[完成，或者類似的東西]但我失敗了只能[變化]可Iris docs而是因爲我使用AJAX讓SVG形狀從服務器在變革中做這項工作是不可能的。

來源

2016-11-19 Hady Shaltout

如果這樣的變化事件是不可用這類問題的一個常見解決方案是每次發生更改事件時清除並啓動計時器（通過setTimeout）。因此，只有當更改事件在特定時間內不會被觸發（由setTimeout設置的時間間隔），計時器纔會觸發。 – gus27

我試圖避免這種方法，所以問這裏也許有人知道一個解決方案 –

如何添加SetTimeOut改變功能 $（'.. color-picker'）。wpColorPicker（{ change：function（event，ui ）{} ）; –

這類問題的常見解決方案是每次發生更改事件時清除並啓動計時器（通過setTimeout）。因此，只有當更改事件在特定時間內不會被觸發（由setTimeout設置的時間間隔），計時器纔會觸發。

下面是在顏色選擇器的最後變化之後改變所述標題1秒（1000毫秒）的顏色的一個片段：

jQuery(document).ready(function($){ 
 
    console.log('ready'); 
 
    var color = null; 
 
    var timer = null; 
 
    var changed = function(){ 
 
     console.log("Changed"); 
 
     $("#headlinethatchanges").css('color', color); 
 
    }; 
 
    $('#color-picker').iris({ 
 
     width: 400, 
 
     hide: false, 
 
     change: function(event, ui) { 
 
      if (timer) clearTimeout(timer); 
 
      timer = setTimeout(changed, 1000); 
 
      color = ui.color.toString(); 
 
     } 
 
    }); 
 
});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> 
 
    <script src="http://automattic.github.io/Iris/javascripts/iris.min.js"></script> 
 
    <script src="http://automattic.github.io/Iris/javascripts/prism.js"></script> 
 

 
<h1 id="headlinethatchanges">Iris Test</h1> 
 
<input type="text" id="color-picker" value="#bada55" />

來源

2016-11-19 11:34:43 gus27

謝謝朋友:) –

在mouseup，keyup或完成後從wpColorPicker（Iris）獲取顏色

回答

相關問題