Easy 首个UI Button,一个简易的按钮, 不过应该已经够用了

本文详细介绍了使用EasyUI框架创建自定义按钮组件的过程。通过继承Easy.UI.Base类,定义了按钮的高度、宽度和样式,并实现了按钮的hover效果及点击事件处理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

首先贴出代码,每天分享一点点:

 Easy.Button = Easy.extend(Easy.UI.Base, {
    height: 24,
    width: 
"auto",
    baseCls: 
"e-btn",
    constructor: 
function (cfg) {
        Easy.apply(
this, cfg);
        Easy.Button.superclass.constructor.call(
this);
    },
    initComponent: 
function () {
        
var me = this;
        me.wrap 
= me.create({
            tag: 
'div',
            cls: me.baseCls,
            style: {
                width: me.width
            },
            children: {
                tag: 
'a',
                href: 
'#',
                children: {
                    tag: 
'b',
                    html: me.text
                }
            }
        }, 
this.renderTo ? Easy.DOM.get(this.renderTo) : null);
        
if (me.iconCls)
            Easy.DOM.setAttributes(me.wrap.firstChild, {
                cls:
"e-icon "+me.iconCls
            });
    },
    initEvent: 
function () {
        
var me = this;
        Easy.DOM.on(me.wrap, 
"mouseover", Easy.delegate(me.toogleClass, me.wrap, ["e-btn-over"]));
        Easy.DOM.on(me.wrap, 
"mouseout", Easy.delegate(me.toogleClass, me.wrap, ["e-btn-over"]));
        
if (me.handler)
            Easy.DOM.on(me.wrap, 
"click", me.handler, me);
    },
    render: 
function (el) {
        Easy.DOM.render(
this.wrap, Easy.DOM.get(el));
    }
});

 

下面是演示效果:

深蓝按钮:

 

转载于:https://www.cnblogs.com/Easyjs/archive/2011/04/28/Easy_UI_Button.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值