jquery漂亮的按扭控件（源代码共享）

发现在我的浏览器下面看，鼠标移动上去的时候，按钮的背景变小了，需要修改如下代码就可以正常显示，不知道其他人怎么说。

button.css:
.z-btn-over .z-btn-right{background:url(images/button/btnover_bg_right.gif) no-repeat -9px 0;}

把-9px改成 -7px;

发现在我的浏览器下面看，鼠标移动上去的时候，按钮的背景变小了，需要修改如下代码就可以正常显示，不知道其他人怎么说。

button.css:
.z-btn-over .z-btn-right{background:url(images/button/btnover_bg_right.gif) no-repeat -9px 0;}

把-9px改成 -7px;

不好意思，发了两条，不知道怎么删除，

/*
* Title:
* Description:
* Aucthor: 曾宪斌
* Email: zengxianbin@gmail.com
* Create Date:2009-06-18
* Copyright 2009
*/
(function($){
$.fn.btn = function(){
var btn = this.data("_self");;
if(btn){
return btn;
};
this.init = function(){
var obj = $(this);
var id=$(this).attr('id')||"gen"+Math.random();
var icon = $(this).attr('icon')||'icon-btncom';
// var width = $(this).width();
// alert(this.width()*0.8)
var bntStr=[
'<table id="',id,'" class="z-btn" cellSpacing=0 cellPadding=0 border=0><tbody><tr>',
'<TD class=z-btn-left><i>&nbsp;</i></TD>',
'<TD class=z-btn-center><EM unselectable="on">',
'<INPUT type="',$(this).attr('type'),'"  id="',$(this).attr('id'),'"  name="',$(this).attr('name'),'" class="z-button z-btn-text ',icon,'"  value="',$(this).attr('value'),'"></INPUT>',
'</EM></TD>',
'<TD class=z-btn-right><i>&nbsp;</i></TD>',
'</tr></tbody></table>'
];
var bnt = $(bntStr.join('')).btn();
bnt._click = eval(obj.attr("onclick"));
bnt.disable();
if(obj.attr("disabled"))
bnt.disable();
else bnt.enable();
$(this).replaceWith(bnt);
bnt.data("_self", bnt); 
return bnt;
};
this.enable = function(){
this.removeClass("z-btn-dsb");
this.click(this._click);
this.hover(
  function () {
    $(this).addClass("z-btn-over");
  },
  function () {
    $(this).removeClass("z-btn-over");
  }
)
};
this.disable = function(){
this.addClass("z-btn-dsb");
this.unbind("hover");
this.unbind("click");
}; 
return this;
};

$(function(){
$("input[type='button']").each(function(){
$(this).btn().init();

});
$("input[type='reset']").each(function(){
$(this).btn().init();
});
$("input[type='submit']").each(function(){
$(this).btn().init();
});
})
})(jQuery);

原先的submit都点击后，无视其他规则提交，我该了一下代码，大家看看是不是合适。

/*
* Title:
* Description:
* Aucthor: 曾宪斌
* Aucthor:wangwch
* Email: zengxianbin@gmail.com
* Create Date:2009-06-18
* Copyright 2009
*/
(function($){
$.fn.btn = function(){
var btn = this.data("_self");;
if(btn){
return btn;
};
this.init = function(){
var obj = $(this);
var id=$(this).attr('id')||"gen"+Math.random();
var icon = $(this).attr('icon')||'icon-btncom';
// var width = $(this).width();
// alert(this.width()*0.8)
var bntStr=[
'<table id="',id,'" class="z-btn" cellSpacing=0 cellPadding=0 border=0><tbody><tr>',
'<TD class=z-btn-left><i>&nbsp;</i></TD>',
'<TD class=z-btn-center><EM unselectable="on">',
'<INPUT type="',$(this).attr('type'),'"  id="',$(this).attr('id'),'"  name="',$(this).attr('name'),'" class="z-button z-btn-text ',icon,'"  value="',$(this).attr('value'),'"></INPUT>',
'</EM></TD>',
'<TD class=z-btn-right><i>&nbsp;</i></TD>',
'</tr></tbody></table>'
];
var bnt = $(bntStr.join('')).btn();
bnt._click = eval(obj.attr("onclick"));
bnt.disable();
if(obj.attr("disabled"))
bnt.disable();
else bnt.enable();
$(this).replaceWith(bnt);
bnt.data("_self", bnt); 
return bnt;
};
this.enable = function(){
this.removeClass("z-btn-dsb");
this.click(this._click);
this.hover(
  function () {
    $(this).addClass("z-btn-over");
  },
  function () {
    $(this).removeClass("z-btn-over");
  }
)
};
this.disable = function(){
this.addClass("z-btn-dsb");
this.unbind("hover");
this.unbind("click");
}; 
return this;
};

$(function(){
$("input[type='button']").each(function(){
$(this).btn().init();

});
$("input[type='reset']").each(function(){
$(this).btn().init();
});
$("input[type='submit']").each(function(){
$(this).btn().init();
});
})
})(jQuery);

效果很棒啊，谢谢楼主提供

近期项目正需要这方面的东西，感谢楼主的分享，回去研究一下哈

