Beautiful widgets, support for skin rejuvenation and late development of new skins _javascript skills

Author: Ucren
Demo Effect: http://ucren.com/ucren-examples/widgets.html

Known defects:
1, change the skin function because the picture changes the volume is bigger, therefore the loading is somewhat slow.
2, widgets does not support polymorphism.

Future issues to be addressed:
1. Pre-loading processing of pictures
2, with the framework Vjbox integrated together

New controls to consider for future development:
1, slider adjuster (similar to Windows volume regulator)
2. Progress bar
3, Outlook Menu
4, Tree
Widgets.js

Copy Code code as follows:

/*
* Ucren example.
* Author:dron
* DATE:2007-3-31
* Contact:ucren.com
*/

var example = ucren.getelement ("example");


var testbtn = new Ucren.button ({caption: "Sample button 1", Width:80, Handler:function () {Ucren.alert ("Hello world!", "Sample button 1"); } });
Testbtn.applyto ("test-btn");

var testbtn2 = new Ucren.button ({caption: "Sample 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 sample 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 type your name:", "Anonymous", Retu Rnvalue);} });
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: sample form 2, width:80, Disabled:true, Handler:function () {win2.show ();}});
Ewin2btn.applyto ("ewin2-btn");

var ewin3btn = new Ucren.button ({caption: sample 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 (), "multiple selection The value of the box is "); } });
Cboxvaluebtn.applyto ("Cbox-value");

var rdvaluebtn = new Ucren.button ({caption: value, width:40, Handler:function () {Ucren.alert (), Testradio.getvalue (), "Radio Box" Value is "); } });
Rdvaluebtn.applyto ("Radio-value");

var cbvaluebtn = new Ucren.button ({caption: value, width:40, Handler:function () {Ucren.alert (), Drop-down box Value is "); } });
Cbvaluebtn.applyto ("Combobox-value");



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: "Sample 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: "Sample 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 the win1 on the last show to make the win1 initialized and put it on top.

/*-----------Define the example 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-------------------*
var testckbox = new Ucren.checkbox ([
{container: "Test-cbox1", Value: "1", lable: "Option One", checked:true},
{container: "Test-cbox2", Value: "2", lable: "Option Two"},
{container: "Test-cbox3", Value: "3", lable: "option three", Disabled:true},
{container: "Test-cbox4", Value: "4", lable: "option Four", Checked:true, Disabled:true}
]);


var testradio = new Ucren.radio ([
{container: "Test-radio1", Value: "1", lable: "Option One"},
{container: "Test-radio2", Value: "2", lable: "Option Two", Checked:true},
{container: "Test-radio3", Value: "3", lable: "Option Three"},
{container: "Test-radio4", Value: "4", lable: "option Four", disabled:true}
]);

/*------------Define the dropdown 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 Ten, ' option-10 '],
["Option One", "option-11"],
[option], "option-12"],
[option ', ' option-13 '],
[Options], "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 Downloads