如何將Dojo/Dijit ColorPalette的值賦值爲一個字符串

我總是收到一個空的顏色對象。大約一年我沒有碰過道場，所以一切都很生疏。 colorPallette顯示，但是當我點擊它時，下面的變量objColor始終爲空。如何將Dojo/Dijit ColorPalette的值賦值爲一個字符串

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html dir="ltr"> 

    <head> 
     <style type="text/css"> 
      body, html { font-family:helvetica,arial,sans-serif; font-size:90%; } 
     </style> 
     <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" 
     djConfig="parseOnLoad: true"> 
     </script> 
     <script type="text/javascript"> 
      dojo.require("dojox.widget.ColorPicker"); 
      dojo.require("dijit.ColorPalette"); 
      dojo.require("dijit.form.TextBox"); 
      dojo.require("dijit.form.Textarea"); 
      output = "Color=&Color,SoundFile=&SoundFile"; 
      function updateResults() 
      { 
       var objColorPalette = dijit.byId("colorPalette"); 
       var objColor = objColorPalette.value; 
       //var objColor = objColorPalette.attr("value"); 
       //alert("objColor=" + objColor); 
       if (objColor == null) 
       { 
        output = output.replace("&Color","null"); 
       } 
       else 
       { 
        output = output.replace("&Color",objColor.toHex()); 
       } 
       var objResultTextArea = dijit.byId("results"); 
       objResultTextArea.set("value", output); 
      } 
      function setColor(val) 
      { 
       output = output.replace("&Color",val.toHex()); 
       var objResultTextArea = dijit.byId("results"); 
       objResultTextArea.set("value", output); 
      } 
     </script> 
     <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" 
     /> 
     <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/widget/ColorPicker/ColorPicker.css" 
     /> 
    </head> 

    <body class=" claro "> 
     <h3>Begin Data Entry</h3> 
     <label for="mp3FileName"> 
      Auto-trimming, Proper-casing Textbox: 
     </label>   
     <input type="text" name="mp3FileName" value="/yourRelativeFileName.mp3" dojoType="dijit.form.TextBox" 
     trim="true" id="firstname" propercase="true"> 

     <h3>Color</h3> 
     <div dojoType="dijit.ColorPalette" onChange="updateResults()" palette="7x10" id="colorPalette"> 
     </div> 
     <!-- 
     <h3>Color Picker</h3> 
     <div dojoType="dojox.widget.ColorPicker" id="colorPicker"> 
     </div> 
     --> 

     <h3>Results</h3> 
     <textarea id="results" name="results" dojoType="dijit.form.Textarea" 
     style="width:900px;"> 
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
      nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
     </textarea>   
     <h3>The End</h3> 

    </body> 

</html>

來源

2011-06-29 NealWalters

首先，快速的方法來完成你想要的：改變控件的onchange屬性簡單地updateResults（沒有括號）。這意味着它被視爲一個函數指針，並且該函數將被ColorPalette決定提供的任何參數調用。

<div dojoType="dijit.ColorPalette" onChange="updateResults" 
    palette="7x10" id="colorPalette"></div>

其次，更改你的updateResults函數，以便它接受一個參數。 ColorPalette將爲onChange事件提供一個字符串參數，其中包含所選顏色的十六進制值。

function updateResults(selectedColor) 
{ 
    // Now you can remove a lot of the stuff that you had here, and simply do: 
    var objResultTextArea = dijit.byId("results"); 
    objResultTextArea.set("value", output.replace("&Color", selectedColor)); 
}

既然這樣，爲什麼您的原始方法沒有工作？其實，它有點。第二次選擇一種顏色時，它會輸入else子句，但它會在toHex上失敗，因爲objColor是一個字符串而不是Color對象。

但爲什麼它沒有在第一次點擊？原因似乎是在ColorPalette實際設置其內部「值」之前執行onChange函數。我猜測有一個setTimeout參與某處。所以objColorPalette.value將在這一點爲空（使用attr，或者更確切地說get是順便說一句;））。事件第二次觸發時，該值實際上是以前選擇的顏色，而不是新的顏色（但當然，當然，Heex仍會失敗，因此結果字段中的文本將保持與以前一樣）。

希望這會有所幫助。

來源

2011-06-29 17:58:15 Frode

我還注意到一件事：一旦你在'output'字符串中替換了「＆Color」一次，以後任何替換它的嘗試都將失敗:-) – Frode

Works！謝謝你措辭良好的答案。即使在這裏，http://dojotoolkit.org/reference-guide/dijit/ColorPalette.html它在第一次點擊時返回「null」。該頁面並沒有說它返回一個字符串，它說：「與所有的dijit小部件一樣，所選的值可以通過小部件attr（」value「）函數獲得。返回類型是dojo.Color的一個實例。「我誤解了它嗎？ – NealWalters

@NealWalters不，你完全正確 - 看起來參考指南條目已過時。第一次點擊時出現null是一個錯誤，我會仔細研究並報告給Dojo嚮導。 – Frode

如何將Dojo/Dijit ColorPalette的值賦值爲一個字符串

回答

相關問題