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

Learn More

How to add ColorPicker jQuery UI Widget

4220 Runs 10942 Views 4620 Copies
Saved

Saved

dipesh.parmar 55

dipesh.parmar
published 4 years ago

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head>
  <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>
</head>
<body>   

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

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

<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>
</div>


<!--Other Demo-->

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

<script type="text/javascript">
/*
	jQuery Document ready
*/
$(document).ready(function()
{
	/*
		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
	*/
    $('.css').click(function()
	{
		/*
			we have given jquiCSS id to link tag inside head section
			below code replace old css with selected css.
		*/
        $('#jquiCSS').attr('href','http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/'+this.innerHTML+'/jquery-ui.css');
    });
	
	// Events demo
	
	// Instanciate colorpickers
	$('#cpBoth').colorpicker();
	
    $('#cpFocus').colorpicker(
	{
		/*
			showOn (String) default : both
			Have the colorpicker appear automatically
			when the field receives focus ("focus"),
		*/
		showOn:'focus'
	});
	
    $('#cpButton').colorpicker(
	{
		/*
			showOn (String) default : both
			appear only when a button is clicked ("button"),
		*/
		showOn:'button'
	});
	
	$('#cpDiv').colorpicker(
	{
		/*
			Used to set the default color value.
		*/
		color:'#31859b'
	});
	
	$('#getVal').click(function()
	{
		/*
			.colorpicker("val");
			User to get or set the currently selected color value
			(as a string, ie. "#d0d0d0").
		*/
		alert($('#cpDiv').colorpicker("val"));
	});
});
</script>
</body>
</html>
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).