作者：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 + , 返回值); }
本地下载