Web中的Tip组件实现

2011-12-28 08:51 by andycja, 943 visits, 收藏, 编辑

Tip组件下载

Tip是页面设计中最常见不过的组件，但要从无到有实现一个优秀的tip组件并不是一件容易的事情。本文介绍了本人编写的tip组件，并提供源码供下载。您可以直接使用，但希望您能保留代码中的作者注释。:)

本tip组件具有以下特性：

1、兼容各主流浏览器。
2、自适应高度。
3、有上方向和下方向两种tip。
4、只用一张背景图。
5、在现代浏览器中具有阴影和圆角效果。
6、可扩展性：可以通过扩展类来调整tip上小箭头的位置和内容的宽度。

相信读者结合源码和组件展示效果能很快领会以上所列各点的含义，这里就不赘诉了。:)

本组件展示效果如下图所示：

最后粘出源码如下：

<!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>Tip</title>
<style type="text/css">
body{font:12px/1.5 tahoma,arial,\5b8b\4f53;color:#505050;}
/*tip*/
.ys_tip .arrow_up,.ys_tip .arrow_down,.ys_tip .btn_close{background:url("ys_tip.gif") no-repeat scroll transparent;}
.ys_tip{position:absolute;z-index:99;}
.ys_tip .arrow_up{font-size:4px;display:block;width:12px;height:7px;position:relative;top:1px;z-index:99;}/*font-size:4px; for ie6*/
.ys_tip .arrow_down{font-size:4px;display:block;width:12px;height:7px;position:relative;bottom:1px;background-position:-16px 0;}
.ys_tip .content{zoom:1;position:relative;padding:8px 16px;border:1px solid #BEB49C;background-color:#fefbe4;
-webkit-border-radius:3px;-moz-border-radius:3px;-webkit-box-shadow:0px 0px 2px #555;-moz-box-shadow:0px 0px 2px #555;}/*fzoom:1; for ie6*/
.ys_tip .btn_close{position:absolute;right:3px;top:4px;width:12px;height:12px;background-position:-48px 0;}
.ys_tip .btn_close:hover{background-position:-32px 0;}
.ys_tip .not_show{text-decoration:underline;}
/*feedback tip*/
.feedback{position:relative;}
.ys_tip_feedback{left:-108px;top:16px;width:142px;}
.ys_tip_feedback .arrow_up{margin-left:113px;}
/*delivery_fee tip*/
.delivery_fee{zoom:1;position:relative;}
.ys_tip_delivery_fee{left:-108px;bottom:15px;width:199px;}
.ys_tip_delivery_fee .arrow_down{margin-left:113px;}
</style>
</head>
<body>
<div style="height:179px;margin-top:50px;">
如果有问题，可以反馈给我们。如果有问题，可以
<span class="feedback">
    <a href="javascript:void 0;">反馈</a>
    <div class="ys_tip ys_tip_feedback">
        <span class="arrow_up"></span>
        <div class="content clearfix">
            <a class="btn_close" href="javascript:void 0;" id="closeFeedbackTip"></a>
            请问有什么问题要反馈吗？ <a href="javascript:void 0;" class="not_show">不再显示</a>
        </div>
    </div>
</span>
给我们。
</div>
<div>
请问关于运费的问题。请问关于运费的问题。请问关于
<span class="delivery_fee">
    <a href="javascript:void 0;">运费</a>
    <div class="ys_tip ys_tip_delivery_fee">
        <div class="content clearfix">
            <a class="btn_close" href="javascript:void 0;"></a>
            运费不受油价影响，也不受时间影响，只跟路程相关。计算公式如下：a*b=c <a href="javascript:void 0;" class="not_show" id="notShowFeedbackTip">不再显示</a>
        </div>
        <span class="arrow_down"></span>
    </div>
</span>
的问题。
</div>
</body>
</html>