我想网

很多朋友向明河请教如何写jquery插件，今天在浏览tutorialzine时 候有篇教程讲解如何写个jquery文字提示插件，这插件很简单，很适合用于讲解jquery插件机制，明河也借此抛砖引玉先讲解具体一个插件，这个插件 名为：Colortip，然后在下篇教程讲解jquery插件机制。

效果如下图，鼠标滑过链接出现文字提示，提示框的背景颜色可以自由控制。

• 查看示例
• 源码下载

制作教程

一、功能讲解

• 1、鼠标经过带有”title”属性的容器，出现title中的内容（一般是链接、图片）
• 2、可以控制提示框的背景颜色

二、创建html结构

最重要的是title属性，此属性用于控制提示框出现的内容。
class=”blue”用于控制提示框的背景颜色。
当你第一次滑过该容器时，会创建如下提示框容器：

1. <a class=”blue colorTipContainer” href=”http://www.iwanna.cn/archives/2010/07/17/4583/”>推荐9个jquery手风琴菜单插件
2. <span class=”colorTip” style=”margin-left: -60px;”>推荐9个jquery手风 琴菜单插件
4. <span class=”pointyTipShadow”></span>
6. <span class=”pointyTip”></span>
8. </span>
9. </a>

css部分的内容不是讲解关键，明河予以略过。

三、插件代码colortip-1.0-jquery.js

1. (function($){
2. $.fn.colorTip = function(settings){
4. var defaultSettings = {
5. //颜色
6. color : ‘yellow’,
7. //延迟
8. timeout : 500
9. }
10. //提示框的颜色
11. var supportedColors = ['red','green','blue','white','yellow','black'];
13. /* 合并默认参数和用户自定义参数 */
14. settings = $.extend(defaultSettings,settings);
16. return this.each(function(){
18. var elem = $(this);
20. // 如果该对象不包含title属性，直接予以返回
21. if(!elem.attr(‘title’)) return true;
23. // 实例化eventScheduler（定时器）
24. var scheduleEvent = new eventScheduler();
25. //实例化Tip(提示类，产生、显示、隐藏)
26. var tip = new Tip(elem.attr(‘title’));
28. // 产生提示框，并给提示框父容器添加样式
30. elem.append(tip.generate()).addClass(‘colorTipContainer’);
32. // 检查提示框父容器是否有颜色样式
34. var hasClass = false;
35. for(var i=0;i<supportedColors.length;i++)
36. {
37. if(elem.hasClass(supportedColors[i])){
38. hasClass = true;
39. break;
40. }
41. }
43. // 如果没有，使用默认的颜色
45. if(!hasClass){
46. elem.addClass(settings.color);
47. }
49. // 鼠标滑过提示框父容器时，显示提示框
50. // 鼠标移出，则隐藏
52. elem.hover(function(){
54. tip.show();
56. //清理定时器
58. scheduleEvent.clear();
60. },function(){
62. //启动定时器
64. scheduleEvent.set(function(){
65. tip.hide();
66. },settings.timeout);
68. });
70. //删除title属性
71. elem.removeAttr(‘title’);
72. });
74. }
77. /*
78. / 定时器类
79. */
81. function eventScheduler(){}
83. eventScheduler.prototype = {
84. set : function (func,timeout){
85. //添加定时器
86. this.timer = setTimeout(func,timeout);
87. },
88. clear: function(){
89. //清理定时器
90. clearTimeout(this.timer);
91. }
92. }
95. /*
96. / 提示类
97. */
99. function Tip(txt){
100. this.content = txt;
101. this.shown = false;
102. }
104. Tip.prototype = {
105. generate: function(){
106. //产生提示框
108. return this.tip || (this.tip = $(‘<span >’+this.content+
109. ‘<span class=”pointyTipShadow”></span><span class=”pointyTip”></span></span>’));
110. },
111. show: function(){
112. //显示提示框
113. if(this.shown) return;
114. this.tip.css(‘margin-left’,-this.tip.outerWidth()/2).fadeIn(‘fast’);
115. this.shown = true;
116. },
117. hide: function(){
118. //隐藏提示框
119. this.tip.fadeOut();
120. this.shown = false;
121. }
122. }
124. })(jQuery);

关键代码注释明河已经翻译了，插件的制作思路，明河将在接下来的教程详解。

四、jquery插件模板

jquery插件是有固定的模板的，你大概大部分的jquery插件源码，会发现都有一套固定模板。
模板如下：

1. (function($){
2. $.fn.插件名= function(settings){
3. //默认参数
4. var defaultSettings = {
6. }
8. /* 合并默认参数和用户自定义参数 */
9. settings = $.extend(defaultSettings,settings);
11. return this.each(function(){
13. });
15. }
17. })(jQuery);

• 10種好用且最熱門的php函式庫
• HTML5未来发展的六大趋势
• 个人站长：小站怡情大站伤身 做门户灰飞烟灭
• 暴雪游戏设计11大法则
• 7 项 Web 开发者需要了解的新技术
• 互联网公司混的十大真相
• 归纳社交游戏的17点设计理论和技巧
• 创新工场CE0李开复：互联网创业黄金时代来临
• 程序员必须知道的几个国外IT网站
• 个人行动力≠团队执行力

发布于 2010年7月17日 ，目录 JQuery。 留言跟 pings 当前都已关闭。