如何将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的值赋值为一个字符串

回答

相关问题