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>