Skip to content
Browse files

add ability to show custom text on the input field

  • Loading branch information...
1 parent 8ddbaee commit 0e07ee5fcb6643b17dfee395385888ed238ee398 @ghiculescu ghiculescu committed Apr 7, 2013
Showing with 25 additions and 2 deletions.
  1. +13 −0 README.md
  2. +3 −0 colorPicker.css
  3. +3 −0 demo.html
  4. +6 −2 jquery.colorPicker.js
View
13 README.md
@@ -75,6 +75,19 @@ If you want to set an option gloablly (to apply for all color pickers), use:
```javascript
$.fn.colorPicker.defaults.colors = ['151337', '111111']
```
+
+**Default text on picker field**
+
+You can set some text to show on the picker field. For example, you could show a user's initials.
+
+ ```html
+ <input id="color4" type="text" name="color4" value="#FF0000" data-text="AG" />
+ ```
+
+ ```javascript
+ $('#color4').colorPicker();
+ ```
+
### Demo
Demo can be found at http://laktek.github.com/really-simple-color-picker/demo.html
View
3 colorPicker.css
@@ -6,6 +6,9 @@ div.colorPicker-picker {
background: url(arrow.gif) no-repeat top right;
cursor: pointer;
line-height: 16px;
+ font-size:0.75em;
+ font-weight:bold;
+ text-align: center;
}
div.colorPicker-palette {
View
3 demo.html
@@ -20,6 +20,8 @@
$('#color2').colorPicker();
$('#color3').colorPicker({pickerDefault: "ffffff", colors: ["ffffff", "000000", "111FFF", "C0C0C0", "FFF000"], transparency: true});
+
+ $('#color4').colorPicker();
//fires an event when the color is changed
//$('#color1').change(function(){
@@ -76,6 +78,7 @@
<div class="controlset"><label for="color1">Color 1</label> <input id="color1" type="text" name="color1" value="#333399" /></div>
<div class="controlset"><label for="color2">Color 2</label> <input id="color2" type="text" name="color2" value="#FF0000" /></div>
<div class="controlset"><label for="color3">Color 3 (customized with options)</label> <input id="color3" type="text" name="color3" value="#99cc00" /></div>
+ <div class="controlset"><label for="color4">Color 4 (with text in box)</label> <input id="color4" type="text" name="color4" value="#FF0000" data-text="AG" /></div>
</fieldset>
View
8 jquery.colorPicker.js
@@ -59,7 +59,7 @@
newHexLabel = templates.hexLabel.clone(),
newHexField = templates.hexField.clone(),
paletteId = newPalette[0].id,
- swatch;
+ swatch, controlText;
/**
@@ -116,7 +116,7 @@
newControl.bind("click", function () {
if( element.is( ':not(:disabled)' ) ) {
- $.fn.colorPicker.togglePalette($('#' + paletteId), $(this));
+ $.fn.colorPicker.togglePalette($('#' + paletteId), $(this));
}
});
@@ -125,6 +125,10 @@
} else {
newControl.data('onColorChange', function() {} );
}
+
+ if (controlText = element.data('text'))
+ newControl.html(controlText)
+
element.after(newControl);
element.bind("change", function () {

0 comments on commit 0e07ee5

Please sign in to comment.
Something went wrong with that request. Please try again.