[js插件]分享一个文章内容信息提示插件Colortip

引用

提示的功能，就上网找了一个插件，发现colortip实现比较简单，就定了这个插件。

实现过程

效果：

标签中的title属性的值弹出显示的，默认情况是黄色的：

Meta 文件 <美女 <美女

效果：

文件中进行配置的：

    </span><span style="color: #0000ff;"&gt;var</span> defaultSettings =<span style="color: #000000;"&gt; {
        color        : </span>'yellow',<span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;默认颜色</span>
        timeout        : 500<span style="color: #000000;"&gt;
    }

    </span><span style="color: #0000ff;"&gt;var</span> supportedColors = ['red','green','blue','white','yellow','black'];<span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;总共有6种<a href="https://www.jb51.cc/tag/zhuti/" target="_blank" class="keywords">主题</a>的颜色</span>

    <span style="color: #008000;"&gt;/*</span><span style="color: #008000;"&gt; Combining the default settings object with the supplied one </span><span style="color: #008000;"&gt;*/</span><span style="color: #000000;"&gt;
    settings </span>=<span style="color: #000000;"&gt; $.extend(defaultSettings,settings);

    </span><span style="color: #008000;"&gt;/*</span><span style="color: #008000;"&gt;
    *    Looping through all the elements and returning them afterwards.
    *    This will add chainability to the plugin.
    </span><span style="color: #008000;"&gt;*/</span>

    <span style="color: #0000ff;"&gt;return</span> <span style="color: #0000ff;"&gt;this</span>.each(<span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt;(){

        </span><span style="color: #0000ff;"&gt;var</span> elem = $(<span style="color: #0000ff;"&gt;this</span><span style="color: #000000;"&gt;);

        </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; If the title attribute is empty,continue with the next element</span>
        <span style="color: #0000ff;"&gt;if</span>(!elem.attr('title')) <span style="color: #0000ff;"&gt;return</span> <span style="color: #0000ff;"&gt;true</span><span style="color: #000000;"&gt;;

        </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; Creating new eventScheduler and Tip objects for this element.</span>
        <span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; (See the class definition at the bottom).</span>

        <span style="color: #0000ff;"&gt;var</span> scheduleEvent = <span style="color: #0000ff;"&gt;new</span><span style="color: #000000;"&gt; eventScheduler();
        </span><span style="color: #0000ff;"&gt;var</span> tip = <span style="color: #0000ff;"&gt;new</span> Tip(elem.attr('title'<span style="color: #000000;"&gt;));

        </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; Adding the tooltip markup to the element and</span>
        <span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; applying a special class:</span>

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

        </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; Checking to see whether a supported color has been</span>
        <span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; set as a classname on the element.</span>

        <span style="color: #0000ff;"&gt;var</span> hasClass = <span style="color: #0000ff;"&gt;false</span><span style="color: #000000;"&gt;;
        </span><span style="color: #0000ff;"&gt;for</span>(<span style="color: #0000ff;"&gt;var</span> i=0;i<supportedColors.length;i++<span style="color: #000000;"&gt;)
        {
            </span><span style="color: #0000ff;"&gt;if</span><span style="color: #000000;"&gt;(elem.hasClass(supportedColors[i])){
                hasClass </span>= <span style="color: #0000ff;"&gt;true</span><span style="color: #000000;"&gt;;
                </span><span style="color: #0000ff;"&gt;break</span><span style="color: #000000;"&gt;;
            }
        }

        </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; If it has been set,it will override the default color</span>

        <span style="color: #0000ff;"&gt;if</span>(!<span style="color: #000000;"&gt;hasClass){
            elem.addClass(settings.color);
        }

        </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; On mouseenter,show the tip,on mouseleave set the</span>
        <span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; tip to be hidden in half a second.</span>

elem.hover(function(){

            tip.show();

            </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; If the user moves away and hovers over the tip again,</span>
            <span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; clear the prev<a href="https://www.jb51.cc/tag/IoU/" target="_blank" class="keywords">IoU</a>sly set event:</span>

scheduleEvent.clear();

        },</span><span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt;(){

            </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; Schedule event actualy sets a timeout (as you can</span>
            <span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; see from the class definition below).</span>

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

        });

        </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; Removing the title attribute,so the regular OS titles are</span>
        <span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; not shown along with the tooltips.</span>

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

}


</span><span style="color: #008000;"&gt;/*</span><span style="color: #008000;"&gt;
/    Event Scheduler Class Definition
</span><span style="color: #008000;"&gt;*/</span>

<span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt; eventScheduler(){}

eventScheduler.prototype </span>=<span style="color: #000000;"&gt; {
    set    : </span><span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt; (func,timeout){

        </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; The set method takes a function and a time period (ms) as</span>
        <span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; parameters,and sets a timeout</span>

        <span style="color: #0000ff;"&gt;this</span>.timer =<span style="color: #000000;"&gt; setTimeout(func,timeout);
    },clear: </span><span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt;(){

        </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; The clear method clears the timeout</span>

clearTimeout(this.timer);
}
}

</span><span style="color: #008000;"&gt;/*</span><span style="color: #008000;"&gt;
/    Tip Class Definition
</span><span style="color: #008000;"&gt;*/</span>

<span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt; Tip(txt){
    </span><span style="color: #0000ff;"&gt;this</span>.content =<span style="color: #000000;"&gt; txt;
    </span><span style="color: #0000ff;"&gt;this</span>.shown = <span style="color: #0000ff;"&gt;false</span><span style="color: #000000;"&gt;;
}

Tip.prototype </span>=<span style="color: #000000;"&gt; {
    generate: </span><span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt;(){

        </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; The generate method returns either a prev<a href="https://www.jb51.cc/tag/IoU/" target="_blank" class="keywords">IoU</a>sly generated element</span>
        <span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; stored in the tip variable,or generates it and saves it in tip for</span>
        <span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; later use,after which returns it.</span>

        <span style="color: #0000ff;"&gt;return</span> <span style="color: #0000ff;"&gt;this</span>.tip || (<span style="color: #0000ff;"&gt;this</span>.tip = $('<span class="colorTip"&gt;'+<span style="color: #0000ff;"&gt;this</span>.content+
                                         '<span class="pointyTipShadow"&gt;</span><span class="pointyTip"&gt;</span></span>'));<span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>的消息<a href="https://www.jb51.cc/tag/tishi/" target="_blank" class="keywords">提示</a>框是一个span<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a></span>

},show: function(){
if(this.shown) return;

        </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; Center the tip and start a fadeIn animation</span>
        <span style="color: #0000ff;"&gt;this</span>.tip.css('margin-left',-<span style="color: #0000ff;"&gt;this</span>.tip.outerWidth()/2).fadeIn('fast');
        <span style="color: #0000ff;"&gt;this</span>.shown = <span style="color: #0000ff;"&gt;true</span><span style="color: #000000;"&gt;;
    },hide: </span><span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt;(){
        </span><span style="color: #0000ff;"&gt;this</span><span style="color: #000000;"&gt;.tip.fadeOut();
        </span><span style="color: #0000ff;"&gt;this</span>.shown = <span style="color: #0000ff;"&gt;false</span><span style="color: #000000;"&gt;;
    }
}

})(jQuery);

文件，可见该插件主要是在title属性中设置显示信息的。

总结

提示信息的地方加个带title属性的a标签就可以了，不过有点差强人意的地方，如果其他的标签例如按钮，加一个title，就会提示错误。

原文链接：https://www.f2er.com/jquery/191586.html

[js插件]分享一个文章内容信息提示插件Colortip

引用

实现过程

总结

猜你在找的jQuery相关文章