Speed up development with full-stack environments for every branch.

Learn More

How to add ColorPicker jQuery UI Widget

4286 Runs 11091 Views 4699 Copies


dipesh.parmar 55

published 4 years ago

<html xmlns="http://www.w3.org/1999/xhtml" > 
  <title>How to add ColorPicker jQuery UI Widget.</title>
	<!--loading jQuery UI and other css-->
	<link id="jquiCSS" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/ui-lightness/jquery-ui.css" type="text/css" media="all">
	<link href="css/demo.css" rel="stylesheet" /> 
	<link href="css/evol.colorpicker.css" rel="stylesheet" />
	<!--loading jQuery and depended libs-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
	<script src="js/evol.colorpicker.js" type="text/javascript"></script>

<h1 id="title">Colorpicker Demo</h1>

	name of the jQuery UI themes
	<a href="#" class="css">le-frog</a> - 
	<a href="#" class="css">ui-darkness</a> - 
	<a href="#" class="css">ui-lightness</a>

<div class="demoPanel">
	Inline (using a DIV tag):<br/>
	<a href="Javascript:void(0)" id="getVal">Get Value</a>
	<!--Inline Colorbox container-->
	<div id="cpDiv"></div>

<!--Other Demo-->

<div class="demoPanel" style="width:130px;">
	Using "showOn" option:<br/><br/>
	<input id="cpFocus" value="#dbeef3" />
	<input id="cpButton" value="#92cddc" />
	<input id="cpBoth" value="#31859b" />
<div style="clear:both;"/>

<script type="text/javascript">
	jQuery Document ready
		adding click event hanlder for theme links.
		this handler will load the jQuery UI theme from the
		html we have write in link.
		it will load that theme to html dynamically
			we have given jquiCSS id to link tag inside head section
			below code replace old css with selected css.
	// Events demo
	// Instanciate colorpickers
			showOn (String) default : both
			Have the colorpicker appear automatically
			when the field receives focus ("focus"),
			showOn (String) default : both
			appear only when a button is clicked ("button"),
			Used to set the default color value.
			User to get or set the currently selected color value
			(as a string, ie. "#d0d0d0").
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).