Beautiful widgets, supports skin replacement and subsequent development of new skins _ javascript skills

Beautiful widgets, supports skin replacement and later development of new skin Author: ucren
Demo: http://ucren.com/ucren-examples/widgets.html

Known defects:
1. The skin swap function is slow due to the large amount of image changes.
2. widgets does not support polymorphism.

Problems to be Solved in the future:
1. Pre-upload images
2. integrate with the framework vjbox

New controls to be developed in the future:
1. Slider regulator (similar to windows volume regulator)
2. progress bar
3. outlook menu
4. Tree
Widgets. js

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: "display 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 ("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 multiple choice box is ");}});
Cboxvaluebtn. applyTo ("cbox-value ");

Var rdvaluebtn = new Ucren. button ({caption: "value", width: 40, handler: function () {Ucren. alert (testradio. getValue (), "the value of a single sequence 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 list is ");}});
Cbvaluebtn. applyTo ("combobox-value ");


/*---Define the form ----------*/
Var win1 = new Ucren. Window ({
Left: 100, top: 100, width: 430, height: 350,
MinWidth: 430, minHeight: 350,
Panel: "example-panel ",
Caption: "example 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 (); // put win1 at the end of show, so that win1 can be initialized and placed at the top layer.

/*---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 the multiple choice box ----------*/
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 a single sequence ----------*/
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 the drop-down box ----------*/
Var combodatas = new Ucren. DataVess ({
Fields: ["text", "value"],
Data :[
["Option 1", "option-1"],
["Option 2", "option-2"],
["Option 3", "option-3"],
["Option 4", "option-4"],
["Option 5", "option-5"],
["Option 6", "option-6"],
["Option 7", "option-7"],
["Option 8", "option-8"],
["Option 9", "option-9"],
["Option 10", "option-10"],
["Option 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