今天在浏览tutorialzine时候有篇教程讲解如何写个jquery文字提示插件,这插件很简单,很适合用于讲解jquery插件机制,作者也借此抛砖引玉先讲解具体一个插件,这个插件名为:Colortip,然后在下篇教程讲解jquery插件机制。
效果如下图,鼠标滑过链接出现文字提示,提示框的背景颜色可以自由控制。
![](http://www.36ria.com/wp-content/uploads/2010/07/colortips.png)
制作教程
一、功能讲解
- 1、鼠标经过带有”title”属性的容器,出现title中的内容(一般是链接、图片)
- 2、可以控制提示框的背景颜色
二、创建html结构
- <a href="http://www.36ria.com/2741" class="blue" title="推荐9个jquery手风琴菜单插件">推荐9个jquery手风琴菜单插件</a>
最重要的是title属性,此属性用于控制提示框出现的内容。
class=”blue”用于控制提示框的背景颜色。
当你第一次滑过该容器时,会创建如下提示框容器:
- <a class="blue colorTipContainer" href="http://www.36ria.com/2741">推荐9个jquery手风琴菜单插件
- <span class="colorTip" style="margin-left: -60px;">推荐9个jquery手风琴菜单插件
-
- <span class="pointyTipShadow"></span>
-
- <span class="pointyTip"></span>
-
- </span>
- </a>
css部分的内容不是讲解关键,作者予以略过。
三、插件代码colortip-1.0-jquery.js
- (function($){
- $.fn.colorTip = function(settings){
-
- var defaultSettings = {
- //颜色
- color : 'yellow',
- //延迟
- timeout : 500
- }
- //提示框的颜色
- var supportedColors = ['red','green','blue','white','yellow','black'];
-
- /* 合并默认参数和用户自定义参数 */
- settings = $.extend(defaultSettings,settings);
-
- return this.each(function(){
-
- var elem = $(this);
-
- // 如果该对象不包含title属性,直接予以返回
- if(!elem.attr('title')) return true;
-
- // 实例化eventScheduler(定时器)
- var scheduleEvent = new eventScheduler();
- //实例化Tip(提示类,产生、显示、隐藏)
- var tip = new Tip(elem.attr('title'));
-
- // 产生提示框,并给提示框父容器添加样式
-
- elem.append(tip.generate()).addClass('colorTipContainer');
-
- // 检查提示框父容器是否有颜色样式
-
- var hasClass = false;
- for(var i=0;i<supportedColors.length;i++)
- {
- if(elem.hasClass(supportedColors[i])){
- hasClass = true;
- break;
- }
- }
-
- // 如果没有,使用默认的颜色
-
- if(!hasClass){
- elem.addClass(settings.color);
- }
-
- // 鼠标滑过提示框父容器时,显示提示框
- // 鼠标移出,则隐藏
-
- elem.hover(function(){
-
- tip.show();
-
- //清理定时器
-
- scheduleEvent.clear();
-
- },function(){
-
- //启动定时器
-
- scheduleEvent.set(function(){
- tip.hide();
- },settings.timeout);
-
- });
-
- //删除title属性
- elem.removeAttr('title');
- });
-
- }
-
-
- /*
- / 定时器类
- */
-
- function eventScheduler(){}
-
- eventScheduler.prototype = {
- set : function (func,timeout){
- //添加定时器
- this.timer = setTimeout(func,timeout);
- },
- clear: function(){
- //清理定时器
- clearTimeout(this.timer);
- }
- }
-
-
- /*
- / 提示类
- */
-
- function Tip(txt){
- this.content = txt;
- this.shown = false;
- }
-
- Tip.prototype = {
- generate: function(){
- //产生提示框
-
- return this.tip || (this.tip = $('<span class="colorTip">'+this.content+
- '<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>'));
- },
- show: function(){
- //显示提示框
- if(this.shown) return;
- this.tip.css('margin-left',-this.tip.outerWidth()/2).fadeIn('fast');
- this.shown = true;
- },
- hide: function(){
- //隐藏提示框
- this.tip.fadeOut();
- this.shown = false;
- }
- }
-
- })(jQuery);
关键代码注释作者已经翻译了,插件的制作思路,作者将在接下来的教程详解。
四、jquery插件模板
jquery插件是有固定的模板的,你大概大部分的jquery插件源码,会发现都有一套固定模板。
模板如下:
- (function($){
- $.fn.插件名= function(settings){
- //默认参数
- var defaultSettings = {
-
- }
-
- /* 合并默认参数和用户自定义参数 */
- settings = $.extend(defaultSettings,settings);
-
- return this.each(function(){
-
- });
-
- }
-
- })(jQuery);
这是最基础的jquery插件结构,作者将在下一篇教程详解jquery的插件机制。