另类提示框
2016-04-11 00:24 猴子猿 阅读(1224) 评论(8) 编辑 收藏 举报我这里说的提示框,就是当用户将鼠标移动到需要提示的图标时,就会在这图标的位置出现一个提示框了。
咦,那这有什么好说的呢?
如果你来实现这一效果,你会怎么做呢?
初步的做法嘛,就是利用PS制作一张提示框内容区域的png图片和一张指向位置的箭头png图片,然后利用这张图片作为提示背景,里面输入指定内容呗。
恩,想法简单粗暴,那我们就来初步实现以下吧。
首先你得有两张上述说的图片,图片制作结果如下:
图一 图二
好了,图片有了,接下来,就是将这两张图片作为背景。
我的想法是,两张图片利用两个div,将图二(三角形图片)嵌套在图一(矩形方框)里,然后达到这一提示框的效果。
<!DOCTYPE html> <head> <title>tip</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> #liuTip { background:url(img/title_back.png) 0 10px no-repeat;<!--图一:内容区--> width:220px; height:112px; overflow:auto; position:absolute; display:block; } #liuTip div { background:url(img/title_arrow.png) 0 0 no-repeat;<!--图二:箭头区--> width:40px; height:11px; } </style> </head> <body> <!--提示框--> <div id="liuTip"> <div></div> </div> <!--提示框结束--> </body> </html>
运行代码,效果如下:
图三
这样,一个简单的提示框就出来了。
但是,大家发现没,这样子的话,内容框(图一)是恒定不变的哦。
也就是说,你每次用一个提示框,你就得去制作一张单独的内容框(图一),以符合特定的内容。
哎,尼玛,是不是烦了点,如果我想写一个适合于所有内容的提示框呢?
那我们就一起来改善改善它。
还记得大明湖畔的薇薇么,background有个repeat呢。
是不是知道了点撒。
想法:将提示框拆分成上、中、下三个区域,上下区域不变,中间区域拆分成一个片段,高度随内容区域的多少,而自动变换。
尼玛,这到底是什么意思?
见下图:
图四
图五
图六
这样你就可以利用repeat-y实现解决不必为单独的内容制作单独的body框的问题了。
但是,有木有发现,如果我将其拆分成上中下三个区域,高度随内容变大后,会很难看滴。
所以,我将其拆分成左中右三个区域,这样不管内容变多少,宽度随之改变,一样美观的。
图片见下:
图七 图八 图九
哈哈,好了,拆分后,再组装的思想,就是这样了。最后利用repeat-x就可以实现宽度随内容而变。
下面是实现代码:
<!DOCTYPE html> <head> <title>tip2</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> .tip { overflow:hidden; } .tipHead { height:77px; width:16px; background:url(localizerLeft.gif) no-repeat;<!--图七:头--> float:left; } .tipBody { height:77px; width:200px; background:url(localizerMid.gif) repeat-x;<!--图八:腰--> float:left; } .tipTail { height:77px; width:10px; background:url(localizerRight.gif) no-repeat;<!--图九:尾--> float:left; } </style> </head> <body> <div class="tip"> <div class="tipHead"></div> <div class="tipBody"></div> <div class="tipTail"></div> </div> </body> </html>
运行上述代码,结果如下:
图十
不知道你有没有看上述的代码,建议你看一看,不然讲不下去咯。。。
上述代码看过后,发现有点不爽。
提示框应该会经常用吧,那干嘛不把它封装成一个插件呢!!这样就不必每次用它,都去写一遍或者copy一下,绝对影响效率,心情啊!!!
目前用的jQuery比较多,所以这里就初步讲讲jQuery插件封装咯。
思路:
1、 提供相应属性,让操作者可以改变;如果操作者没有改变,使用默认属性。
2、 利用提供的属性,绘制出相对应的提示框。
详情见下代码:
(function ($){ var tip = function( p, ths ){ var _$ths = $(ths); var _$parent = _$ths.parent(); _$ths = _$ths.detach(); /* p合并自定义属性,默认包括以下属性设置: width 提示框内容区域的宽度,number content 提示框中的提示内容 */ p = $.extend({ width: 200, content:'sample' }, p); /* Draw:绘制提示框的函数 param: ths --> 提示框this */ var Draw = function(){ var children = '<div class="tipHead"></div>' +'<div class="tipBody">'+p.content+'</div>' +'<div class="tipTail"></div>'; //将children加入到提示框中 _$ths.append( children ); //动态设置提示框的样式和内容区域的宽度 _$ths.addClass('tip').find('.tipBody').width( p.width ); _$parent.append(_$ths); };//End_Draw return (function(){ Draw(); _$parent = null; _$ths = null; })(); }; /* $.fn.tip:提示框插件,用于提示用户 Param: property --> 自定义提示框的相关信息 */ $.fn.tip = function( property ) { tip( property, this ); };//End_$.fn.timeProcess })(jQuery);
拓展阅读: |
![](https://images.cnblogs.com/cnblogs_com/giggle/887699/o_weixin.jpg)