1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<script type="text/javascript">
var model = {
renderAt: '#containerDemo',
title: 'Colorpicker Demos',
demos: [
{
title: 'Inline colorpicker',
desc: 'With few lines of code you could build a colorpicker. You can try more options on the fly!',
html: '<div id="colorpicker" />',
destroy: '$("#colorpicker").colorpicker("destroy");',
options: [
{ desc: 'Make a colorpicker', source: '$("#colorpicker").colorpicker({flat:true});' }
]
},
{
title: 'Triggered colorpicker',
desc: 'With few lines of code you could build a colorpicker. You can try more options on the fly!',
html: '<input id="colorpicker2" /><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>',
destroy: '$("#colorpicker2").colorpicker("destroy");',
options: [
{ desc: 'Make a colorpicker', source: '$("#colorpicker2").colorpicker( {submit: function(e,ui) { $("#colorpicker2").val(ui.hex);} });' },
{ desc: 'Fade in/out a colorpicker', source: '$("#colorpicker2").colorpicker( {show: function (e,ui) { $(this).data("colorpicker").picker.fadeIn(500);return false; }, hide: function (e,ui) { $(this).data("colorpicker").picker.fadeOut(500);return false; }, change: function(e,ui) { $("#colorpicker2").val(ui.hex); } });' }
]
}
]
};
$(function(){
uiRenderDemo(model);
});
</script>
|
