A jquery plugin used to manipulate css image gradient. You can add a new color stop. Change the position of color stop. Or remove a color stop. In the end, it can output a formated standard css gradient string.
- Main files
- Quick start
- Requirements
- Usage
- Examples
- Options
- Methods
- No conflict
- Browser support
- Contributing
- Development
- Changelog
- Copyright and license
dist/
├── jquery-asGradient.js
├── jquery-asGradient.es.js
└── jquery-asGradient.min.js
Several quick start options are available:
- Development - unminified
- Production - minified
bower install jquery-asGradient --save
npm install jquery-asGradient --save
yarn add jquery-asGradient
If you want build from source:
git clone git@github.com:amazingSurge/jquery-asGradient.git
cd jquery-asGradient
npm install
npm install -g gulp-cli babel-cli
gulp build
Done!
jquery-asGradient
requires the latest version of jQuery
and jQuery-asColor
.
<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery-asColor.js"></script>
<script src="/path/to/jquery-asGradient.js"></script>
All you need to do is call the plugin on the element:
var gradient = new AsGradient('linear-gradient(to rgba(0, 0, 0, 1), rgba(255, 255, 255, 1))', {
cleanPosition: true,
color: {
format: 'rgba'
}
});
There are some example usages that you can look at to get started. They can be found in the examples folder.
jquery-asGradient
can accept an options object to alter the way it behaves. You can see the default options by call $.asGradient.setDefaults()
. The structure of an options object is as follows:
{
prefixes: ['-webkit-', '-moz-', '-ms-', '-o-'],
forceStandard: true,
angleUseKeyword: true,
emptyString: '',
degradationFormat: false,
cleanPosition: true,
color: {
format: false, // rgb, rgba, hsl, hsla, hex
hexUseName: false,
reduceAlpha: true,
shortenHex: true,
zeroAlphaAsTransparent: false,
invalidValue: {
r: 0,
g: 0,
b: 0,
a: 1
}
}
}
var gradient = new AsGradient('linear-gradient(to bottom, yellow, blue)');
gradient.toString();
Get gradient string.
// Get standard string.
gradient.toString();
// Get string by prefix.
gradient.toString('-moz-');
Set values from gradient string.
gradient.fromString('linear-gradient(to bottom, yellow 0%, blue 100%)');
Get prefixed strings array.
gradient.getPrefixedStrings();
Get or set gradient string.
// get gradient string
gradient.val();
// set gradient string
gradient.val('linear-gradient(to bottom, yellow 0%, blue 100%)');
Get or set angle.
// get gradient angle
gradient.angle();
// set gradient angle
gradient.angle(60);
Append a new color stop.
gradient.append('#fff', '50%');
Insert a color stop to index
gradient.append('#fff', '50%', 1);
Get current color stop.
var stop = gradient.getCurrent();
Set current color stop by id.
gradient.setCurrentById(2);
Get color stop by index.
var stop = gradient.get(2);
Remove color stop by id.
gradient.removeById(2);
Get color stop by index.
var stop = gradient.get(2);
Remove color stop by index.
gradient.remove(2);
Empty color stops.
gradient.empty();
Reset gradient.
gradient.reset();
If you have to use other plugin with the same namespace, just call the $.asGradient.noConflict
method to revert to it.
<script src="other-plugin.js"></script>
<script src="jquery-asGradient.js"></script>
<script>
$.asGradient.noConflict();
// Code that uses other plugin's "$().asGradient" can follow here.
</script>
Tested on all major browsers.
Latest ✓ | Latest ✓ | Latest ✓ | Latest ✓ | 9-11 ✓ | Latest ✓ |
As a jQuery plugin, you also need to see the jQuery Browser Support.
Anyone and everyone is welcome to contribute. Please take a moment to
review the guidelines for contributing. Make sure you're using the latest version of jquery-asGradient
before submitting an issue. There are several ways to help out:
- Bug reports
- Feature requests
- Pull requests
- Write test cases for open bug issues
- Contribute to the documentation
jquery-asGradient
is built modularly and uses Gulp as a build system to build its distributable files. To install the necessary dependencies for the build system, please run:
npm install -g gulp
npm install -g babel-cli
npm install
Then you can generate new distributable files from the sources, using:
gulp build
More gulp tasks can be found here.
To see the list of recent changes, see Releases section.
Copyright (C) 2016 amazingSurge.
Licensed under the LGPL license.