fineui/demo/js/base/button/demo.button.js

Demo.Button = BI.inherit(BI.Widget, {
    props: {
        baseCls: "demo-button"
    },
    render: function () {
        var items = [{
            el: {
                type: "bi.button",
                text: "一般按钮",
                level: "common",
                height: 30
            }
        }, {
            el: {
                type: "bi.button",
                text: "表示成功状态按钮",
                level: "success",
                height: 30
            }
        }, {
            el: {
                type: "bi.button",
                text: "表示警告状态的按钮",
                level: "warning",
                height: 30
            }
        }, {
            el: {
                type: "bi.button",
                text: "表示错误状态的按钮",
                level: "error",
                height: 30
            }
        }, {
            el: {
                type: "bi.button",
                text: "表示忽略状态的按钮",
                level: "ignore",
                height: 30
            }
        }, {
            el: {
                type: "bi.button",
                text: "普通灰化按钮",
                disabled: true,
                level: "success",
                height: 30
            }
        }, {
            el: {
                type: "bi.button",
                text: "忽略状态灰化按钮",
                disabled: true,
                level: "ignore",
                height: 30
            }
        }, {
            el: {
                type: "bi.button",
                text: "带图标的按钮",
                // level: 'ignore',
                iconCls: "close-font",
                height: 30
            }
        }, {
            el: {
                type: "bi.button",
                text: "一般按钮",
                block: true,
                level: "common",
                height: 30
            }
        }, {
            el: {
                type: "bi.button",
                text: "表示成功状态按钮",
                block: true,
                level: "success",
                height: 30
            }
        }, {
            el: {
                type: "bi.button",
                text: "表示警告状态的按钮",
                block: true,
                level: "warning",
                height: 30
            }
        }, {
            el: {
                type: "bi.button",
                text: "表示忽略状态的按钮",
                block: true,
                level: "ignore",
                height: 30
            }
        }, {
            el: {
                type: "bi.button",
                text: "普通灰化按钮",
                block: true,
                disabled: true,
                level: "success",
                height: 30
            }
        }, {
            el: {
                type: "bi.button",
                text: "忽略状态灰化按钮",
                block: true,
                disabled: true,
                level: "ignore",
                height: 30
            }
        }, {
            el: {
                type: "bi.button",
                text: "带图标的按钮",
                block: true,
                // level: 'ignore',
                iconCls: "close-font",
                height: 30
            }
        }, {
            el: {
                type: "bi.button",
                text: "一般按钮",
                clear: true,
                level: "common",
                height: 30
            }
        }, {
            el: {
                type: "bi.button",
                text: "表示成功状态按钮",
                clear: true,
                level: "success",
                height: 30
            }
        }, {
            el: {
                type: "bi.button",
                text: "表示警告状态的按钮",
                clear: true,
                level: "warning",
                height: 30
            }
        }, {
            el: {
                type: "bi.button",
                text: "表示忽略状态的按钮",
                clear: true,
                level: "ignore",
                height: 30
            }
        }, {
            el: {
                type: "bi.button",
                text: "普通灰化按钮",
                clear: true,
                disabled: true,
                level: "success",
                height: 30
            }
        }, {
            el: {
                type: "bi.button",
                text: "忽略状态灰化按钮",
                clear: true,
                disabled: true,
                level: "ignore",
                height: 30
            }
        }, {
            el: {
                type: "bi.button",
                text: "带图标的按钮",
                clear: true,
                // level: 'ignore',
                iconCls: "close-font",
                height: 30
            }
        }, {
            el: {
                type: "bi.text_button",
                text: "文字按钮",
                height: 30
            }
        }, {
            el: {
                type: "bi.button",
                text: "幽灵按钮（common）",
                ghost: true,
                height: 30
            }
        }, {
            el: {
                type: "bi.button",
                iconCls: "plus-font",
                text: "幽灵按钮（common）",
                ghost: true,
                height: 30
            }
        }, {
            el: {
                type: "bi.button",
                iconCls: "plus-font",
                text: "幽灵按钮（common）",
                ghost: true,
                level: "warning",
                height: 30
            }
        }, {
            el: {
                type: "bi.button",
                iconCls: "plus-font",
                text: "幽灵按钮（common）",
                ghost: true,
                level: "error",
                height: 30
            }
        }, {
            el: {
                type: "bi.button",
                iconCls: "plus-font",
                text: "幽灵按钮（common）",
                ghost: true,
                level: "success",
                height: 30
            }
        }, {
            el: {
                type: "bi.button",
                text: "幽灵按钮（common）灰化",
                disabled: true,
                ghost: true,
                height: 30
            }
        }, {
            el: {
                type: "bi.button",
                text: "弹出bubble",
                bubble: function () {
                    return BI.parseInt(Math.random() * 100) % 10 + "提示"
                },
                handler: function () {
                    BI.Msg.toast("1111");
                },
                height: 30
            }
        }, {
            el: {
                type: "bi.button",
                text: "图标在上面的按钮，而且可以自动撑开高度",
                iconCls: "close-font",
                iconGap: 24,
                iconPosition: "top"
            }
        }, {
            el: {
                type: "bi.button",
                text: "图标在下面的按钮",
                iconCls: "close-font",
                iconPosition: "bottom"
            }
        }, {
            el: {
                type: "bi.button",
                text: "图标在左边的按钮",
                iconCls: "close-font",
                iconPosition: "left"
            }
        }, {
            el: {
                type: "bi.button",
                text: "图标在右边的按钮",
                iconCls: "close-font",
                iconPosition: "right"
            }
        }, {
            el: {
                type: "bi.button",
                text: "浅色的一般按钮",
                iconCls: "plus-font",
                light: true
            }
        }, {
            el: {
                type: "bi.button",
                text: "浅色的成功按钮",
                level: "success",
                iconCls: "plus-font",
                light: true
            }
        }, {
            el: {
                type: "bi.button",
                text: "浅色的警告按钮",
                level: "warning",
                iconCls: "plus-font",
                light: true
            }
        }, {
            el: {
                type: "bi.button",
                iconCls: "plus-font",
                text: "浅色的失败按钮",
                level: "error",
                cls: "hover-mask",
                light: true
            }
        }, {
            el: {
                type: "bi.button",
                iconCls: "plus-font",
                text: "朴素的按钮",
                level: "common",
                plain: true
            }
        }, {
            el: {
                type: "bi.button",
                iconCls: "plus-font",
                text: "朴素的按钮",
                level: "success",
                plain: true
            }
        }, {
            el: {
                type: "bi.button",
                iconCls: "plus-font",
                text: "朴素的按钮",
                level: "error",
                plain: true
            }
        }, {
            el: {
                type: "bi.button",
                iconCls: "plus-font",
                text: "朴素的按钮",
                level: "warning",
                plain: true
            }
        }, {
            el: {
                type: "bi.button",
                iconCls: "plus-font",
                text: "朴素的按钮",
                level: "ignore",
                plain: true
            }
        }, {
            el: {
                type: "bi.button",
                iconCls: "plus-font",
                text: "朴素的按钮",
                level: "ignore",
                plain: true,
                disabled: true
            }
        }, {
            el: {
                type: "bi.button",
                iconCls: "plus-font",
                text: "朴素的按钮",
                level: "error",
                plain: true,
                disabled: true
            }
        }, {
            el: {
                type: "bi.button",
                iconCls: "plus-font",
                text: "朴素的按钮",
                level: "common",
                plain: true,
                disabled: true
            }
        }, {
            el: {
                type: "bi.button",
                iconCls: "plus-font",
                text: "点我，更改图标",
                handler() {
                    this.i =  this.i === undefined ? 0 : ++this.i;
                    const arr = ["text-background-font", "check-mark-ha-font", "close-font", "search-font", "date-change-h-font"];
                    if(this.i >= arr.length) {
                        this.i = 0;
                    }
                    this.setIcon(arr[this.i]);
                },
                height: 24
            }
        }];
        // BI.each(items, function (i, item) {
        //     item.el.handler = function () {
        //         BI.Msg.alert("按钮", this.options.text);
        //     };
        // });
        return {
            type: "bi.left",
            scrolly: true,
            vgap: 100,
            hgap: 20,
            items: items
        };
    }
});
BI.shortcut("demo.button", Demo.Button);