代码改变世界

另类提示框

2016-04-11 00:24  猴子猿  阅读(1225)  评论(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);

 

拓展阅读：

纯CSS实现