Colortip 文章内容提示工具 jQuery 插件

Question

在本教程中，我们将编写一个简单的jQuery工具提示插件。要转换的元素在您的网页的标题属性，为一系列丰富多彩的提示。有六种颜色主题，所以你可以很容易地与其他的设计相匹配，注意这个插件不支持低版本浏览器。

HTML 结构

我们今天要写的插件是通过将页面上的元素的标题转换成三个跨度的结构来完成的，该结构形成了一个工具提示，在悬停状态下显示。如果你从一个像这样的常规链接开始：

<a href="#" class="blue" title="show tooltip">hover this</a>

jQuery会将其转换为您可以在下面看到的标记。

<a href="#" class="blue" title="show tooltip">hover this
<span class="colorTip" style="margin-left: -60px;">show tooltip
    <span class="pointyTipShadow"></span>
    <span class="pointyTip"></span>
</span>
</a>

注意上面的第一个代码块指定了一个 blue 类名。这是因为我们要覆盖默认的颜色（yellow）。你可以选择 red、blue、green、yellow、white 和 black，或者你可以在插件的样式表创建您自己的颜色。

如果用户禁用了 JavaScript ，仍然会看到页面上的普通标题提示，所以本插件会向下兼容。

CSS 样式

显示页面上的丰富多彩的技巧，你首先需要包含在HTML文档的头部插件样式表文件。

<link rel="stylesheet" type="text/css" href="colortip/colortip-jquery.css"/>

你也可以只复制样式的文件并将其粘贴直接在你的主样式表，如果你不想让一个单独的包含文件。这个样式表定义的定位和设计的工具提示。它有六个颜色主题，你可以很容易地添加更多。

colortip-jquery.css - Part 1

.colorTipContainer{
    position:relative;
    text-decoration:none !important;
}

.colorTip{
    /* This class is assigned to the color tip span by jQuery */

    display:none;
    position:absolute;
    left:50%;
    top:-30px;
    padding:6px;

    background-color:white;
    font-family:Arial,Helvetica,sans-serif;
    font-size:11px;
    font-style:normal;
    line-height:1;
    text-decoration:none;
    text-align:center;
    text-shadow:0 0 1px white;
    white-space:nowrap;

    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
}

.pointyTip,.pointyTipShadow{
    /* Setting a thick transparent border on a 0x0 div to create a triangle */
    border:6px solid transparent;
    bottom:-12px;
    height:0;
    left:50%;
    margin-left:-6px;
    position:absolute;
    width:0;
}

.pointyTipShadow{
    /* The shadow tip is 1px larger, so it acts as a border to the tip */
    border-width:7px;
    bottom:-14px;
    margin-left:-7px;
}

colorTipContainer 类分配给元素添加的颜色提示。它的定位是相对的，所以提示可以集中在它们上面。

一个整洁的CSS技巧是用来创建三角形尖头。你知道，魔王和跨越只能取一矩形形状（或椭圆/圆形矩形如果应用边界半径）。但是，如果将厚边框应用到0到0元素，边框唯一适合的方式是在每个边上占用一个三角形空间。然后，通过将默认边框颜色设置为透明，您可以看到四个三角形形状中的任意一个。

这实际上是在做 .pointytip 和 .pointytipshadow 跨度，为了给人一种印象，尖顶有一个边界应用所以比赛的色条设计其他。现在让我们仔细看看六种颜色主题。

colortip-jquery.css - Part 2

/* 6 Available Color Themes */

