JavaScript DHTML/SmartClient/ColorPicker
Position ColorPicker
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Calendar.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.ColorPicker.getSharedColorPicker({
colorSelected: "pickerLabel.setBackgroundColor(color); pickerLabel.setOpacity(opacity);"
}); isc.Label.create({
ID: "pickerLabel", border: "1px grey solid", width: 300, height: 30
}); isc.IButton.create({
ID: "pickerButton", title: "Pick a Color", click: "isc.ColorPicker.getSharedColorPicker().show();"
});
isc.DynamicForm.create({
ID: "pickerForm",
values: {startMode: "simple", position: "auto"},
numCols: 2,
titleOrientation: "top",
width: 400,
fields: [{
name: "startMode", title: "Initially show ColorPicker as", type: "radioGroup",
width: 200, valueMap: {"simple": "Simple", "complex": "Complex"},
changed: "isc.ColorPicker.getSharedColorPicker().setProperty("defaultPickMode", this.getValue());"
}, {
name: "position", title: "Position ColorPicker", type: "radioGroup",
width: 200, valueMap: {"auto": "Near mouse", "center": "Centered"},
changed: function () {
isc.ColorPicker.getSharedColorPicker().setProperties({
autoPosition: this.getValue() == "auto" ? true : false,
autoCenterOnShow: this.getValue() == "auto" ? false : true
});
}
}
]
}); isc.VLayout.create({
width: 400,
membersMargin: 10,
members: [
isc.Label.create({contents: "Selected color:", height: 20}),
pickerLabel,
pickerForm,
pickerButton
]
}); </SCRIPT> </BODY> </HTML>
</source>
Simple or Complex ColorPicker
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Calendar.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.ColorPicker.getSharedColorPicker({
colorSelected: "pickerLabel.setBackgroundColor(color); pickerLabel.setOpacity(opacity);"
}); isc.Label.create({
ID: "pickerLabel", border: "1px grey solid", width: 300, height: 30
}); isc.IButton.create({
ID: "pickerButton", title: "Pick a Color", click: "isc.ColorPicker.getSharedColorPicker().show();"
});
isc.DynamicForm.create({
ID: "pickerForm",
values: {startMode: "simple", position: "auto"},
numCols: 2,
titleOrientation: "top",
width: 400,
fields: [{
name: "startMode", title: "Initially show ColorPicker as", type: "radioGroup",
width: 200, valueMap: {"simple": "Simple", "complex": "Complex"},
changed: "isc.ColorPicker.getSharedColorPicker().setProperty("defaultPickMode", this.getValue());"
}, {
name: "position", title: "Position ColorPicker", type: "radioGroup",
width: 200, valueMap: {"auto": "Near mouse", "center": "Centered"},
changed: function () {
isc.ColorPicker.getSharedColorPicker().setProperties({
autoPosition: this.getValue() == "auto" ? true : false,
autoCenterOnShow: this.getValue() == "auto" ? false : true
});
}
}
]
}); isc.VLayout.create({
width: 400,
membersMargin: 10,
members: [
isc.Label.create({contents: "Selected color:", height: 20}),
pickerLabel,
pickerForm,
pickerButton
]
}); </SCRIPT> </BODY> </HTML>
</source>
Use ColorPicker to change page background color
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Calendar.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver">
<SCRIPT> isc.VLayout.create({width:"100%", height:"100%", membersMargin:10, members:[
isc.FormLayout.create({
items:[
{title:"Color picker", width:85, type:"color", change:"myBox.setBackgroundColor(value)"}
]
}),
isc.Label.create({
ID:"myBox",
overflow:"hidden", showEdges:true,
align:"center", styleName:"exampleTitle",
contents:"Color box"
})
]})
</SCRIPT>
</BODY> </HTML>
</source>
