作者：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技術：漂亮的widgets，支持換膚和后期開發新皮膚，轉載需保留來源！

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。