你的位置:首页 > 网页设计

[网页设计]另类提示框


我这里说的提示框,就是当用户将鼠标移动到需要提示的图标时,就会在这图标的位置出现一个提示框了。

咦,那这有什么好说的呢?

如果你来实现这一效果,你会怎么做呢?

初步的做法嘛,就是利用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 ></div>'            +'<div >'+p.content+'</div>'            +'<div ></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);