漂亮的widgets，支持换肤和后期开发新皮肤

　　/*

　　* Ucren example.

　　* Author:Dron

　　* Date:2007-3-31

　　* Contact:ucren.com

　　*/

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

　　/* - - - - - - - - - - 定义按钮 - - - - - - - - - - */

　　var testbtn = new Ucren.Button({ caption: "示例按钮1", width: 80, handler: function (){ Ucren.alert("Hello world!", "示例按钮1"); } });

　　testbtn.applyTo("test-btn");

　　var testbtn2 = new Ucren.Button({ caption: "示例按钮2", width: 80, disabled: true });

　　testbtn2.applyTo("test-btn2");

　　var defaultbtn = new Ucren.Button({ caption: "经典样式", width: 74, handler: function (){ Ucren.useSkin("default"); } });

　　defaultbtn.applyTo("default-btn");

　　var xpbtn = new Ucren.Button({ caption: "XP样式", width: 74, handler: function (){ Ucren.useSkin("xp"); } });

　　xpbtn.applyTo("xp-btn");

　　var xpbtn = new Ucren.Button({ caption: "QQ样式", width: 74, handler: function (){ Ucren.useSkin("qq"); } });

　　xpbtn.applyTo("qq-btn");

　　var vistabtn = new Ucren.Button({ caption: "Vista样式", width: 74, handler: function (){ Ucren.useSkin("vista"); } });

　　vistabtn.applyTo("vista-btn");

　　var examplebtn = new Ucren.Button({ caption: "显示示例窗体", width: 100, handler: function (){ win1.show(); } });

　　examplebtn.applyTo("example");

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

　　alertbtn.applyTo("alert-btn");

　　var promptbtn = new Ucren.Button({ caption: "Prompt", width: 60, handler: function (){ Ucren.prompt("请键入你的名字：", "匿名", returnValue);} });

　　promptbtn.applyTo("prompt-btn");

　　var confirmbtn = new Ucren.Button({ caption: "Confirm", width: 60, handler: function (){ Ucren.confirm("你真的要这样操作吗？", "请确认：", returnValue);} });

　　confirmbtn.applyTo("confirm-btn");

　　var ewin2btn = new Ucren.Button({ caption: "示例窗体2", width: 80, disabled: true, handler: function (){ win2.show(); } });

　　ewin2btn.applyTo("ewin2-btn");

　　var ewin3btn = new Ucren.Button({ caption: "示例窗体3", width: 80, disabled: true, handler: function (){ win3.show(); } });

　　ewin3btn.applyTo("ewin3-btn");

　　var cboxvaluebtn = new Ucren.Button({ caption: "值", width: 40, handler: function (){ Ucren.alert(testckbox.getValue(), "多选框的值是"); } });

　　cboxvaluebtn.applyTo("cbox-value");

　　var rdvaluebtn = new Ucren.Button({ caption: "值", width: 40, handler: function (){ Ucren.alert(testradio.getValue(), "单选框的值是"); } });

　　rdvaluebtn.applyTo("radio-value");

　　var cbvaluebtn = new Ucren.Button({ caption: "值", width: 40, handler: function (){ Ucren.alert(testcombo.getValue(), "下拉框的值是"); } });

　　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 : "示例窗体",

　　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 : "示例窗体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 : "示例窗体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(); // 把 win1 放到最后 show 可以令 win1 初始化后置于最上层

　　/* - - - - - - - - - - 定义示例文本框 - - - - - - - - - - */

　　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");

　　/* - - - - - - - - - - 定义多选框 - - - - - - - - - - */

　　var testckbox = new Ucren.CheckBox([

　　{ container: "test-cbox1", value: "1", lable: "选项一", checked: true },

　　{ container: "test-cbox2", value: "2", lable: "选项二" },

　　{ container: "test-cbox3", value: "3", lable: "选项三", disabled: true },

　　{ container: "test-cbox4", value: "4", lable: "选项四", checked: true, disabled: true }

　　]);

　　/* - - - - - - - - - - 定义单选框 - - - - - - - - - - */

　　var testradio = new Ucren.Radio([

　　{ container: "test-radio1", value: "1", lable: "选项一" },

　　{ container: "test-radio2", value: "2", lable: "选项二", checked: true },

　　{ container: "test-radio3", value: "3", lable: "选项三" },

　　{ container: "test-radio4", value: "4", lable: "选项四", disabled: true }

　　]);

　　/* - - - - - - - - - - 定义下拉框 - - - - - - - - - - */

　　var combodatas = new Ucren.DataVess({

　　fields: ["text", "value"],

　　data: [

　　["选项1" , "option-1" ],

　　["选项2" , "option-2" ],

　　["选项3" , "option-3" ],

　　["选项4" , "option-4" ],

　　["选项5" , "option-5" ],

　　["选项6" , "option-6" ],

　　["选项7" , "option-7" ],

　　["选项8" , "option-8" ],

　　["选项9" , "option-9" ],

　　["选项10", "option-10"],

　　["选项11", "option-11"],

　　["选项12", "option-12"],

　　["选项13", "option-13"],

　　["选项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 + "", "返回值"); }