漂亮的widgets,支持換膚和后期開發(fā)新皮膚
作者:ucren
演示效果:http://ucren.com/ucren-examples/widgets.html
已知缺陷:
1、換膚功能由于圖片變動量比較大,所以加載有些慢。
2、widgets 不支持多態(tài)。
未來考慮解決的問題:
1、對圖片進(jìn)行預(yù)載處理
2、與框架 vjbox 整合到一起
未來考慮開發(fā)的新控件:
1、滑塊調(diào)節(jié)器(類似windows音量調(diào)節(jié)器)
2、進(jìn)度條
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: "經(jīng)典樣式", 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("你真的要這樣操作嗎?", "請確認(rèn):", 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 + "", "返回值"); }
本地下載
- jQuery之網(wǎng)頁換膚實(shí)現(xiàn)代碼
- JQuery 網(wǎng)站換膚功能實(shí)現(xiàn)代碼
- Javascript結(jié)合css實(shí)現(xiàn)網(wǎng)頁換膚功能
- js動態(tài)修改整個頁面樣式達(dá)到換膚效果
- javascript實(shí)現(xiàn)動態(tài)CSS換膚技術(shù)的腳本
- 使用jQuery實(shí)現(xiàn)的網(wǎng)頁版的個人簡歷(可換膚)
- js+css簡單實(shí)現(xiàn)網(wǎng)頁換膚效果
- 采用XHTML和CSS設(shè)計可重用可換膚的WEB站點(diǎn)的方法
- 使用jQuery實(shí)現(xiàn)Web頁面換膚功能的要點(diǎn)解析
- AngularJS實(shí)現(xiàn)網(wǎng)站換膚實(shí)例
相關(guān)文章
2020淘寶618理想生活列車自動領(lǐng)喵幣js腳本的代碼
這篇文章主要介紹了2020淘寶618理想生活列車自動領(lǐng)喵幣腳本,需要先安裝 auto.js腳本,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06javascript實(shí)現(xiàn)英文首字母大寫
本文給大家總結(jié)了幾種可以實(shí)現(xiàn)英文首字母大寫的javascript腳本,另附上一個CSS的實(shí)現(xiàn)方法,非常的簡單實(shí)用,這里推薦給大家,有需要的小伙伴可以參考下。2015-04-04如何通過JavaScript來實(shí)現(xiàn)頁面間數(shù)據(jù)傳遞
這篇文章主要給大家介紹了關(guān)于如何通過JavaScript來實(shí)現(xiàn)頁面間數(shù)據(jù)傳遞的相關(guān)資料,在前端開發(fā)中我們常常需要從一個跳到另一個頁面,并且將當(dāng)前頁面的數(shù)據(jù)傳遞過去,需要的朋友可以參考下2023-11-11JavaScript實(shí)現(xiàn)帶緩沖效果的隨屏滾動漂浮廣告代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)帶緩沖效果的隨屏滾動漂浮廣告代碼,通過JavaScript結(jié)合時間函數(shù)動態(tài)響應(yīng)頁面元素滾動事件實(shí)現(xiàn)懸浮廣告的緩沖漂浮效果,非常簡單實(shí)用,需要的朋友可以參考下2015-11-11淺談js中StringBuffer類的實(shí)現(xiàn)方法及使用
下面小編就為大家?guī)硪黄獪\談js中StringBuffer類的實(shí)現(xiàn)方法及使用。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-09-09