做一些自己的WebUI控件（一）——按钮

需求

    1、圆角按钮（可以带阴影、渐变等），可以应用在各种不同的背景上。

    2、跨浏览器支持。

    3、按钮宽度自动适应。

    4、使用简单，每次调用的时候，代码越少越好。

 

实现

    jquery的UI库里有一个是使用CSS3来实现圆角加渐变的方法，但是在IE7／8下不支持CSS3。另外有此带阴影的按钮CSS3也不能实现，所以采用背景图片来实现。

    为了让按钮的宽度自动适应，用一张很长的图片来做按钮背景（随手找了一张图，不够好看，凑合用吧）。用两个Span拼成一个按钮，一个是左边的圆角加按钮文字，一个是右边的圆角部分。

     

    html代码

    <a class="button button1" href="javascript:void(0)"><span class="left">Button</span><span class="right"></span></a> 

    CSS

.button { display:inline-block; vertical-align:middle; display:table-cell; }
.button span { display:block; float:left; vertical-align:middle; }
.button:hover { text-decoration:none; }

.button1 { height:27px; }
.button1 span { font-size:12px; height:27px; line-height:27px; color:#000; }
.button1 span.left { background:url('button_bg.gif') no-repeat; padding-left:20px; }
.button1 span.right { background:url('button_bg.gif') no-repeat right top; width:20px; height:27px;  }
.button1:hover span.left { background-position:0 -27px; color:#fff; }
.button1:hover span.right { background-position:right -27px; }

 

 

 

    效果 

 

改进

    每次写一个按钮的时候都要加上一堆的span，这样很麻烦，最好是能自动加上这些span，用javascript吧。

    mootools的实现

var CUI = {
    Button: function (se) {
        var els = $$(se);
        els.each(function(item, index) {
            var txt = item.get('html'); //获取原按钮内容，取html内容，可以包含图片
            var lspn = new Element('span', {
                'class': 'left',
                'html': txt
            });
            var rspn = new Element('span', {
                'class': 'right'
            });
            item.empty().grab(lspn).grab(rspn);
        });
    }
}

window.addEvent('domready', function(){
    CUI.Button('a.button'); //文件加载完自动调用
});

 

 

 

    jquery的实现

$.fn.toButton = function () {
    $(this).each(function () {
        var sl = $('<span>').html($(this).html()).addClass('left');
        var sr = $('<span>').addClass('right');
        $(this).empty().append(sl).append(sr);
    });
}

$(function () {
    $('a.button').toButton();
});

 

 

 

    这样，每次调用的时候只要这样写就可以了。<a class="button button1" href="javascript:void(0)">button</a>

 

代码 

    下载