home *** CD-ROM | disk | FTP | other *** search
/ Chip 2002 January / 01_02.iso / software / netscape62win / browser.xpi / bin / res / samples / colorpicker.xul < prev    next >
Extensible Markup Language  |  2001-08-04  |  4KB  |  131 lines
  1. <?xml version="1.0"?> <!-- -*- Mode: HTML -*- -->
  2.  
  3. <!--
  4.  
  5.   The contents of this file are subject to the Netscape Public
  6.   License Version 1.1 (the "License"); you may not use this file
  7.   except in compliance with the License. You may obtain a copy of
  8.   the License at http://www.mozilla.org/NPL/
  9.  
  10.   Software distributed under the License is distributed on an "AS
  11.   IS" basis, WITHOUT WARRANTY OF ANY KIND, either express or
  12.   implied. See the License for the specific language governing
  13.   rights and limitations under the License.
  14.  
  15.   The Original Code is mozilla.org code.
  16.  
  17.   The Initial Developer of the Original Code is Netscape
  18.   Communications Corporation.  Portions created by Netscape are
  19.   Copyright (C) 1998 Netscape Communications Corporation. All
  20.   Rights Reserved.
  21.  
  22.   Contributor(s): 
  23.  
  24. -->
  25.  
  26. <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
  27.  
  28. <window title="Color Picker"
  29.   xmlns:html="http://www.w3.org/1999/xhtml"
  30.   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  31.   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  32.   orient="vertical"
  33.   style="width:200px"
  34.   >
  35.  
  36. <script>
  37.   function doSomethingUseful(cp)
  38.   {
  39.     var color = cp.color;
  40.     document.getElementById("input").value = color;
  41.     document.getElementById("mydiv").style.backgroundColor = color;
  42.   }
  43. </script>
  44.  
  45. <colorpicker id="cp" onclick="doSomethingUseful(this);" style="background-color: #CCCCCC;"/>
  46. <html:p/>
  47. <html:input id="input"/>
  48. <html:p/>
  49. <html:div id="mydiv" style="width:100px; height:100px; background-color:white"/>
  50.  
  51.  
  52. <html:hr/>
  53.  
  54. <script>
  55.   function setColorWell(menu)
  56.   {
  57.     // Debug tree walking.
  58.     dump("\n");
  59.     
  60.     dump("parent: ");
  61.     dump(menu.id);
  62.     dump("\n");
  63.  
  64.     dump("child 1: ");
  65.     dump(menu.firstChild.id);
  66.     dump("\n");
  67.  
  68.     dump("child 2: ");
  69.     dump(menu.firstChild.nextSibling.id);
  70.     dump("\n");
  71.  
  72.     dump("child 3: ");
  73.     dump(menu.firstChild.nextSibling.nextSibling.id);
  74.     dump("\n");
  75.  
  76.     dump("child 3's child 1: ");
  77.     dump(menu.firstChild.nextSibling.nextSibling.firstChild.id);
  78.     dump("\n");
  79.  
  80.  
  81.     dump("\n");
  82.     dump("\n");
  83.  
  84.     // Find the colorWell and colorPicker in the hierarchy.
  85.     var colorWell = menu.firstChild.nextSibling;
  86.     var colorPicker = menu.firstChild.nextSibling.nextSibling.firstChild;
  87.  
  88.     // Extract color from colorPicker and assign to colorWell.
  89.     var color = colorPicker.getAttribute('color');
  90.     colorWell.style.backgroundColor = color;
  91.   }
  92. </script>
  93.  
  94. <!-- ColorPicker #1 -->
  95. <hbox id="box1">
  96. <menu id="menu1">
  97.   <button id="button1" label="text1" class="popup"/>
  98.   <html:div id="colorWell1" style="width:30px; background-color:white"/>
  99.   <menupopup id="popup1">
  100.     <colorpicker id="cp1" palettename="standard" onclick="setColorWell(this.parentNode.parentNode);"/>
  101.   </menupopup>
  102. </menu>
  103. </hbox>
  104.  
  105. <!-- ColorPicker #2 -->
  106. <html:hr/>
  107. <hbox id="box2">
  108. <menu id="menu2">
  109.   <button id="button2" label="text2" class="popup"/>
  110.   <html:div id="colorWell2" style="width:30px; background-color:white"/>
  111.   <menupopup id="popup2">
  112.     <colorpicker id="cp2" palettename="gray" onclick="setColorWell(this.parentNode.parentNode);"/>
  113.   </menupopup>
  114. </menu>
  115. </hbox>
  116.  
  117. <!-- ColorPicker #3 -->
  118. <html:hr/>
  119. <hbox id="box3">
  120. <menu id="menu3">
  121.   <button id="button3" label="text3" class="popup"/>
  122.   <html:div id="colorWell3" style="width:30px; background-color:white"/>
  123.   <menupopup id="popup3">
  124.     <colorpicker id="cp3" palettename="web" onclick="setColorWell(this.parentNode.parentNode);"/>
  125.   </menupopup>
  126. </menu>
  127. </hbox>
  128.  
  129.  
  130. </window>
  131.