forked from extern/egroupware
200 lines
9.0 KiB
HTML
200 lines
9.0 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>JavaScript Color Picker - Demo</title>
|
||
|
|
<meta name="description" content="Tigra Color Picker - Free JavaScript widget that makes it easy for your visitors to fill out color value field(s) by selecting the color from a popup palette.">
|
||
|
|
<meta name="keywords" content="free JavaScript color picker, DHTML color picker, RGB, palette, pop-up, client side, web safe, grayscale, system colors, client side, netscape, explorer, IE, opera, cross browser, download">
|
||
|
|
<meta name="robots" content="index,follow">
|
||
|
|
<style>
|
||
|
|
a, A:link, a:visited, a:active
|
||
|
|
{color: #0000aa; text-decoration: none; font-family: Tahoma, Verdana; font-size: 11px}
|
||
|
|
A:hover
|
||
|
|
{color: #ff0000; text-decoration: none; font-family: Tahoma, Verdana; font-size: 11px}
|
||
|
|
p, tr, td, ul, li
|
||
|
|
{color: #000000; font-family: Tahoma, Verdana; font-size: 11px}
|
||
|
|
.header1, h1
|
||
|
|
{color: #ffffff; background: #4682B4; font-weight: bold; font-family: Tahoma, Verdana; font-size: 13px; margin: 0px; padding: 2px;}
|
||
|
|
.header2, h2
|
||
|
|
{color: #000000; background: #DBEAF5; font-weight: bold; font-family: Tahoma, Verdana; font-size: 12px;}
|
||
|
|
.intd
|
||
|
|
{color: #000000; font-family: Tahoma, Verdana; font-size: 11px; padding-left: 15px;}
|
||
|
|
form
|
||
|
|
{margin: 5px;}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
<!-- Link script file to the HTML document in the header -->
|
||
|
|
<script language=JavaScript src="picker.js"></script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body bottommargin="15" topmargin="15" leftmargin="15" rightmargin="15" marginheight="15" marginwidth="15" bgcolor="white">
|
||
|
|
|
||
|
|
<!-- Header -->
|
||
|
|
<table cellpadding="0" cellspacing="0" width="100%" border="0">
|
||
|
|
<tr>
|
||
|
|
<td width="350" rowspan="2"><img src="img/tcolorp.gif" width="350" height="80" border="0" alt="Tigra Color Picker"></td>
|
||
|
|
<td align="right" valign="top"><img src="img/logo.gif" width="178" height="30" border="0" alt="Softcomplex logo"></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td align="right" valign="bottom" nowrap>
|
||
|
|
<b>
|
||
|
|
| <a href="http://www.softcomplex.com/index.html">About Us</a>
|
||
|
|
| <a href="http://www.softcomplex.com/services.html">Services</a>
|
||
|
|
| <a href="http://www.softcomplex.com/download.html">Download</a>
|
||
|
|
| <a href="http://www.softcomplex.com/order.html">Order</a>
|
||
|
|
| <a href="http://www.softcomplex.com/support.html">Support</a>
|
||
|
|
|
|
||
|
|
</b>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr><td><img src="img/pixel.gif" width="1" height="5" border="0"></td></tr>
|
||
|
|
</table>
|
||
|
|
<!-- /Header -->
|
||
|
|
|
||
|
|
<!-- Body -->
|
||
|
|
<table cellpadding="0" cellspacing="0" border="0" bgcolor="#4682B4" width="100%"><tr><td>
|
||
|
|
<table cellpadding="0" cellspacing="1" width="100%" border="0">
|
||
|
|
<tr>
|
||
|
|
<td class="header1" valign="top">Tigra Color Picker - Demo #1</td>
|
||
|
|
<td class="header1" valign="top" width="100%"> </td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td valign="top" bgcolor="#FFFFFF">
|
||
|
|
<table cellpadding="3" cellspacing="1" border="0" width="100%">
|
||
|
|
<tr><td class="header2">Notes</td></tr>
|
||
|
|
<tr>
|
||
|
|
<td class="intd">
|
||
|
|
On the right hand side there is a form with Tigra Color Picker attached to the fields. Note, that you can have multiple pickers on the same page independently.
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr><td><img src="img/pixel.gif" width="250" height="1" border="0"></td></tr>
|
||
|
|
<tr><td class="header2">Advantages</td></tr>
|
||
|
|
<tr>
|
||
|
|
<td class="intd">
|
||
|
|
<p><b>Easy color input</b> - With Tigra Color Picker color input is simple and intuitive. Visitors can select any color from three available palettes with few clicks.
|
||
|
|
<p><b>Cost Saving Component</b> - Don't waste your time coding color convertors and validators all over again for each new project. Get the colors on server side ready for further processing.
|
||
|
|
<p><b>Professional Look</b> - Simple great looking improvement to the user interface of your web application. </p>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr><td><img src="img/pixel.gif" width="1" height="1" border="0"></td></tr>
|
||
|
|
<tr><td class="header2">Links</td></tr>
|
||
|
|
<tr>
|
||
|
|
<td class="intd">
|
||
|
|
<b>
|
||
|
|
<ul>
|
||
|
|
<li><a href="http://www.softcomplex.com/products/tigra_color_picker/">Product Page</a>
|
||
|
|
<li><a href="http://www.softcomplex.com/products/tigra_color_picker/demo1.html">Demo Page</a>
|
||
|
|
<li><a href="http://www.softcomplex.com/forum/forumdisplay.php?fid=52">Product Forum</a>
|
||
|
|
<li><a href="http://www.softcomplex.com/download.html">More Downloads</a>
|
||
|
|
</ul>
|
||
|
|
</b>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr><td><img src="img/pixel.gif" width="1" height="1" border="0"></td></tr>
|
||
|
|
<tr><td class="header2">Getting Started</td></tr>
|
||
|
|
<tr>
|
||
|
|
<td class="intd">
|
||
|
|
<p>The script is really easy to setup. To see an example just open this document with plain text editor and find comments. Didn't it help? Ask for help in <a href="http://www.softcomplex.com/forum/forumdisplay.php?fid=52">Product Forum</a>.
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr><td><img src="pixel.gif" width="1" height="1" border="0"></td></tr>
|
||
|
|
<tr><td class="header2">Vote for the script</td></tr>
|
||
|
|
<tr>
|
||
|
|
<td class="intd">
|
||
|
|
If you like the script, please vote for it. We do appreciate this much.
|
||
|
|
<form action="http://www.scriptsearch.com/cgi-bin/rateit.cgi" method="post" target="_new">
|
||
|
|
<input type="hidden" name="ID" value="7340">
|
||
|
|
<a href="http://www.scriptsearch.com/details/7340.html"><b>ScriptSearch.com</b></a> :
|
||
|
|
<select name="rate" size="1" style="font-size:10px;">
|
||
|
|
<option value="5" selected>Excellent!</option>
|
||
|
|
<option value="4">Very Good</option>
|
||
|
|
<option value="3">Good</option>
|
||
|
|
<option value="2">Fair</option>
|
||
|
|
<option value="1">Poor</option>
|
||
|
|
</select> <input type="submit" value="Vote!" style="font-size:10px;">
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<form action="http://www.hotscripts.com/cgi-bin/rate.cgi" method="POST" target="_new">
|
||
|
|
<input type=hidden name="ID" value="19922">
|
||
|
|
<a href="http://www.hotscripts.com/Detailed/19922.html"><b>HotScripts.com</b></a> :
|
||
|
|
<select name="rate" size="1" style="font-size:10px;">
|
||
|
|
<option selected value="5">Excellent!</option>
|
||
|
|
<option value="4">Very Good</option>
|
||
|
|
<option value="3">Good</option>
|
||
|
|
<option value="2">Fair</option>
|
||
|
|
<option value="1">Poor</option>
|
||
|
|
</select> <input type="submit" value="Rate It!" style="font-size:10px;">
|
||
|
|
</form>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr><td><img src="pixel.gif" width="1" height="1" border="0"></td></tr>
|
||
|
|
</table>
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<td valign="top" bgcolor="#FFFFFF" align="center">
|
||
|
|
<img src="img/pixel.gif" width="1" height="40" border="0"><br>
|
||
|
|
<table cellpadding="0" cellspacing="0" width="450" border="0"><tr><td bgcolor="#4682B4">
|
||
|
|
<table cellpadding="5" cellspacing="1" width="100%" border="0">
|
||
|
|
<tr><th colspan="2" bgcolor="#DBEAF5"><font face="tahoma, verdana" size="2">Try out the script with this demo form</font></td></tr>
|
||
|
|
<!-- Make sure you have valid named HTML form -->
|
||
|
|
<form name="tcp_test">
|
||
|
|
<tr>
|
||
|
|
<td bgcolor="#ffffff" valign="top" nowrap><font face="tahoma, verdana" size="2">Select color from Web safe palette:</font></td>
|
||
|
|
<td bgcolor="#ffffff" valign="top">
|
||
|
|
<!-- Add input box to the form -->
|
||
|
|
<input type="Text" name="input0">
|
||
|
|
<!--
|
||
|
|
Put icon by the input control.
|
||
|
|
Make it the link calling picker popup.
|
||
|
|
Specify input object reference as first parameter to the function and palete selection as second.
|
||
|
|
-->
|
||
|
|
<a href="javascript:TCP.popup(document.forms['tcp_test'].elements['input0'])"><img width="15" height="13" border="0" alt="Click Here to Pick up the color" src="img/sel.gif"></a>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td bgcolor="#ffffff" valign="top" nowrap><font face="tahoma, verdana" size="2">Select color from Windows system palette:</font></td>
|
||
|
|
<td bgcolor="#ffffff" valign="top">
|
||
|
|
<input type="Text" name="input1">
|
||
|
|
<a href="javascript:TCP.popup(document.forms['tcp_test'].elements['input1'], 1)"><img width="15" height="13" border="0" alt="Click Here to Pick up the color" src="img/sel.gif"></a>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td bgcolor="#ffffff" valign="top" nowrap><font face="tahoma, verdana" size="2">Select color from grayscale palette:</font> </td>
|
||
|
|
<td bgcolor="#ffffff" valign="top">
|
||
|
|
<input type="Text" name="input2">
|
||
|
|
<a href="javascript:TCP.popup(document.forms['tcp_test'].elements['input2'], 2)"><img width="15" height="13" border="0" alt="Click Here to Pick up the color" src="img/sel.gif"></a>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td bgcolor="#ffffff" valign="top" nowrap><font face="tahoma, verdana" size="2">Picker reads initial value from the input:</font></td>
|
||
|
|
<td bgcolor="#ffffff" valign="top">
|
||
|
|
<input type="Text" name="input3" value="#DBEAF5">
|
||
|
|
<a href="javascript:TCP.popup(document.forms['tcp_test'].elements['input3'], 1)"><img width="15" height="13" border="0" alt="Click Here to Pick up the color" src="img/sel.gif"></a>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</form>
|
||
|
|
<tr><td colspan="2" bgcolor="#DBEAF5"> </td></tr>
|
||
|
|
</table>
|
||
|
|
</td></tr></table>
|
||
|
|
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</td></tr></table>
|
||
|
|
<!-- /Body -->
|
||
|
|
|
||
|
|
<!-- Footer -->
|
||
|
|
<table cellpadding="3" cellspacing="0" width="100%" border="0">
|
||
|
|
<tr bgcolor="#4682B4">
|
||
|
|
<td nowrap><font color="white">Copyright ©2003 SoftComplex Inc. All rights reserved.</font></td>
|
||
|
|
<td align="right">
|
||
|
|
| <a href="http://www.softcomplex.com/"><font color="white">company info</font></a>
|
||
|
|
| <a href="http://www.softcomplex.com/privacy_policy.html"><font color="white">privacy policy</font></a>
|
||
|
|
| <a href="http://www.softcomplex.com/support.html"><font color="white">contact us</font></a>
|
||
|
|
|
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
<!-- /Footer -->
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|