作者：ucren
演示效果：http://ucren.com/ucren-examples/widgets.html
已知缺陷：
1、换肤功能由于图片变动量比较大，所以加载有些慢。
2、widgets不支持多态。
未来考虑解决的问题：
1、对图片进行预载处理
2、与框架vjbox整合到一起
未来考虑开发的新控件：
1、滑块调节器（类似windows音量调节器）
2、进度条
3、outlook菜单
4、树
widgets.js
复制代码 代码如下:
/*
*Ucrenexample.
*Author:Dron
*Date:2007-3-31
*Contact:ucren.com
*/
varexample=Ucren.getElement("example");
/*----------定义按钮----------*/
vartestbtn=newUcren.Button({caption:"示例按钮1",width:80,handler:function(){Ucren.alert("Helloworld!","示例按钮1");}});
testbtn.applyTo("test-btn");
vartestbtn2=newUcren.Button({caption:"示例按钮2",width:80,disabled:true});
testbtn2.applyTo("test-btn2");
vardefaultbtn=newUcren.Button({caption:"经典样式",width:74,handler:function(){Ucren.useSkin("default");}});
defaultbtn.applyTo("default-btn");
varxpbtn=newUcren.Button({caption:"XP样式",width:74,handler:function(){Ucren.useSkin("xp");}});
xpbtn.applyTo("xp-btn");
varxpbtn=newUcren.Button({caption:"QQ样式",width:74,handler:function(){Ucren.useSkin("qq");}});
xpbtn.applyTo("qq-btn");
varvistabtn=newUcren.Button({caption:"Vista样式",width:74,handler:function(){Ucren.useSkin("vista");}});
vistabtn.applyTo("vista-btn");
varexamplebtn=newUcren.Button({caption:"显示示例窗体",width:100,handler:function(){win1.show();}});
examplebtn.applyTo("example");
varalertbtn=newUcren.Button({caption:"Alert",width:60,handler:function(){Ucren.alert("Test!","模拟Alert");}});
alertbtn.applyTo("alert-btn");
varpromptbtn=newUcren.Button({caption:"Prompt",width:60,handler:function(){Ucren.prompt("请键入你的名字：","匿名",returnValue);}});
promptbtn.applyTo("prompt-btn");
varconfirmbtn=newUcren.Button({caption:"Confirm",width:60,handler:function(){Ucren.confirm("你真的要这样操作吗？","请确认：",returnValue);}});
confirmbtn.applyTo("confirm-btn");
varewin2btn=newUcren.Button({caption:"示例窗体2",width:80,disabled:true,handler:function(){win2.show();}});
ewin2btn.applyTo("ewin2-btn");
varewin3btn=newUcren.Button({caption:"示例窗体3",width:80,disabled:true,handler:function(){win3.show();}});
ewin3btn.applyTo("ewin3-btn");
varcboxvaluebtn=newUcren.Button({caption:"值",width:40,handler:function(){Ucren.alert(testckbox.getValue(),"多选框的值是");}});
cboxvaluebtn.applyTo("cbox-value");
varrdvaluebtn=newUcren.Button({caption:"值",width:40,handler:function(){Ucren.alert(testradio.getValue(),"单选框的值是");}});
rdvaluebtn.applyTo("radio-value");
varcbvaluebtn=newUcren.Button({caption:"值",width:40,handler:function(){Ucren.alert(testcombo.getValue(),"下拉框的值是");}});
cbvaluebtn.applyTo("combobox-value");
/*----------定义窗体----------*/
varwin1=newUcren.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(){}
});
varwin2=newUcren.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(){}
});
varwin3=newUcren.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初始化后置于最上层
/*----------定义示例文本框----------*/
vartesttxf1=newUcren.TextField({text:"Test!",width:120});
testtxf1.applyTo("test-txf1");
vartesttxf2=newUcren.TextField({text:"Test!",width:120,disabled:true});
testtxf2.applyTo("test-txf2");
/*----------定义多选框----------*/
vartestckbox=newUcren.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}
]);
/*----------定义单选框----------*/
vartestradio=newUcren.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}
]);
/*----------定义下拉框----------*/
varcombodatas=newUcren.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"]
]
});
vartestcombo=newUcren.ComboBox({width:120,value:"option-2",disabled:false,data:combodatas});
testcombo.applyTo("test-combobox");
/*----------functions----------*/
functionreturnValue(v){Ucren.alert(v+"","返回值");}
本地下载
【漂亮的widgets，支持换肤和后期开发新皮肤】相关文章：
★ 漂亮的widgets，支持换肤和后期开发新皮肤（2007-4-27已更新1.7alpha）
★ 详解JavaScript中setSeconds()方法的使用