Permalink
Browse files

Updated README.

  • Loading branch information...
1 parent 30e047a commit 60e2c6280be721a937ad4f93d331f9d9c7110d76 @recurser committed Sep 28, 2010
Showing with 40 additions and 35 deletions.
  1. +40 −35 README.textile
View
75 README.textile
@@ -9,25 +9,29 @@ _jQuery Simple Color_ is a very simple color-picker plugin that displays a squar
h2. Installation
-You'll need to download the "jQuery library":http://docs.jquery.com/Downloading_jQuery#Current_Release , and include it before jquery.simple-color.js in your HTML source. See the _examples_ folder for examples.
+You'll need to download the "jQuery library":http://docs.jquery.com/Downloading_jQuery#Current_Release , and include it before _jquery.simple-color.js_ in your HTML source. See the _examples_ folder for examples.
h2. Usage
-_Simple Color_ transparently converts regular text input fields into color pickers. Firstly, add a text element:
+_Simple Color_ transparently converts regular text input fields into color pickers.
+
+First, add a text element:
{% highlight html %}
<input class='simple_color' value='#cc3333'/>
{% endhighlight %}
_Simple Color_ will automatically pick up the _value_ attribute and display it as the default color.
-Next, use the _simpleColor()_ function on _$(document).ready_ to set up the color picker :
+Once you have one or more text elements set up, just use the _simpleColor()_ function to set up the color picker :
{% highlight javascript %}
$('.simple_color').simpleColor();
{% endhighlight %}
-You can use any valid jQuery selector instead of '.simple_color' if you wish. _Simple Color_ also supports various options to customize the color picker :
+You can use any valid jQuery selector instead of '.simple_color' if you wish.
+
+_Simple Color_ also supports various options to customize the color picker :
{% highlight javascript %}
$('.simple_color').simpleColor({
@@ -41,37 +45,38 @@ $('.simple_color').simpleColor({
h2. Options
{% highlight javascript %}
- * colors: An array of colors to include in the color picker.
- *
- * defaultColor: Default (initially selected) color
- * default value: '#FFF'
- *
- * buttonClass: CSS class to include in buttons.
- * default value: ''
- *
- * border: CSS border properties
- * default value: '1px solid #000'
- *
- * cellWidth: Width of each individual color cell
- * default value: 10
- *
- * cellHeight: Height of each individual color cell
- * default value: 10
- *
- * cellMargin: Margin of each individual color cell
- * default value: 1
- *
- * boxWidth: Width of the color display box
- * default value: 115px
- *
- * boxHeight: Height of the color display box
- * default value: 20px
- *
- * columns: Number of columns to display. Color order may look strange if this is altered
- * default value: 16
- *
- * insert: The position to insert the color picker. 'before' or 'after'
- * default value: 'after'
+colors: An array of colors to include in the color picker.
+
+defaultColor: Default (initially selected) color
+ default value: '#FFF'
+
+buttonClass: CSS class to include in buttons.
+ default value: ''
+
+border: CSS border properties
+ default value: '1px solid #000'
+
+cellWidth: Width of each individual color cell
+ default value: 10
+
+cellHeight: Height of each individual color cell
+ default value: 10
+
+cellMargin: Margin of each individual color cell
+ default value: 1
+
+boxWidth: Width of the color display box
+ default value: 115px
+
+boxHeight: Height of the color display box
+ default value: 20px
+
+columns: Number of columns to display. Color order may look strange
+ if this is altered.
+ default value: 16
+
+insert: The position to insert the color picker. 'before' or 'after'
+ default value: 'after'
{% endhighlight %}
h2. Building From Scratch

0 comments on commit 60e2c62

Please sign in to comment.