自制的类似EasyUI的JQuery Button插件

浏览数：42 / 时间：2015年06月09日

jQuery控件所需图片

btn_corner.jpg 技术分享

btn_corner_hover.jpg 技术分享

ok.png 技术分享

reload.png 技术分享

undo.png 技术分享

jQuery控件样式

.btn_container{ height:25px; font-size:12px; font-family:Arial; color:#444; text-decoration:none; display: block; float:left; margin-right:5px;}
.btn_left{ width:10px; height:25px; float:left; background:url(../images/btn_corner.jpg) left top;}
.btn_center{ height:25px; float:left; background:url(../images/btn_corner.jpg) -10px 0px; padding:0px 3px; vertical-align:middle; line-height:25px;}
.btn_right{ width:10px; height:25px; float:left;background:url(../images/btn_corner.jpg) right top;}
.btn_container:hover .btn_left{background:url(../images/btn_corner_hover.jpg) left top;}
.btn_container:hover .btn_center{background:url(../images/btn_corner_hover.jpg) -10px 0px;}
.btn_container:hover .btn_right{background:url(../images/btn_corner_hover.jpg) right top;}
.icon_reload{ width:16px; height:16px; background:url(../images/reload.png); float:left; margin:3px 2px;}
.icon_ok{width:16px; height:16px; background:url(../images/ok.png); float:left; margin:3px 2px;}
.icon_undo{width:16px; height:16px; background:url(../images/undo.png); float:left; margin:3px 2px;}

jQuery控件js源码

$(function () {
    $(‘.linkbotton‘).each(function () {
        var btnId = $(this).attr(‘id‘);
        var btnValue = $(this).attr(‘value‘);
        var iconCls = $(this).attr(‘iconCls‘);
        var strBtn = "";
        if (typeof iconCls == ‘string‘) {
            strBtn = "<a href=‘#‘ class=‘btn_container‘ id=‘" + btnId + "‘>"
                                            + "<span class=‘btn_left‘></span>"
                                            + "<span class=‘btn_center‘>"
                                            + "<span class=‘" + iconCls + "‘></span>"
                                            + btnValue
                                            + "</span>"
                                            + "<span class=‘btn_right‘></span>"
                                            + "</a>";
        } else {
            strBtn = "<a href=‘#‘ class=‘btn_container‘ id=‘" + btnId + "‘>"
                                            + "<span class=‘btn_left‘></span>"
                                            + "<span class=‘btn_center‘>" + btnValue + "</span>"
                                            + "<span class=‘btn_right‘></span>"
                                            + "</a>";
        }
        $(this).replaceWith(strBtn);
    });
});

Demo页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="css/btn.css" rel="stylesheet" type="text/css" />
    <script src="../../jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="js/btn.js" type="text/javascript"></script>
</head>
<body>
    <input id="Button3" type="button" value="Confirm" class=‘linkbotton‘ iconCls=‘icon_ok‘ />
    <input id="Button1" type="button" value="button" class=‘linkbotton‘ />
    <input id="Button2" type="button" value="Confirm" class=‘linkbotton‘ iconCls=‘icon_reload‘ />    
    <input id="Button4" type="button" value="Confirm" class=‘linkbotton‘ iconCls=‘icon_undo‘ />    
</body>
</html>