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

作者：ucren
演示效果：http://ucren.com/ucren-examples/widgets.html

已知缺陷：
1、换肤功能由于图片变动量比较大，所以加载有些慢。
2、widgets 不支持多态。

未来考虑解决的问题：
1、对图片进行预载处理
2、与框架 vjbox 整合到一起

未来考虑开发的新控件：
1、滑块调节器（类似windows音量调节器）
2、进度条
3、outlook 菜单
4、树
widgets.js

/* 
 * 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 + "", "返回值"); }

本地下载