jQuery asGradient !bowerbower-image !NPM versionnpm-imagenpm-url !Dependency Statusdaviddm-imagedaviddm-url !prs-welcome
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.
Table of contents
- Main files
- Quick start
- Requirements
- Usage
- Examples
- Options
- Methods
- No conflict
- Browser support
- Contributing
- Development
- Changelog
- Copyright and license
Main files
dist/
├── jquery-asGradient.js
├── jquery-asGradient.es.js
└── jquery-asGradient.min.js
Quick start
Several quick start options are available:Download the latest build
Development - unminified Production - minifiedInstall From Bower
bower install jquery-asGradient --save
Install From Npm
npm install jquery-asGradient --save
Install From Yarn
yarn add jquery-asGradient
Build From Source
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!
Requirements
jquery-asGradient
requires the latest version of jQuery
and jQuery-asColor
.Usage
Including files:
<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery-asColor.js"></script>
<script src="/path/to/jquery-asGradient.js"></script>
Initialization
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'
}
});
Examples
There are some example usages that you can look at to get started. They can be found in the examples folder.Options
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
}
}
}
Methods
var gradient = new AsGradient('linear-gradient(to bottom, yellow, blue)');
gradient.toString();
toString()
Get gradient string.// Get standard string.
gradient.toString();
// Get string by prefix.
gradient.toString('-moz-');
fromString()
Set values from gradient string.gradient.fromString('linear-gradient(to bottom, yellow 0%, blue 100%)');
getPrefixedStrings()
Get prefixed strings array.gradient.getPrefixedStrings();
val()
Get or set gradient string.// get gradient string
gradient.val();
// set gradient string
gradient.val('linear-gradient(to bottom, yellow 0%, blue 100%)');
angle()
Get or set angle.// get gradient angle
gradient.angle();
// set gradient angle
gradient.angle(60);
append(color, position)
Append a new color stop.gradient.append('#fff', '50%');
insert(color, position, index)
Insert a color stop to indexgradient.append('#fff', '50%', 1);
getCurrent()
Get current color stop.var stop = gradient.getCurrent();
setCurrentById(id)
Set current color stop by id.gradient.setCurrentById(2);
getById(id)
Get color stop by index.var stop = gradient.get(2);
removeById(id)
Remove color stop by id.gradient.removeById(2);
get(index)
Get color stop by index.var stop = gradient.get(2);
remove(index)
Remove color stop by index.gradient.remove(2);
empty()
Empty color stops.gradient.empty();
reset()
Reset gradient.gradient.reset();
No conflict
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>
Browser support
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.
Contributing
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 ofjquery-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
Development
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.
Changelog
To see the list of recent changes, see Releases section.Copyright and license
Copyright (C) 2016 amazingSurge.Licensed under the LGPL license.
⬆ back to top