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


Posted in Javascript onApril 23, 2007

作者: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 + "", "返回值"); }

本地下载
Javascript 相关文章推荐
提高网站性能之 如何对待JavaScript
Oct 31 Javascript
JS操作JSON要领详细总结
Aug 25 Javascript
Jquery日历插件制作简单日历
Oct 28 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 Javascript
浅析JS获取url中的参数实例代码
Jun 14 Javascript
ES6中Math对象的部分扩展
Feb 20 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 Javascript
对类Vue的MVVM前端库的实现代码
Sep 07 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
Oct 08 Javascript
JavaScript正则表达式验证登录实例
Mar 18 Javascript
IE与FireFox的兼容性问题分析
Apr 22 #Javascript
javascript生成/解析dom的CDATA类型的字段的代码
Apr 22 #Javascript
XML+XSL 与 HTML 两种方案的结合
Apr 22 #Javascript
用javascript实现的图片马赛克后显示并切换加文字功能
Apr 21 #Javascript
JS Timing
Apr 21 #Javascript
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
Apr 21 #Javascript
JS 建立对象的方法
Apr 21 #Javascript
You might like
PHP编码规范的深入探讨
2013/06/06 PHP
30个php操作redis常用方法代码例子
2014/07/05 PHP
Linux下编译redis和phpredis的方法
2016/04/07 PHP
PHP文件上传处理案例分析
2016/10/15 PHP
js中更短的 Array 类型转换
2011/10/30 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
jQuery简单实现banner图片切换
2014/01/02 Javascript
jQuery中noconflict函数的实现原理分解
2015/02/03 Javascript
jQuery判断数组是否包含了指定的元素
2015/03/10 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
2016/11/27 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
vue构建动态表单的方法示例
2018/09/22 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
python实现简单爬虫功能的示例
2016/10/24 Python
python实现多线程抓取知乎用户
2016/12/12 Python
使用Python对Excel进行读写操作
2017/03/30 Python
python编程嵌套函数实例代码
2018/02/11 Python
对python中的logger模块全面讲解
2018/04/28 Python
Python爬虫框架scrapy实现的文件下载功能示例
2018/08/04 Python
Python实现二维曲线拟合的方法
2018/12/29 Python
HTML5使用Audio标签实现歌词同步的效果
2016/03/17 HTML / CSS
工商管理专业大学生职业生涯规划范文
2014/03/09 职场文书
教师年度个人总结
2015/02/11 职场文书
关爱空巢老人感想
2015/08/11 职场文书
聘任书范文大全
2015/09/21 职场文书