JQueryGradient < System

---+ %TOPIC%
%JQPLUGINS{"gradient"
  format="
    Homepage: $homepage <br />
    Author(s): $author <br />
    Version: $version
  "
}%

%STARTSECTION{"summary"}%
Adds a gradient to the background of an element.
%ENDSECTION{"summary"}%

---++ Usage

---+++ !JavaScript API

This basically looks like this:

<verbatim class="js">$('div').gradient({ from: '000000', to: 'CCCCCC' });</verbatim>

Options:

   * *from*: The hex color code to start the gradient with. By default the value is "000000".
   * *to*: The hex color code to end the gradient with.
     By default the value is "FFFFFF".
   * *direction*: This tells the gradient to be horizontal or vertical.
     By default the value is "horizontal".
   * *length*: This is used to constrain the gradient to a
     particular width or height (depending on the direction). By default
     the length is set to null, which will use the width or height
     (depending on the direction) of the element.
   * *position*: This tells the gradient to be positioned
     at the top, bottom, left and/or right within the element. The
     value is just a string that specifices top or bottom and left or right.
     By default the value is 'top left'.

---+++ Foswiki integration

The gradient will be applied to elements with a ==jqGradient== class name. Options are specified using JQueryMetadata.

---++ Examples
%JQREQUIRE{"gradient"}%

<div class="jqGradient {from: '00088', to: '0088ff', direction: 'horizontal'}" style="width:300px;padding:10px;border:1px solid #08f;color:white;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ornare fringilla est, eget condimentum quam auctor quis. Curabitur vitae nibh eu nisl scelerisque facilisis. Vestibulum posuere pretium magna, eu pulvinar libero cursus in. Phasellus tortor dui, viverra vitae molestie a, aliquam quis risus. Mauris fringilla mattis ligula, et laoreet dui rhoncus vel. Aliquam bibendum, nisi nec pellentesque convallis, augue elit rutrum sapien, nec molestie augue mauris et tellus. 
</div>

<div class="jqGradient {from: 'ffcccc', to: 'FFFD00', direction: 'horizontal'}" style="width:300px;padding:10px;border:1px solid #ddd">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ornare fringilla est, eget condimentum quam auctor quis. Curabitur vitae nibh eu nisl scelerisque facilisis. Vestibulum posuere pretium magna, eu pulvinar libero cursus in. Phasellus tortor dui, viverra vitae molestie a, aliquam quis risus. Mauris fringilla mattis ligula, et laoreet dui rhoncus vel. Aliquam bibendum, nisi nec pellentesque convallis, augue elit rutrum sapien, nec molestie augue mauris et tellus. 
</div>

<div class="jqGradient {from: '000088', to: 'FF0000', direction: 'vertical'}" style="width:300px;padding:10px;border:1px solid #ddd;color:white">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ornare fringilla est, eget condimentum quam auctor quis. Curabitur vitae nibh eu nisl scelerisque facilisis. Vestibulum posuere pretium magna, eu pulvinar libero cursus in. Phasellus tortor dui, viverra vitae molestie a, aliquam quis risus. Mauris fringilla mattis ligula, et laoreet dui rhoncus vel. Aliquam bibendum, nisi nec pellentesque convallis, augue elit rutrum sapien, nec molestie augue mauris et tellus. 
</div>

<div class="jqGradient {from: 'f9f9f9', to: 'dddddd', length:10, position:'bottom'}" style="width:300px;padding:10px 10px 20px 10px;border:1px solid #aaa; background:f9f9f9">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ornare fringilla est, eget condimentum quam auctor quis. Curabitur vitae nibh eu nisl scelerisque facilisis. Vestibulum posuere pretium magna, eu pulvinar libero cursus in. Phasellus tortor dui, viverra vitae molestie a, aliquam quis risus. Mauris fringilla mattis ligula, et laoreet dui rhoncus vel. Aliquam bibendum, nisi nec pellentesque convallis, augue elit rutrum sapien, nec molestie augue mauris et tellus. 
</div>
This topic: System > JQueryPlugin > JQueryGradient
Topic revision: 12 Feb 2010, ProjectContributor (raw view)
Copyright © by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback