摸索之圆角按钮jquery插件

最新推荐文章于 2025-08-08 17:07:36 发布

weixin_34343000

最新推荐文章于 2025-08-08 17:07:36 发布

阅读量84

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/bobogoodgoodstudy/archive/2013/04/22/3036586.html

本文介绍了一个使用jQuery实现的按钮美化插件。该插件通过为按钮元素添加额外的装饰性div并配合特定的CSS样式，实现了按钮在不同状态下的视觉效果变化。支持鼠标悬停、按下等交互效果。

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

我的思路是这样的，input用一个div包裹起来，然后再在input前后各加一个div，背景设成圆角的图

附上jquery插件代码

(function($){
   $.fn.jquery-button=function()
  {
       var defualt={}//为了方便就不传参数了
   return this.each(function(){
       var t=$(this);_t=this;
       function mouse_out(){
            $(this).children(".button-over-left").removeClass("button-over-left").addClass("button-left");
            $(this).children(".button-over-center").removeClass("button-over-center").addClass("button-center");
            $(this).children(".button-over-right").removeClass("button-over-right").addClass("button-right");
        } //鼠标的函数
       function mouse_down(){
            $(this).children(".button-over-left").removeClass("button-over-left").addClass("button-down-left");
            $(this).children(".button-over-center").removeClass("button-over-center").addClass("button-down-center");
            $(this).children(".button-over-right").removeClass("button-over-right").addClass("button-down-right");
            t[0].click();//左圆角div和右圆角div点击时都出发input点击
           }//鼠标按下的函数
       function mouse_over(){
            $(this).children(".button-left").removeClass("button-left").addClass("button-over-left");
            $(this).children(".button-center").removeClass("button-center").addClass("button-over-center");
            $(this).children(".button-right").removeClass("button-right").addClass("button-over-right");
           }//鼠标经过的函数
       function addclass(){
           t.wrap($('<div></div>'));//用div包裹t
           t.addClass("button-center");//给t添加样式
           t.before("<div class='button-left'></div");//t之前加左圆角
           t.attr("onFocus","this.blur()");//点击时出去边框
           t.after("<div class='button-right'></div>");//t之后加右圆角
       } //
       function init(){
          addclass();
          t.parent().bind("mouseover",mouse_over).bind("mousedown",mouse_down).bind("mouseout",mouse_out);

      } //初始化
       init();

}) ;
            
  }
})(jQuery);
$(function(){
   $(.juqerybutton).jquery-button();
});

css样式：

.button-left{background:url(button_up_01.png) no-repeat;height:24px; width:13px; float:left;cursor:pointer}
.button-center{background:url(button_up_02.png) repeat-x;height:24px;border-style: none; border:none; float:left;cursor:pointer}
.button-right{background:url(button_up_03.png) no-repeat; height:24px;width:13px; float:left;cursor:pointer}
.button-over-left{background:url(button_over_01.png) no-repeat;height:24px; width:13px; float:left;cursor:pointer}
.button-over-center{background:url(button_over_02.png) repeat-x;height:24px;border-style: none; border:none; float:left;cursor:pointer}
.button-over-right{background:url(button_over_03.png) no-repeat; height:24px;width:13px; float:left;cursor:pointer}
.button-down-left{background:url(button_down_01.png) no-repeat;height:24px; width:13px; float:left;cursor:pointer}
.button-down-center{background:url(button_down_02.png) repeat-x;height:24px;border-style: none; border:none; float:left;cursor:pointer}
.button-down-right{background:url(button_down_03.png) no-repeat; height:24px;width:13px; float:left;cursor:pointer}

html代码：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="button.js"></script>
</head>

<body>

<!--<div style="background:url(button_up01.png) left top no-repeat;height:52px;width:25px; " >-->
<!--<div>
<div class="button-left"></div>
<input onFocus="this.blur()" type="button" value="hahahhhhhh" onclick="haha()"  class="button-center"/><div class="button-right" ></div>
</div>
<div>
<div class="button-left"></div>
<input onFocus="this.blur()" type="button" value="hahahhhhhh" onclick="haha()"  class="button-center"/><div class="button-right" ></div>
</div>-->
<input class="jquerybutton" value="hhhhhhhhh" type="button"/>
<input class="jquerybutton" value="hhhhhhhhhhhhhhhhhhhhhhhhhhhh" type="button"/>

</body>
</html>

button_down_01.png button_down_02.png button_down_03.pngbutton_over_01.png button_over_02.png button_over_03.pngbutton_up_01.pngbutton_up_02.pngbutton_up_03.png