漂亮的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 + "", "返回值"); }

本地下载 

上一个：一个跟随鼠标的图片放大效果，与FF兼容
下一个：javascript实现的又一个不错的滑动导航效果