Как получить значение Dojo / Dijit ColorPalette в строку - PullRequest
Новая
       3

Как получить значение Dojo / Dijit ColorPalette в строку

2 голосов
/ 29 июня 2011

Я всегда получаю объект с нулевым цветом. Я не дотрагивался до Додзе около года, поэтому все очень ржаво. Отображается colorPallette, но когда я нажимаю на него, переменная objColor ниже всегда имеет значение null. 

<!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>

1 Ответ

2 голосов
/ 29 июня 2011

Во-первых, быстрый способ выполнить то, что вы хотите: измените атрибут 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.

Но почему он не работал напервый клик?Кажется, причина в том, что функция onChange выполняется до того, как ColorPalette фактически установит свое внутреннее «значение».Я предполагаю, что где-то задействован setTimeout.Таким образом, objColorPalette.value будет нулевым в этой точке (использование attr, или, вернее, get - правильный путь между прочим;)).Во второй раз, когда событие сработало, значением будет фактически выбранный ранее цвет, а не новый (но toHex, конечно, все равно не будет работать, поэтому текст в поле результатов останется прежним).

Надеюсьэто помогает.

...