拾色器的設計和價值傳承到另一個DIV

我使用這個顏色選擇器http://acko.net/blog/farbtastic-jquery-color-picker-plug-in/ 它由史蒂芬拾色器的設計和價值傳承到另一個DIV

雖然從文檔，我使用它作爲

$(document).ready(function() { 

    $('#picker').farbtastic('#color'); 


    });

和HTML代碼是'

我必須將它創建爲兩個獨立的部門。我想要在輸入中更改顏色十六進制值，但在另一個分割背景中顯示顏色。

如果我使用它像這樣

<div id="colorpicker"></div> 
    <input type="text" id="color" name="color" value="#123456" /> 
    <div id='color' ></div>

更新將發生在一個ID所以在這唯一的輸入將顏色和它的十六進制值改變。從腳本http://acko.net/files/farbtastic/demo/farbtastic.js 它只需要一個參數的功能，所以我想這樣，當任何時候顏色的分割改變顏色十六進制值應更新輸入。

來源

2013-01-23 Abhishek

你給兩個要素相同的ID在你的榜樣 - ID應該是唯一的。 – Fenton

@SteveFenton是它的獨特之處，我仍然無法找到在javascript中的位置，我應該添加$（'＃input'）.val（color）來改變它的值，並用除法中的顏色變化。 – Abhishek

您仍然不能使用具有相同ID的兩個元素。它不這樣工作。在腳本作者網頁中，傳入目標ID會爲您提供演示的確切內容。如果向下滾動，則有可以傳遞功能的說明。這是你想要做什麼：

$('#colorpicker').farbtastic(setColors); 

var setColors = function(color){ 
    $('#colorText').val(color); 
    $('#colorBackground').css('background-color' : color); 
}

我沒有測試過這一點，但你應該明白了吧，並在正確的道路上。

[UPDATE] 我在一個小提琴中測試了這個，它不起作用，儘管每個作者的文檔都是一樣的。所以你可以做的是：

<div id="colorpicker"></div> 
<input type="text" id="colorText" value="#123456" /> 
<div id="colorDiv">div<div>

兩個單獨的ID，一個是DIV，一個文本，只是選擇他們兩個：

var domNodes = $('#colorDiv, #colorText'); 
$('#colorpicker').farbtastic(domNodes);

Here is the Fiddle

此外，如果您不希望輸入具有背景色，則可以覆蓋默認功能並執行任何操作希望喜歡：

JSFiddle

$.farbtastic(colorpicker).linkTo(callBack); 

function callBack(color) { 
    $('#colorText').val(color); 
    $('#colorDiv').css('background-color', color); 
}

來源

2013-01-23 15:42:50

它沒有工作。它只是打破了原來的js代碼。不知道是什麼，但它只是沒有奏效。 – Abhishek

它的工作，並感謝您的幫助。對此，我真的非常感激。 – Abhishek

拾色器的設計和價值傳承到另一個DIV

回答

相關問題