Gradient Chooser Widget
This is a widget for jQuery mobile. It is an extension of a collapsible widget. The widget has only one element in the collapsible list. This element contains a from color, to color and an action button. Specify the label of the gradient chooser widget like of the collapsible widget with e.g. an H1 tag.
Preview
Preconditions
The widget is implemented in ECMAScript 2015, so your project should support at least this version. To use the widget of course you need also jQuery and jQuery Mobile.
Installation
Installation via npm:
npm install jqm-gradient-chooser
Download built files:
Integration
Link the CSS file nearby to your other CSS files in the header section of your HTML file:
Include the JS file right after jQuery JS file and jQuery mobile JS file:
Usage
Definition in your HTML file
Create the gradient chooser by adding the data-role="gradientchooser"
attribute to a div:
You can use also all the attributes of the collapsible widget.
Options
Beside the options of the collapsible widget, you have following options.
actionIcon
Type: String
Default: 'action'
You can specify a different action button icon.
// set action button icon to recycle
fromIcon
Type: String
Default: 'carat-r'
You can specify a different from color icon.
// set from color icon to arrow right
toIcon
Type: String
Default: 'carat-l'
You can specify a different to color icon.
// set to color icon to arrow left
colorFrom
Type: String
Default: '#000000'
With this option you can specify the from color of the gradient.
// set from color to violet
colorTo
Type: String
Default: '#000000'
With this option you can specify the to color of the gradient.
// set to color to green
Methods
You can use following methods.
colorFrom
You can get or set the from color.
// get from colorvar colorFrom = // set from color (to blue)
colorTo
You can get or set the to color.
// get to colorvar colorTo = // set to color (to red)
Events
You can register on following events. You will need them to supply colors and to apply the gradient for whatever you need it.
clickFrom
The widget triggers this event, if the user clicks on the from color button.
// register on the event
clickTo
The widget triggers this event, if the user clicks on the to color button.
// register on the event
apply
The widget triggers this event, if the user clicks on the action button.
// register on the event
Behavior
Everytime you change one of the colors the widget shows the corresponding gradient on the expanded area.
As color you can specify two different formats:
#rrggbb
- whereby rr is the hexadecimal value for red, gg for green, bb for bluergb(r, g, b)
- whereby r is the decimal value for red, g for green, b for blue
The widget returns the color in the same format as given.
Example
See the manual test HTML page to get an idea how it works.
License
MIT