.white .pointyTip{ border-top-color:white;}
.white .pointyTipShadow{ border-top-color:#ddd;}
.white .colorTip{
    background-color:white;
    border:1px solid #DDDDDD;
    color:#555555;
}

.yellow .pointyTip{ border-top-color:#f9f2ba;}
.yellow .pointyTipShadow{ border-top-color:#e9d315;}
.yellow .colorTip{
    background-color:#f9f2ba;
    border:1px solid #e9d315;
    color:#5b5316;
}

.blue .pointyTip{ border-top-color:#d9f1fb;}
.blue .pointyTipShadow{ border-top-color:#7fcdee;}
.blue .colorTip{
    background-color:#d9f1fb;
    border:1px solid #7fcdee;
    color:#1b475a;
}

.green .pointyTip{ border-top-color:#f2fdf1;}
.green .pointyTipShadow{ border-top-color:#b6e184;}
.green .colorTip{
    background-color:#f2fdf1;
    border:1px solid #b6e184;
    color:#558221;
}

.red .pointyTip{ border-top-color:#bb3b1d;}
.red .pointyTipShadow{ border-top-color:#8f2a0f;}
.red .colorTip{
    background-color:#bb3b1d;
    border:1px solid #8f2a0f;
    color:#fcfcfc;
    text-shadow:none;
}

.black .pointyTip{ border-top-color:#333;}
.black .pointyTipShadow{ border-top-color:#111;}
.black .colorTip{
    background-color:#333;
    border:1px solid #111;
    color:#fcfcfc;
    text-shadow:none;
}

记住只有边界的尖头唯一可见的部分。您可以按照相同的结构添加自己的颜色主题。

jQuery 脚本

首先你需要包括 jQuery 库和插件文件的网页，在我们的 script.js 文件，这是要利用插件和添加 colortips 页面上的链接。

<script src="js/jquery.min.js"></script>
<script src="colortip/colortip-jquery.js"></script>
<script src="script.js"></script>

出于性能方面的原因，我把这个代码在 colortips.html 文件的底部。这允许在浏览器块加载js文件之前进行页面设计。

现在让我们看一看色条插件。

colortip-jquery.js - Part 1

(function($){
    $.fn.colorTip = function(settings){

        var defaultSettings = {
            color       : 'yellow',
            timeout     : 500
        }

        var supportedColors = ['red','green','blue','white','yellow','black'];

        /* Combining the default settings object with the supplied one */
        settings = $.extend(defaultSettings,settings);

        /*
        *   Looping through all the elements and returning them afterwards.
        *   This will add chainability to the plugin.
        */

        return this.each(function(){

            var elem = $(this);

            // If the title attribute is empty, continue with the next element
            if(!elem.attr('title')) return true;

            // Creating new eventScheduler and Tip objects for this element.
            // (See the class definition at the bottom).

            var scheduleEvent = new eventScheduler();
            var tip = new Tip(elem.attr('title'));

            // Adding the tooltip markup to the element and
            // applying a special class:

            elem.append(tip.generate()).addClass('colorTipContainer');

            // Checking to see whether a supported color has been
            // set as a classname on the element.

            var hasClass = false;
            for(var i=0;i<supportedColors.length;i++)
            {
                if(elem.hasClass(supportedColors[i])){
                    hasClass = true;
                    break;
                }
            }

            // If it has been set, it will override the default color

            if(!hasClass){
                elem.addClass(settings.color);
            }

 

当你调用的插件，你可以通过一个配置对象，这是默认的颜色和超时后，提示消失 MouseLeave。

您可以从六种可能的颜色中选择它们，并将其作为类名称分配给元素。该插件将检查一个颜色类是否存在，如果不是，它将应用您在配置对象中传递的默认类。如果您没有通过配置对象，则使用黄色。

colortip-jquery.js - Part 2

          // On mouseenter, show the tip, on mouseleave set the
            // tip to be hidden in half a second.

            elem.hover(function(){

                tip.show();

                // If the user moves away and hovers over the tip again,
                // clear the previously set event:

                scheduleEvent.clear();

            },function(){

                // Schedule event actualy sets a timeout (as you can
                // see from the class definition below).

                scheduleEvent.set(function(){
                    tip.hide();
                },settings.timeout);

            });

            // Removing the title attribute, so the regular OS titles are
            // not shown along with the tooltips.

            elem.removeAttr('title');
        });

    }

    /*
    /   Event Scheduler Class Definition
    */

    function eventScheduler(){}

    eventScheduler.prototype = {
        set : function (func,timeout){

            // The set method takes a function and a time period (ms) as
            // parameters, and sets a timeout

            this.timer = setTimeout(func,timeout);
        },
        clear: function(){

            // The clear method clears the timeout

            clearTimeout(this.timer);
        }
    }

在插件代码的第二部分，我们将事件侦听器的悬停事件（一个 MouseEnter 和 MouseLeave 事件组合）。

请注意事件调度程序类。它用于设置在预定时间段之后执行的函数。其核心为 setTimeout。一个 clear() 方法也提供作为类的一部分，所以先前预定的事件可以被摧毁（有用的当你移动你的鼠标离开一个提示然后搬回去之前它已经消失了）。

colortip-jquery.js - Part 3

  /*
    /   Tip Class Definition
    */

    function Tip(txt){
        this.content = txt;
        this.shown = false;
    }

    Tip.prototype = {
        generate: function(){

            // The generate() method returns either a previously generated element
            // stored in the tip variable, or generates and saves it in tip for
            // later use, after which returns it.

            return this.tip || (this.tip = $(''+this.content+
                                             ''));
        },
        show: function(){
            if(this.shown) return;

            // Center the tip and start a fadeIn animation
            this.tip.css('margin-left',-this.tip.outerWidth()/2).fadeIn('fast');
            this.shown = true;
        },
        hide: function(){
            this.tip.fadeOut();
            this.shown = false;
        }
    }

})(jQuery);

在代码的最后部分，我们定义了提示类。它有一个生成、显示和隐藏的方法。从这个类的一个对象是每个提示创建。产生的方法被称为第一，并提示存储在本地this.tip变量。显示和隐藏方法在这个变量上运行，以运行淡入/淡出动画。

现在我们只剩下调用插件添加colortips到网页上的所有链接。

script.js

$(document).ready(function(){
    /* Adding a colortip to any tag with a title attribute: */
    $('[title]').colorTip({color:'yellow'});
});

这里的配置对象也可以省略，因为黄色是默认值。但你可以指定不同的颜色的提示。如果将红色、绿色、蓝色、白色、黄色或黑色作为元素的类名，则工具提示的设计将被重写。

使用我们今天编写的插件非常简单，因为它不需要任何特定的配置。这需要一系列的元素和丰富多彩的提示代替他们的标题属性。你也可以很容易地创建你自己的工具提示的设计只包括三个额外的样式类到你的样式表和元素添加到支持的颜色阵列在 colortip-jquery.js。