Beautiful widgets that support skin changes and later development of new skins_javascript skills

Author: ucren
Demonstration effect: http://ucren.com/ucren-examples/widgets.html

Known defects:
1. The skin-changing function is due to the comparison of image changes It's large, so loading is a bit slow.
2. Widgets do not support polymorphism.

Problems to be considered in the future:
1. Preload images
2. Integrate with the framework vjbox

New controls to be considered in the future:
1. Slider adjuster (similar to windows volume adjuster)
2. Progress bar
3. Outlook menu
4. Tree
widgets.js

Copy code The code is as follows:

/*
* Ucren example.
* Author:Dron
* Date:2007-3-31
* Contact:ucren.com
*/

var example = Ucren.getElement("example");

/* - - - - - - - - - - - Define button - - - - - - - - - - - */
var testbtn = new Ucren.Button({ caption: "Example Button 1", width: 80, handler: function (){ Ucren.alert("Hello world!", "Example Button 1"); } });
testbtn.applyTo("test-btn");

var testbtn2 = new Ucren.Button({ caption: "Example Button 2", width: 80, disabled: true });
testbtn2. applyTo("test-btn2");

var defaultbtn = new Ucren.Button({ caption: "Classic Style", width: 74, handler: function (){ Ucren.useSkin("default"); } });
defaultbtn.applyTo("default-btn");

var xpbtn = new Ucren.Button({ caption: "XP style", width: 74, handler: function (){ Ucren.useSkin("xp"); } });
xpbtn.applyTo("xp-btn");

var xpbtn = new Ucren.Button({ caption: "QQ Style", width : 74, handler: function (){ Ucren.useSkin("qq"); } });
xpbtn.applyTo("qq-btn");

var vistabtn = new Ucren.Button( { caption: "Vista style", width: 74, handler: function (){ Ucren.useSkin("vista"); } });
vistabtn.applyTo("vista-btn");

var examplebtn = new Ucren.Button({ caption: "Show example form", width: 100, handler: function (){ win1.show(); } });
examplebtn.applyTo("example") ;

var alertbtn = new Ucren.Button({ caption: "Alert", width: 60, handler: function (){ Ucren.alert("Test!", "Simulate Alert"); } }) ;
alertbtn.applyTo("alert-btn");

var promptbtn = new Ucren.Button({ caption: "Prompt", width: 60, handler: function (){ Ucren.prompt( "Please enter your name:", "Anonymous", returnValue);} });
promptbtn.applyTo("prompt-btn");

var confirmbtn = new Ucren.Button({ caption : "Confirm", width: 60, handler: function (){ Ucren.confirm("Do you really want to do this?", "Please confirm:", returnValue);} });
confirmbtn.applyTo("confirm-btn");

var ewin2btn = new Ucren.Button({ caption: "Example form 2", width: 80, disabled: true, handler: function (){ win2.show(); } });
ewin2btn.applyTo("ewin2-btn");

var ewin3btn = new Ucren.Button({ caption: "Example Form 3", width: 80, disabled: true, handler: function (){ win3.show(); } });
ewin3btn.applyTo("ewin3-btn ");

var cboxvaluebtn = new Ucren.Button({ caption: "value", width: 40, handler: function (){ Ucren.alert(testckbox.getValue(), "The value of the multi-select box is"); } });
cboxvaluebtn.applyTo("cbox-value");

var rdvaluebtn = new Ucren.Button({ caption: "value", width: 40, handler: function (){ Ucren.alert(testradio.getValue(), "The value of the radio button is"); } });
rdvaluebtn.applyTo("radio-value");

var cbvaluebtn = new Ucren.Button({ caption: "value", width: 40, handler: function (){ Ucren.alert(testcombo.getValue(), "The value of the drop-down box is"); } });
cbvaluebtn. applyTo("combobox-value");


/* - - - - - - - - - - - Define form - - - - - - - - - - - */
var win1 = new Ucren.Window({
left : 100, top : 100, width : 430, height : 350,
minWidth : 430, minHeight : 350,
panel : "example-panel",
caption : "Sample form",
icon : "images/ico.gif",
minButton : true, maxButton : true, cloButton : true, resizeAble : true,
onOpen : function (){ example.setDisplay(false); },
onClose : function (){ example.setDisplay(true); },
onResize : function (){ },
onMove : function (){ },
onFocus: function (){},
onBlur: function (){}
});

var win2 = new Ucren.Window({
left: 260, top: 30, width : 300, height : 250,
minWidth : 300, minHeight : 250,
panel : "example-panel2",
caption : "Example form 2",
icon : " images/ico.gif",
minButton : true, maxButton : true, cloButton : true, resizeAble : true,
onOpen : function (){ ewin2btn.setDisabled(true); },
onClose : function (){ ewin2btn.setDisabled(false); },
onResize : function (){ },
onMove : function (){ },
onFocus : function (){ },
onBlur : function (){ }
});

var win3 = new Ucren.Window({
left : 290, top : 210, width : 380, height : 150,
minWidth : 380, minHeight : 150,
panel : "example-panel3",
caption : "Example form 3",
icon : "images/ico.gif",
minButton : true, maxButton : false, cloButton : true, resizeAble : false,
onOpen : function (){ ewin3btn.setDisabled(true); },
onClose : function (){ ewin3btn.setDisabled(false); },
onResize : function (){ },
onMove : function (){ },
onFocus : function () { },
onBlur : function (){ }
});

win2.show();
win3.show();
win1.show(); // Putting win1 at the end of show can make win1 be placed on top after initialization

/* - - - - - - - - - - - - Define the sample text box - - - - - - - - - - - */
var testtxf1 = new Ucren.TextField({ text: "Test!", width: 120 });
testtxf1.applyTo("test-txf1");

var testtxf2 = new Ucren. TextField({ text: "Test!", width: 120, disabled: true });
testtxf2.applyTo("test-txf2");

/* - - - - - - - - - - - Define multiple checkboxes - - - - - - - - - - */
var testckbox = new Ucren.CheckBox([
{ container: "test-cbox1", value: "1", lable: "Option 1", checked: true },
{ container: "test-cbox2", value: "2", lable: "Option 2" },
{ container: "test-cbox3", value: "3", lable: "Option 3", disabled: true },
{ container: "test-cbox4", value: "4", lable: "Option 4", checked: true, disabled: true }
]);

/* - - - - - - - - - - - Define radio button - - - - - - - - - - - */
var testradio = new Ucren.Radio( [
{ container: "test-radio1", value: "1", lable: "Option 1" },
{ container: "test-radio2", value: "2", lable: "Option 2 ", checked: true },
{ container: "test-radio3", value: "3", lable: "Option 3" },
{ container: "test-radio4", value: "4" , lable: "Option 4", disabled: true }
]);

/* - - - - - - - - - - - Define drop-down box - - - - - - - - - - * /
var combodatas = new Ucren.DataVess({
fields: ["text", "value"],
data: [
["option1", "option-1"],
["option 2" , "option-2" ],
["option 3" , "option-3" ],
["option 4" , "option-4" ],
                                                                                                                                                        through "Option 8" , "option-8" ],
                                                                                                                   11", "option-11"],
["option-12", "option-12"],
["option-13", "option-13"],
["option-14" , "option-14"]
]
});
var testcombo = new Ucren.ComboBox({width: 120, value: "option-2", disabled: false, data: combodatas });
testcombo.applyTo("test-combobox");

/* - - - - - - - - - - - - functions - - - - - - - - - - - */
function returnValue(v) { Ucren.alert(v "", "return value"); }

Local download