jquery不熟悉，刚好可以拿这个学习一下，谢谢

Button按钮比正常要高一点，请问各位怎么解决呀

搞定了上面的问题

在button.css中
将.z-btn这行修改为如下：
.z-btn{display:inline;vertical-align:middle;font:normal 11px tahoma,verdana,helvetica;cursor:pointer;white-space:nowrap;width: auto;}

就可以解决IE78下面偏高的问题

并将icon.css修改为如下
.icon-cls {
    background: url(icons/class.gif) no-repeat 0 1px !important;
}
.icon-event {
    background: url(icons/event.gif) no-repeat 0 1px !important;
}
.icon-config {
    background: url(icons/config.gif) no-repeat 0 1px !important;
}
.icon-prop {
    background: url(icons/prop.gif) no-repeat 0 1px !important;
}
.icon-method {
    background: url(icons/method.gif) no-repeat 0 1px !important;
}
.icon-cmp {
    background: url(icons/cmp.gif) no-repeat 0 1px !important;
}
.icon-pkg {
    background: url(icons/pkg.gif) no-repeat 0 1px !important;
}
.icon-fav {
    background: url(icons/fav.gif) no-repeat 0 1px !important;
}
.icon-static {
    background: url(icons/static.gif) no-repeat 0 1px !important;
}
.icon-docs {
    background: url(icons/docs.gif) no-repeat 0 1px !important;
}
.icon-expand-all {
    background: url(icons/expand-all.gif) no-repeat 0 1px !important;
}
.icon-collapse-all {
    background: url(icons/collapse-all.gif) no-repeat 0 1px !important;
}
.icon-expand-members {
    background: url(icons/expand-members.gif) no-repeat 0 1px !important;
}
.icon-hide-inherited {
    background: url(icons/hide-inherited.gif) no-repeat 0 1px !important;
}
.icon-org {
    background: url(icons/org.gif) no-repeat 0 1px !important;
}
.icon-save {
    background: url(icons/save.gif) no-repeat 0 1px !important;
}
.icon-save-back {
    background: url(icons/save-back.png) no-repeat 0 1px !important;
}
.icon-add {
    background: url(icons/add.gif) no-repeat 0 1px !important;
}
.icon-delete {
    background: url(icons/delete.gif) no-repeat 0 1px !important;
}
.icon-add-row {
    background: url(icons/add-row.gif) no-repeat 0 1px !important;
}
.icon-delete-row {
    background: url(icons/delete-row.gif) no-repeat 0 1px !important;
}
.icon-back {
    background: url(icons/back.png) no-repeat 0 1px !important;
}
.icon-search {
    background: url(icons/search.png) no-repeat 0 1px !important;
}
.icon-search-row {
    background: url(icons/search-row.png) no-repeat 0 1px !important;
}
.icon-reload {
    background: url(icons/reload.png) no-repeat 0 1px !important;
}
.icon-reset {
    background: url(icons/reload.png) no-repeat 0 1px !important;
}
.icon-print {
    background: url(icons/print.gif) no-repeat 0 1px !important;
}
.icon-export {
    background: url(icons/print.gif) no-repeat 0 1px !important;
}
.icon-help {
    background: url(icons/help.png) no-repeat 0 1px !important;
}
.icon-check {
    background: url(icons/check.png) no-repeat 0 1px !important;
}
.icon-copy {
    background: url(icons/copy.png) no-repeat 0 1px !important;
}
.icon-example {
    background: url(icons/example.gif) no-repeat 0 1px !important;
}
.icon-retry {
    background: url(icons/retry.png) no-repeat 0 1px !important;
}
.icon-send-now {
    background: url(icons/send-now.gif) no-repeat 0 1px !important;
}
.icon-receive-now {
    background: url(icons/send-receive.gif) no-repeat 0 1px !important;
}
.icon-edit {
    background: url(icons/edit.png) no-repeat 0 1px !important;
}
.icon-checked {
    background: url(icons/checked.gif) no-repeat 0 1px !important;
}
.icon-unchecked {
    background: url(icons/unchecked.gif) no-repeat 0 1px !important;
}
.icon-pick-button {
    background: url(icons/pick-button.gif) no-repeat 0 1px !important;
}
.icon-cancel {
    background: url(icons/cancel.png) no-repeat 0 1px !important;
}
.icon-apply {
    background: url(icons/apply.png) no-repeat 0 1px !important;
}
.icon-offset {
    background: url(icons/offset.png) no-repeat 0 1px !important;
}
.icon-success {
    background: url(icons/success.gif) no-repeat 0 1px !important;
}
.icon-forum {
    background: url(icons/forum.gif) no-repeat 0 1px !important;
}
.icon-pdf {
    background: url(icons/pdf.gif) no-repeat 0 1px !important;
}
.icon-excel {
    background: url(icons/excel.gif) no-repeat 0 1px !important;
}
.icon-word {
    background: url(icons/word.gif) no-repeat 0 1px !important;
}
.icon-preprint {
    background: url(icons/pre_print.gif) no-repeat 0 1px !important;
}
.icon-btncom {
background: url(icons/prop.gif) no-repeat 0 1px !important;
}