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 - minified

Install 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 index

gradient.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.

get(index)

Get color stop by index.

var stop = gradient.get(2);

remove(index)

Remove color stop by index.

empty()

Empty color stops.

reset()

Reset gradient.

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

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:

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