论坛首页 → Web前端技术论坛 →

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

浏览 92512 次
锁定老帖子 主题：jquery漂亮的按扭控件（源代码共享）
该帖已经被评为良好帖
作者 正文
  • codesoul
  • 等级: 一星会员
  • 性别:
  • 文章: 13
  • 积分: 100
  • 来自: 厦门
   发表时间：2009-07-14  
chhj_292 写道
这么简单的代码为什么要用jquery呢？
稍微改了一下，执行速度比楼主的稍快！

杀鸡焉用牛刀？？？？？？[size=xx-large][/size]



因为项目中的所有JS代码及开发的组件都使用jquery了，统一风格吧，也就没必要再自己去写些额外JS代码。
返回顶楼
          回帖地址
0 请登录后投票
  • codesoul
  • 等级: 一星会员
  • 性别:
  • 文章: 13
  • 积分: 100
  • 来自: 厦门
   发表时间：2009-07-14  
isflyer 写道
我这里jsp下不能并排，
<input type="button" href="../home.jsp?style=sell" value="退出"/>&nbsp;
        <input type="button" href="../home.jsp?style=sell" value="退出"/>

应该横排，却是竖排


在IE6,IE7,火狐下测试过，都能正常显示。
返回顶楼
          回帖地址
0 请登录后投票
  • xzj127
  • 等级: 初级会员
  • 性别:
  • 文章: 483
  • 积分: 10
  • 来自: 帝都火星村
   发表时间：2009-07-14  
效果 非常不错。。。
返回顶楼
          回帖地址
0 请登录后投票
  • isflyer
  • 等级: 初级会员
  • 性别:
  • 文章: 8
  • 积分: 30
  • 来自: 漯河
   发表时间：2009-07-14   最后修改：2009-07-14
codesoul 写道
isflyer 写道
我这里jsp下不能并排，
<input type="button" href="../home.jsp?style=sell" value="退出"/>&nbsp;
        <input type="button" href="../home.jsp?style=sell" value="退出"/>

应该横排，却是竖排


在IE6,IE7,火狐下测试过，都能正常显示。

我测试的是chrome，这个不行

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script language="javascript" src="script/jquery-1.3.2.min.js"></script>
        <link rel="STYLESHEET" type="text/css" href="style/button.css">
        <link rel="STYLESHEET" type="text/css" href="style/icon.css">
        <script language="javascript" src="script/button.js"></script>

    </head>
    <body>
        <h1>Hello World!</h1>
        <input type="button"  value="退出"/>
        <input type="button"  value="退出"/>
    </body>
</html>
又试了下，上面的会出现不能横排

把
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

去掉就正常了，不明白这个是为什么
返回顶楼
          回帖地址
0 请登录后投票
  • isflyer
  • 等级: 初级会员
  • 性别:
  • 文章: 8
  • 积分: 30
  • 来自: 漯河
   发表时间：2009-07-14  
这种格式是netbeans默认生成的jsp

<%--
    Document   : newjsp
    Created on : 2009-7-14, 19:18:05
    Author     : chengzhisw
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>
返回顶楼
          回帖地址
0 请登录后投票
  • isflyer
  • 等级: 初级会员
  • 性别:
  • 文章: 8
  • 积分: 30
  • 来自: 漯河
   发表时间：2009-07-14   最后修改：2009-07-14
有没有不去掉
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
的解决办法？
返回顶楼
          回帖地址
0 请登录后投票
  • xieye
  • 等级: 四星会员
  • 性别:
  • 文章: 2143
  • 积分: 489
  • 来自: 南京
   发表时间：2009-07-15  
请楼主释出prototype版。
返回顶楼
          回帖地址
0 请登录后投票
  • windedge
  • 等级: 初级会员
  • 性别:
  • 文章: 28
  • 积分: 32
  • 来自: 乡下
   发表时间：2009-07-15   最后修改：2009-07-15
貌似是同事
接头暗号: my? 我是dg的
你的validate也很好, 有空也共享一下
返回顶楼
          回帖地址
0 请登录后投票
  • zhongxuchen
  • 等级: 一星会员
  • 性别:
  • 文章: 97
  • 积分: 183
  • 来自: 上海
   发表时间：2009-07-16  

楼主，用了你的组件，但问题挺大的，样式严重冲突，你的
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">',
'<BUTTON class="z-btn-text ',icon,'" >',$(this).attr('value'),'</BUTTON>',
'</EM></TD>',
'<TD class=z-btn-right><i>&nbsp;</i></TD>',
'</tr></tbody></table>'
];

这段代码写法有点不合理，按钮放到table中，如果table有样式的话，你这个button会严重走形，

 

我的样式是这样的，如下：

#sag_listtable {
 font-size: 9pt;
 border-collapse: collapse;
 width: 100%;
 border: 1px solid #A0B7C5;
 text-align: center;
}

#sag_listtable td {
 font-size: 9pt;
 padding-top: 2px;
 padding-bottom: 0px;
 border: 1px solid #A0B7C5; 这一句去掉你的样式就正确了
 padding-left: 8px;
 padding-right: 8px;
}

 

楼主能不能改进一下，我们项目已经用了你的button了，十分感谢能改进一下

 

  • 大小: 2.7 KB
  • 大小: 2.7 KB
返回顶楼
          回帖地址
0 请登录后投票
  • codesoul
  • 等级: 一星会员
  • 性别:
  • 文章: 13
  • 积分: 100
  • 来自: 厦门
   发表时间：2009-07-17  
zhongxuchen 写道

楼主，用了你的组件，但问题挺大的，样式严重冲突，你的
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">',
'<BUTTON class="z-btn-text ',icon,'" >',$(this).attr('value'),'</BUTTON>',
'</EM></TD>',
'<TD class=z-btn-right><i>&nbsp;</i></TD>',
'</tr></tbody></table>'
];

这段代码写法有点不合理，按钮放到table中，如果table有样式的话，你这个button会严重走形，

 

我的样式是这样的，如下：

#sag_listtable {
 font-size: 9pt;
 border-collapse: collapse;
 width: 100%;
 border: 1px solid #A0B7C5;
 text-align: center;
}

#sag_listtable td {
 font-size: 9pt;
 padding-top: 2px;
 padding-bottom: 0px;
 border: 1px solid #A0B7C5; 这一句去掉你的样式就正确了
 padding-left: 8px;
 padding-right: 8px;
}

 

楼主能不能改进一下，我们项目已经用了你的button了，十分感谢能改进一下

 


添加样式: .z-btn td{border:0 none;margin:0px;padding:0px;}

将你的样式用成class方法，不要用id方法，CSS重复定义时：Style ＞ ID ＞ Class ＞ 缺省的Html元素，并且你的样式要写在button之前，如下：

 

.sag_listtable {
 font-size: 9pt;
 border-collapse: collapse;
 width: 100%;
 border: 1px solid #A0B7C5;
 text-align: center;
}

.sag_listtable td {
 font-size: 9pt;
 padding-top: 2px;
 padding-bottom: 0px;
 border: 1px solid #A0B7C5; 这一句去掉你的样式就正确了
 padding-left: 8px;
 padding-right: 8px;
}

.z-btn td{border:0 none;margin:0px;padding:0px;}

 

具体实际情况就根据CSS重复定义优先级：Style ＞ ID ＞ Class ＞ 缺省的Html元素，来处理。
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics