當您點擊離開時，您如何關閉虹膜拾色器？

我在Wordpress插件中使用iris colour picker。我可以得到它顯示，然後顯示關聯的輸入點擊數值就好了，但有一個問題...當您點擊離開時，您如何關閉虹膜拾色器？

我不能然後擺脫框！有沒有辦法讓這個盒子在你點擊時消失？

我使用這個簡單的調用調用iris -

jQuery(document).ready(function($){ 
    $('.colour-picker').iris(); 
});

常識告訴我，我應該能夠通過這個作爲一個選項.iris()功能爲這一特定需求，但我無法找到任何請參考docs中的這種選項。

我發現衣櫃裏的是，你可以調用hide方法，但所有它列出爲$(element).iris('hide');，與所有的如何將其鏈接到特定的輸入沒有解釋，在第一步調用iris，或如何檢測用戶是否點擊了iris

有沒有人使用iris並知道如何實現我所要做的？謝謝。

附加 - 這是一個JS fiddle，它演示了所描述的問題。調用iris的JS可以在JS部分的底部找到。

來源

2013-10-30 David Gard

你可以創建一個jsFiddle嗎？ – Grevling

當然，我已經更新了我的問題。 –

你可以嘗試這樣的：

jQuery(document).ready(function ($) {  
    $('.colour-picker').iris();  
    $(document).click(function (e) { 
     if (!$(e.target).is(".colour-picker, .iris-picker, .iris-picker-inner")) { 
      $('.colour-picker').iris('hide'); 
      return false; 
     } 
    }); 
    $('.colour-picker').click(function (event) { 
     $('.colour-picker').iris('hide'); 
     $(this).iris('show'); 
     return false; 
    }); 
});

Updated fiddle

來源

2013-10-30 14:58:48 Grevling

謝謝，我們現在正在某個地方。這兩個問題雖然 - 1：我有多個實例，並從一個輸入調用'虹膜'到另一個仍然導致2個顏色選擇器。 2：一旦隱藏了「虹膜」，就不能再爲該實例顯示（可能是因爲它是'隱藏'方法，而不是'關閉'方法，看起來並不存在）。 –

對不起，我測試了很糟糕。我已經更新了小提琴。我認爲它現在涵蓋了一切:) – Grevling

@DavidGard：更新是否涵蓋了所有內容？:) – Grevling

-1

你可以嘗試像下面

$('input:not(.colour-picker)').iris('hide');

來源

2013-10-30 13:17:48

但是我會在什麼情況下聲明？簡單地在'ready'中聲明它會導致錯誤，因爲在'iris'被初始化之前我會試圖調用'hide'方法。 –

對於它的價值，你並不需要直接調用光圈。作爲3.5，WordPress的核心定義了一個名爲wpColorPicker（）的包裝方法，與一些額外的功能，實現光圈：

http://make.wordpress.org/core/2012/11/30/new-color-picker-in-wp-3-5/

此包裝需要照顧所有的隱藏和顯示機械手的你，和跟蹤各個實例。

如果您正在構建一個WP插件，那麼最好使用它的包裝，因爲它們將在未來添加新功能。另外，如果他們決定與虹膜以外的其他庫一起使用，您的插件代碼可能會中斷。包裝將防止發生。

來源

2014-01-10 17:33:52

這幫了我很多。非常感謝。 <3 –

當您點擊離開時，您如何關閉虹膜拾色器？

回答

相關問題