如何讓JQuery Color Box顯示？

https://github.com/evoluteur/colorpicker

我停留在這一步：

Now, let's attach it to an existing <input> tag: 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#mycolor").colorpicker(); 
    }); 
</script> 

<input style="width:100px;" id="mycolor" />

我把腳本的頭部和明顯的輸入體內。我確保文件路徑是正確的，我沒有錯誤。當我進入mycolor字段時，顏色框不顯示。我對JS很陌生，有點困惑。不知道如何讓它工作。關於我可能做錯什麼的想法？

來源

2013-08-27 starbucks

嘗試把腳本在文檔的最後，你的''標記之前的權利，以確保您所有的DOM元素之前已經加載腳本渲染。 – kunalbhat

@kunalbhat我按照你的建議做了，但沒有奏效。謝謝。 – starbucks

你可以發佈你的HTML，或者你已經嘗試過嗎？很難說，否則。 – kunalbhat

如果你繼續閱讀該網站的指示，它說，你還必須把這樣的：

<div style="width:128px;"> 
    <input style="width:100px;" id="mycolor" class="colorPicker evo-cp0" /> 
    <div class="evo-colorind" style="background-color:#8db3e2"></div> 
</div>

的<input>後。

基本上，絕對最低的是這樣的：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/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> 
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/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> 
    <div style="width:128px;"> 
     <input style="width:100px;" id="mycolor" class="colorPicker evo-cp0" /> 
     <div class="evo-colorind" style="background-color:#8db3e2"></div> 
    </div>

來源

2013-08-27 15:32:08 DevlshOne

謝謝。我曾嘗試過，但沒有奏效。它只是給我一個輸入框和一個淡藍色的div，但小部件不顯示。 – starbucks

謝謝。如果我想把它用於多個盒子，我怎麼能做到這一點？ – starbucks

您是否已將所有必需的文件保存到本地'js'和'css'文件夾？ – DevlshOne

其實沒有，絕對最低的是這樣的：

<link id="jquiCSS" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/ui-lightness/jquery-ui.css" type="text/css" media="all"> 
<link href="css/evol.colorpicker.css" rel="stylesheet" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script> 
<script src="js/evol.colorpicker.js" type="text/javascript"></script> 

<input id="mycolor" value="#000000" /> 

<script> 
    $(document).ready(function(){ 
     $('#mycolor').colorpicker() 
    }); 
</script>

顏色選擇器把多餘的div標籤中爲您服務。 @DevlshOne指出的方向部分顯示了通過手動添加標籤來啓動顏色選擇器的另一種方式，但它們不是必需的。說明不是最清楚的。您只需確保先決條件存在：JQuery，JQuery-UI，任何JQuery-UI主題（它仍將顯示沒有一個，但將是透明的），evol.colorpicker.js（或evol.colorpicker。 min.js），evol.colorpicker.css，並在啓動顏色選擇器之前加載。

來源

2013-09-10 08:10:03 MattOG

如何讓JQuery Color Box顯示？

回答

相關問題