C///

\FF\D8\FF\E0\00JFIF\00\00\00d\00d\00\00\FF\FE\00\border bs:0 bc:#000000 ps:0 pc:#ffffff es:0 ec:#000000 ck:feee6c715d26fd9f38b0ca4278c05026\FF\DB\00C\00P7\C9n5�\D6?\BD�\9Ds\EBp\9F[`8m\B7)o\B5\E8\E6I\99\FE3]]A2\BA\8Cw\D6E\93\\DEv\C8\009\F2\F1NI?uc\\F5\EA\96k\xN<~buv\EA\C8\D7 \8B\84\CEcxI\BBg\AE\9E=\D6+n\EC\80\C8A\8C\AE\EB\CF\D5\DA\E9"2\A4\B9j5\EB\F3W\B63\96\B30Yu\DA\FC8\ED\DF\E7Ms\FB\F1\8E\B3\FA\EA\E8\E6(\883zs\F2_\8DFk\8Bh \00\8C\DCw\D3R\B5+6X\BA\B2\C4j\AB0\B4\FCMw\C2I\8E\9B\E3\A9~9u\FA\D3l\80\C8%p\EE\FDn2� \00$\FEj\C4e\A9\DB\~\95\A7\A5\80EK\BB\8DDsP\00@@AD'k\CF\E8\DB\D2(\80\9AK\D3\85\D6lb\F2\BA\8C*\80\00)\95 59\A3R:\F3\CE"\B6\80\88\00\00i1u4�\E9\F2�\A6\A2\FACM\93WMb*\E0*\00\00\00\00\00(\A8\80\00\00\80\00\00\00\00\00\00\00\00\00\FF\D9 C/// # [jQuery asGradient](https://github.com/amazingSurge/jquery-asGradient) ![bower][bower-image] [![NPM version][npm-image]][npm-url] [![Dependency Status][daviddm-image]][daviddm-url] [![prs-welcome]](#contributing) > 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](#main-files) - [Quick start](#quick-start) - [Requirements](#requirements) - [Usage](#usage) - [Examples](#examples) - [Options](#options) - [Methods](#methods) - [No conflict](#no-conflict) - [Browser support](#browser-support) - [Contributing](#contributing) - [Development](#development) - [Changelog](#changelog) - [Copyright and license](#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](https://raw.githubusercontent.com/amazingSurge/jquery-asGradient/master/dist/jquery-asGradient.js) - unminified * [Production](https://raw.githubusercontent.com/amazingSurge/jquery-asGradient/master/dist/jquery-asGradient.min.js) - minified #### Install From Bower ```sh bower install jquery-asGradient --save ``` #### Install From Npm ```sh npm install jquery-asGradient --save ``` #### Install From Yarn ```sh yarn add jquery-asGradient ``` #### Build From Source If you want build from source: ```sh 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`](https://jquery.com/download/) and [`jQuery-asColor`](https://github.com/amazingSurge/jquery-asColor). ## Usage #### Including files: ```html ``` #### Initialization All you need to do is call the plugin on the element: ```javascript 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](https://github.com/amazingSurge/jquery-asGradient/tree/master/examples). ## 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 ```javascript var gradient = new AsGradient('linear-gradient(to bottom, yellow, blue)'); gradient.toString(); ``` #### toString() Get gradient string. ```javascript // Get standard string. gradient.toString(); // Get string by prefix. gradient.toString('-moz-'); ``` #### fromString() Set values from gradient string. ```javascript gradient.fromString('linear-gradient(to bottom, yellow 0%, blue 100%)'); ``` #### getPrefixedStrings() Get prefixed strings array. ```javascript gradient.getPrefixedStrings(); ``` #### val() Get or set gradient string. ```javascript // get gradient string gradient.val(); // set gradient string gradient.val('linear-gradient(to bottom, yellow 0%, blue 100%)'); ``` #### angle() Get or set angle. ```javascript // get gradient angle gradient.angle(); // set gradient angle gradient.angle(60); ``` #### append(color, position) Append a new color stop. ```javascript gradient.append('#fff', '50%'); ``` #### insert(color, position, index) Insert a color stop to index ```javascript gradient.append('#fff', '50%', 1); ``` #### getCurrent() Get current color stop. ```javascript var stop = gradient.getCurrent(); ``` #### setCurrentById(id) Set current color stop by id. ```javascript gradient.setCurrentById(2); ``` #### getById(id) Get color stop by index. ```javascript var stop = gradient.get(2); ``` #### removeById(id) Remove color stop by id. ```javascript gradient.removeById(2); ``` #### get(index) Get color stop by index. ```javascript var stop = gradient.get(2); ``` #### remove(index) Remove color stop by index. ```javascript gradient.remove(2); ``` #### empty() Empty color stops. ```javascript gradient.empty(); ``` #### reset() Reset gradient. ```javascript 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. ```html ``` ## Browser support Tested on all major browsers. | Safari

| |:--:|:--:|:--:|:--:|:--:|:--:| | Latest ✓ | Latest ✓ | Latest ✓ | Latest ✓ | 9-11 ✓ | Latest ✓ | As a jQuery plugin, you also need to see the [jQuery Browser Support](http://jquery.com/browser-support/). ## Contributing Anyo