Skip to content

Commit

Permalink
Removed indentation for code samples.
Browse files Browse the repository at this point in the history
  • Loading branch information
Olivier Giulieri committed Sep 7, 2014
1 parent 1139d36 commit afe9bc9
Showing 1 changed file with 43 additions and 43 deletions.
86 changes: 43 additions & 43 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,37 +15,37 @@ Check the [demo](http://evoluteur.github.com/colorpicker/index.html) for several
First, load [jQuery](http://jquery.com/) (v1.7 or greater), [jQuery UI](http://jqueryui.com/) (v1.8 or greater), and the plugin:

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/evol.colorpicker.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/evol.colorpicker.min.js" type="text/javascript" charset="utf-8"></script>
```

The widget requires a jQuery UI theme to be present, as well as its own included base CSS file ([evol.colorpicker.css](http://github.com/evoluteur/colorpicker/raw/master/css/evol.colorpicker.css)). Here we use the "ui-lightness" theme as an example:

```html
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/ui-lightness/jquery-ui.css">
<link href="css/evol.colorpicker.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/ui-lightness/jquery-ui.css">
<link href="css/evol.colorpicker.css" rel="stylesheet" type="text/css">
```

Now, let's attach it to an existing `<input>` tag:

```html
<script type="text/javascript">
$(document).ready(function() {
$("#mycolor").colorpicker();
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#mycolor").colorpicker();
});
</script>

<input style="width:100px;" id="mycolor" />
<input style="width:100px;" id="mycolor" />
```

This will wrap it into a "holder" `<div>` and add another `<div>` beside it for the color box:

```html
<div style="width:128px;">
<input style="width:100px;" id="mycolor" class="colorPicker evo-cp0" />
<div class="evo-colorind" style="background-color:#8db3e2"></div>
</div>
<div style="width:128px;">
<input style="width:100px;" id="mycolor" class="colorPicker evo-cp0" />
<div class="evo-colorind" style="background-color:#8db3e2"></div>
</div>
```

Using the same syntax, the widget can also be instanciated on a `<div>` or a `<span>` tag to show inline. In that case the generated HTML is the full palette.
Expand All @@ -65,9 +65,9 @@ evol.colorpicker provides several options to customize its behaviour:
Used to set the default color value.

```javascript
$("#mycolor").colorpicker({
color: "#ffffff"
});
$("#mycolor").colorpicker({
color: "#ffffff"
});
```

Defaults to *null*.
Expand All @@ -77,9 +77,9 @@ Defaults to *null*.
Used to track selection history (shared among all instances of the colorpicker).

```javascript
$("#mycolor").colorpicker({
history: false
});
$("#mycolor").colorpicker({
history: false
});
```

Defaults to *true*.
Expand All @@ -89,9 +89,9 @@ Defaults to *true*.
Used to show color value on hover and click inside the palette.

```javascript
$("#mycolor").colorpicker({
displayIndicator: false
});
$("#mycolor").colorpicker({
displayIndicator: false
});
```

Defaults to *true*.
Expand All @@ -102,9 +102,9 @@ Have the colorpicker appear automatically when the field receives focus ("focus"
This option only takes effect when the color picker is instanciated on a textbox.

```javascript
$("#mycolor").colorpicker({
showOn: "button"
});
$("#mycolor").colorpicker({
showOn: "button"
});
```

Defaults to *"both"*.
Expand All @@ -114,9 +114,9 @@ Defaults to *"both"*.
Used to translate the widget. It is a coma separated list of all labels used in the UI.

```javascript
$("#mycolor").colorpicker({
strings: "Couleurs de themes,Couleurs de base,Plus de couleurs,Moins de couleurs,Palette,Historique,Pas encore d'historique."
});
$("#mycolor").colorpicker({
strings: "Couleurs de themes,Couleurs de base,Plus de couleurs,Moins de couleurs,Palette,Historique,Pas encore d'historique."
});
```

Defaults to *"Theme Colors,Standard Colors,More Colors,Less Colors,Back to Palette,History,No history yet."*.
Expand All @@ -128,19 +128,19 @@ Defaults to *"Theme Colors,Standard Colors,More Colors,Less Colors,Back to Palet
This event is triggered when a color is selected.

```javascript
$("#mycolor").on("change.color", function(event, color){
$('#title').css('background-color', color);
});
$("#mycolor").on("change.color", function(event, color){
$('#title').css('background-color', color);
});
```

### mouseover.color

This event is triggered when the mouse mouves over a color box on the palette.

```javascript
$("#mycolor").on("mouseover.color", function(event, color){
$('#title').css('background-color', color);
});
$("#mycolor").on("mouseover.color", function(event, color){
$('#title').css('background-color', color);
});
```


Expand All @@ -150,44 +150,44 @@ This event is triggered when the mouse mouves over a color box on the palette.
Get the currently selected color value (returned as a string).

```javascript
$("#mycolor").colorpicker("enable");
$("#mycolor").colorpicker("enable");
```

### disable()
Get the currently selected color value (returned as a string).

```javascript
$("#mycolor").colorpicker("disable");
$("#mycolor").colorpicker("disable");
```

### isDisabled()
Get the currently selected color value (returned as a string).

```javascript
$("#mycolor").colorpicker("isDisabled");
$("#mycolor").colorpicker("isDisabled");
```

### val([color])
Get or set the currently selected color value (as a string, ie. "#d0d0d0").

```javascript
$("#mycolor").colorpicker("val");
$("#mycolor").colorpicker("val");

$("#mycolor").colorpicker("val", "#d0d0d0");
$("#mycolor").colorpicker("val", "#d0d0d0");
```

### showPalette()
Show the palette (when using the widget as a popup).

```javascript
$("#mycolor").colorpicker("showPalette");
$("#mycolor").colorpicker("showPalette");
```

### hidePalette()
Hide the palette (when using the widget as a popup).

```javascript
$("#mycolor").colorpicker("hidePalette");
$("#mycolor").colorpicker("hidePalette");
```

## Browser Support
Expand Down

0 comments on commit afe9bc9

Please sign in to comment.