JavaScript DHTML/Rico/Color Picker

Материал из Web эксперт
Перейти к: навигация, поиск

Color picker

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Rico-Popup Controls</title> <script src="rico21/src/prototype.js" type="text/javascript"></script> <script src="rico21/src/rico.js" type="text/javascript"></script> <script type="text/javascript"> Rico.loadModule("Calendar","ColorPicker"); Rico.loadModule("Color"); // only required for ProcessColorSelection() var cal1,cal2,cal3,cal1Box,cal2Box,cal3Box; var colorpicker,colorBox Rico.onLoad( function() {

 // initialize calendar  (addHoliday calls are optional)
 cal1Box=$("CalendarValue1");
 cal1=new Rico.CalendarControl("cal1");
 cal1.addHoliday(25,12,0,"Christmas","#F55","white");
 cal1.addHoliday(1,1,0,"New Years","#2F2","white");
 cal1.atLoad();
 cal1.returnValue=function(newVal) { cal1Box.value=newVal; };
 SetDateFormat();
 // initialize calendar #2 (show week #)
 cal2Box=$("CalendarValue2");
 cal2=new Rico.CalendarControl("cal2", {showWeekNumber:1});
 cal2.atLoad();
 cal2.returnValue=function(newVal) { cal2Box.value=newVal; };
 // initialize calendar #3 (no "Today is")
 cal3Box=$("CalendarValue3");
 cal3=new Rico.CalendarControl("cal3", {showToday:0});
 cal3.atLoad();
 cal3.returnValue=function(newVal) { cal3Box.value=newVal; };
 // initialize color picker
 colorpicker=new Rico.ColorPicker("colorpicker1");
 colorpicker.atLoad();
 colorpicker.returnValue=ProcessColorSelection;
 colorBox=$("ColorValue");

}); function CalendarClick1(e) {

 if (Element.visible(cal1.container)) {
   cal1.close();
 } else {
   RicoUtil.positionCtlOverIcon(cal1.container,$("CalendarButton1"));
   cal1.open(cal1Box.value);
   cal2.close();
   cal3.close();
   colorpicker.close();
 }
 Event.stop(e);

} function SetDateFormat(e) {

 cal1Box.value="";
 cal1.setDateFmt($F("CalFormat"));

} function CalendarClick2(e) {

 if (Element.visible(cal2.container)) {
   cal2.close();
 } else {
   RicoUtil.positionCtlOverIcon(cal2.container,$("CalendarButton2"));
   cal1.close();
   cal3.close();
   cal2.open(cal2Box.value);
   colorpicker.close();
 }
 Event.stop(e);

} function CalendarClick3(e) {

 if (Element.visible(cal3.container)) {
   cal3.close();
 } else {
   RicoUtil.positionCtlOverIcon(cal3.container,$("CalendarButton3"));
   cal1.close();
   cal2.close();
   cal3.open(cal3Box.value);
   colorpicker.close();
 }
 Event.stop(e);

} function ProcessColorSelection(newVal) {

 colorBox.value=newVal;
 // set text box background to the selected color
 colorBox.style.backgroundColor=newVal;
 colorBox.style.color= Prototype.Browser.WebKit ? "black" : TextColor(newVal);

} // choose black or white text - whichever gives the best contrast function TextColor(hexval) {

 var objColor=Rico.Color.createFromHex(hexval);
 return (objColor.rgb.g > 160 || objColor.rgb.r+objColor.rgb.g+objColor.rgb.b > 480) ? "black" : "white";

} function ColorClick(e) {

 if (Element.visible(colorpicker.container)) {
   colorpicker.close();
 } else {
   RicoUtil.positionCtlOverIcon(colorpicker.container,$("ColorButton"));
   cal1.close();
   cal2.close();
   cal3.close();
   colorpicker.open();
 }
 Event.stop(e);

} var PopupCnt=0; function DisplayText(e,winFlag) {

 var txt=$("TextBox").value;
 if (!txt) {
   alert("Enter some text first!");
   return;
 }
 var options={
   hideOnClick: false,
   zIndex     : ++PopupCnt   // ensures shadows layer correctly
 };
 var popup=new Rico.Popup(options);
 popup.options.canDragFunc=true;
 if (winFlag) {
   popup.createWindow("Window #"+PopupCnt,txt,"10em","20em");
 } else {
   popup.createPopup(document.body,txt,"10em","20em");
 }
 var color=colorBox.value || "#FFFFFF";         // get color picker value
 popup.contentDiv.style.backgroundColor=color;
 popup.contentDiv.style.color=TextColor(color);
 // pick a random location in the upper-left quadrant of the screen
 var x=Math.floor(Math.random()*RicoUtil.windowWidth()/2);
 var y=Math.floor(Math.random()*RicoUtil.windowHeight()/2);
 popup.openPopup(x,y);
 Event.stop(e);

} </script> <style> body {font-family: Arial, Tahoma, Verdana;} div.ricoPopup {

 background-color: white;
 border: 2px solid black;
 padding: 5px;

} div.ricoWindow {

 border: 2px solid black;

} .ricoTitle {

 padding: 3px;
 color: white;
 background-color: black;

}

  1. row1 span {
 font-size: 8pt;

}

  1. CalFormat {
 font-size: 8pt;

} </style> </head> <body>

Popup Controls Example

<button id="CalendarButton1" onclick="CalendarClick1(event)">Calendar</button>


<select id="CalFormat" onchange="SetDateFormat(event)"> <option>yyyy-mm-dd</option> <option>dd-mm-yyyy</option> <option>mm/dd/yyyy</option> </select>

<button id="CalendarButton2" onclick="CalendarClick2(event)">Calendar with
Week Number</button>
<button id="CalendarButton3" onclick="CalendarClick3(event)">Calendar without
"Today is"</button>
<button id="ColorButton" onclick="ColorClick(event)">Color Picker</button>
<input type="text" id="CalendarValue1" size="10"> <input type="text" id="CalendarValue2" size="10"> <input type="text" id="CalendarValue3" size="10"> <input type="text" id="ColorValue" size="8">

Type or paste some text into the box, then click the button.
Open popups can be dragged around the page.
Color picker result will be used for the background color.
Type "Esc" to close the popups.

<textarea id="TextBox" rows="6" cols="70"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </textarea>
<button id="TextButton" onclick="DisplayText(event,false)">Display text as popup</button> <button id="TextButton" onclick="DisplayText(event,true)">Display text as window</button>

</body> </html>

</source>