Web中的Tip组件实现
Web中的Tip组件实现
2011-12-28 08:51 by andycja, 943 visits, 收藏 , 编辑
Tip组件下载
Tip是页面设计中最常见不过的组件，但要从无到有实现一个优秀的tip组件并不是一件容易的事情。本文介绍了本人编写的tip组件，并提供源码供下载。您可以直接使用，但希望您能保留代码中的作者注释。:)
本tip组件具有以下特性：
1、兼容各主流浏览器。
2、自适应高度。
3、有上方向和下方向两种tip。
4、只用一张背景图。
5、在现代浏览器中具有阴影和圆角效果。
6、可扩展性：可以通过扩展类来调整tip上小箭头的位置和内容的宽度。
相信读者结合源码和组件展示效果能很快领会以上所列各点的含义，这里就不赘诉了。:)
本组件展示效果如下图所示：
最后粘出源码如下：
<!--
作者：andycja
http://www.cnblogs.com/andycja/
-->
<! 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 >
随笔分类 -web前端
Web中的幻灯片组件实现 2011-12-29 08:51 by andycja, 228 visits, 网摘 , 收藏 , 编辑
0 Comment Categories: web前端 Tags: javascript , js , html , css
Web中的Tip组件实现 2011-12-28 08:51 by andycja, 943 visits, 网摘 , 收藏 , 编辑
15 Comment Categories: web前端 Tags: js , html , css
[译]《学习HTML5游戏编程》第二章 2011-12-13 09:23 by andycja, 1145 visits, 网摘 , 收藏 , 编辑
1 Comment Categories: web前端 , 翻译 Tags: js , css , html5 , game
[译]《学习HTML5游戏编程》第一章 2011-12-12 09:25 by andycja, 1202 visits, 网摘 , 收藏 , 编辑
2 Comment Categories: web前端 , 翻译 Tags: js , css , html5 , game
[译]《学了HTML5游戏编程》前言 2011-12-11 11:02 by andycja, 169 visits, 网摘 , 收藏 , 编辑
0 Comment Categories: web前端 , 翻译 Tags: javascript , js , html , css , html5
《学了HTML5游戏编程》译记 2011-12-11 10:56 by andycja, 991 visits, 网摘 , 收藏 , 编辑
4 Comment Categories: web前端 , 翻译 Tags: javascript , js , css , html5
[译]《jQuery 1.7将HTML5引入IE6-8，实施弃用策略》《WebGL, WebCL及多核：在浏览器中使用River Trail实现并行JavaScript的现状与未来》 2011-11-29 14:51 by andycja, 356 visits, 网摘 , 收藏 , 编辑
0 Comment Categories: web前端 , 翻译 Tags: javascript , js , html
[译] 清除浮动的新方法 2011-11-06 22:49 by andycja, 1148 visits, 网摘 , 收藏 , 编辑
5 Comment Categories: web前端 , 翻译 Tags: html , css
分页控件的web标准实现（始终显示第一页和最后一页的页码） 2011-11-01 20:14 by andycja, 285 visits, 网摘 , 收藏 , 编辑
0 Comment Categories: web前端 Tags: javascript , js , html
页签及盒子的web标准实现 2011-10-31 12:29 by andycja, 1340 visits, 网摘 , 收藏 , 编辑
2 Comment Categories: web前端 Tags: html , css
[译] 高性能JavaScript 6至10章总结 2011-10-29 11:24 by andycja, 213 visits, 网摘 , 收藏 , 编辑
摘要： web2.0时代的到来已经有若干个年头了，web应用的功能要越来越强大，用户体验要越来越好，从而，性能是我们所要重点关注的一个方面，如何做到？ 阅读全文
2 Comment Categories: web前端 , 翻译 Tags: javascript , js , html
[译] 高性能JavaScript 1至5章总结 2011-10-29 11:24 by andycja, 228 visits, 网摘 , 收藏 , 编辑
摘要： web2.0时代的到来已经有若干个年头了，web应用的功能要越来越强大，用户体验要越来越好，从而，性能是我们所要重点关注的一个方面，如何做到？ 阅读全文
0 Comment Categories: web前端 , 翻译 Tags: javascript , js , html
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息