jQuery Gradient Creator

Documentation

Initialization

In the head, import required CSS and JS files :

HTML Code :

<head>
...
<link rel="stylesheet" href="css/jquery.colorpicker.css" />       // Colorpicker styles
<link rel="stylesheet" href="css/jquery.gradientCreator.css" />   // Gradient Creator styles
<script src="js/jquery-1.7.1.min.js"></script>              // jQuery 
<script src="js/jquery-ui-1.8.18.custom.min.js"></script>   // jQuery-ui utils (UI,Widget,Mouse,Draggable,Droppable)
<script src="js/jquery.colorpicker.js"></script>            // Colorpicker
<script src="js/jquery.gradientCreator.min.js"></script>        // Gradient Creator
...
<head>

Then, to add a gradient creator, just create an empty div, and call the plugin like any jQuery plugin :

HTML Code :

<div id="demo1"></div>

JS Code :

 $(document).ready(function(){
    $('#demo1').gradientCreator(); 
});
Slide to the top Slide to the top

List of the parameters

jQuery Gradient Creator allows you to customize your generators easily. Here is the full list of the default parameters :

JS Code :

 $(document).ready(function(){
    $('#demo1').gradientCreator({
// String or Array | Default gradient points        gradient: '0% #02CDE8,100% #000000',        
// Int | Gradient preview width        width: 300,                                 
// Int | Gradient preview height        height: 18,                                 
// Int | Gradient points size        pointSize: 8,                               
// "horizontal" or "vertical" | Orientation of the generated gradient        orientation: 'vertical',                    
// jQuery selector | Define live targets. Ex: '#target1,#target2'         target: '',                                 
// String or Array | Tooltip background gradient points        tooltipGradient: '0% #feffff,100% #ededed', 
// Method | Executed on each gradient change and at start        onChange: function(){},                     
// Method | Executed on initialization only        onInit: function(){}                        
// Method | Executed if the browser doesn't support HTML5        noSupport: function(){}    
    }); 
});
Slide to the top Slide to the top

List of the methods

To call a public method, just do $('#gradientPanel').data('gradientCreator').theMethodName();

Here is the list of the plugin public methods :

JS Code :

var plugin = $("#demoID").data("gradientCreator"); 

var array = plugin.getArrayGradient();  // Return the gradient points array. Ex: [["0%","#FFFFFF"],["100%","#000000"]]
var css = plugin.getCssGradient(); // Return the full gradient generated CSS code
var string = plugin.getStringGradient(); // Return the gradient points as string. Ex: "0% #FFFFFF,100% #000000"
plugin.setOrientation('vertical'); // Change the generated gradient orientation in live. No refresh needed.

If you want to change parameters after the plugin initialization, you must refresh the plugin with the update() method, like this :

JS Code :

var plugin = $("#demoID").data("gradientCreator"); 
// Change the height of the gradient previewplugin.settings.height = 34;    
// Change the gradient points sizeplugin.settings.pointSize = 14; 
// Refresh the pluginplugin.update();

The colorpicker

This plugin use the Colorpicker plugin, created by Stefan Petre, distributed under MIT and GPL licenses. This plugin is complete, easy to use and fully customizable .

You can find documentation and examples on this page : http://www.eyecon.ro/colorpicker/

Here is an example of usage :

HTML Code :

<div id="colorpicker"></div>

JS Code :

$('#colorpicker').ColorPicker({
	color: '#0000ff',
	onChange: function (hsb, hex, rgb) {
            alert('Selected color: ' + hex);
	}
});
Slide to the top Slide to the top

Help and support

Any suggestion, bug report or a request for assistance ? Contact me via my envato profile. .

© 2012 - Loopus