制作jquery文字提示插件—jquery插件实战教程(1)
很多朋友向明河请教如何写jquery插件,今天在浏览tutorialzine时候有篇教程讲解如何写个jquery文字提示插件,这插件很简单,很适合用于讲解jquery插件机制,明河也借此抛砖引玉先讲解具体一个插件,这个插件名为:Colortip,然后在下篇教程讲解jquery插件机制。
效果如下图,鼠标滑过链接出现文字提示,提示框的背景颜色可以自由控制。
制作教程
一、功能讲解
- 1、鼠标经过带有”title”属性的容器,出现title中的内容(一般是链接、图片)
- 2、可以控制提示框的背景颜色
二、创建html结构
1. <a href="http://www.36ria.com/2741" class="blue" title="推荐9个jquery手风琴菜单插件">推荐9个jquery手风琴菜单插件</a>
最重要的是title属性,此属性用于控制提示框出现的内容。
class=”blue”用于控制提示框的背景颜色。
当你第一次滑过该容器时,会创建如下提示框容器:
1. <a class="blue colorTipContainer" href="http://www.36ria.com/2741">推荐9个jquery手风琴菜单插件
2. <span class="colorTip" style="margin-left: -60px;">推荐9个jquery手风琴菜单插件
3.
4. <span class="pointyTipShadow"></span>
5.
6. <span class="pointyTip"></span>
7.
8. </span>
9. </a>
css部分的内容不是讲解关键,明河予以略过。
三、插件代码colortip-1.0-jquery.js
1. (function($){
2. $.fn.colorTip = function(settings){
3.
4. var defaultSettings = {
5. //颜色
6. color : 'yellow',
7. //延迟
8. timeout : 500
9. }
10. //提示框的颜色
11. var supportedColors = ['red','green','blue','white','yellow','black'];
12.
13. /* 合并默认参数和用户自定义参数 */
14. settings = $.extend(defaultSettings,settings);
15.
16. return this.each(function(){
17.
18. var elem = $(this);
19.
20. // 如果该对象不包含title属性,直接予以返回
21. if(!elem.attr('title')) return true;
22.
23. // 实例化eventScheduler(定时器)
24. var scheduleEvent = new eventScheduler();
25. //实例化Tip(提示类,产生、显示、隐藏)
26. var tip = new Tip(elem.attr('title'));
27.
28. // 产生提示框,并给提示框父容器添加样式
29.
30. elem.append(tip.generate()).addClass('colorTipContainer');
31.
32. // 检查提示框父容器是否有颜色样式
33.
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. }
42.
43. // 如果没有,使用默认的颜色
44.
45. if(!hasClass){
46. elem.addClass(settings.color);
47. }
48.
49. // 鼠标滑过提示框父容器时,显示提示框
50. // 鼠标移出,则隐藏
51.
52. elem.hover(function(){
53.
54. tip.show();
55.
56. //清理定时器
57.
58. scheduleEvent.clear();
59.
60. },function(){
61.
62. //启动定时器
63.
64. scheduleEvent.set(function(){
65. tip.hide();
66. },settings.timeout);
67.
68. });
69.
70. //删除title属性
71. elem.removeAttr('title');
72. });
73.
74. }
75.
76.
77. /*
78. / 定时器类
79. */
80.
81. function eventScheduler(){}
82.
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. }
93.
94.
95. /*
96. / 提示类
97. */
98.
99. function Tip(txt){
100. this.content = txt;
101. this.shown = false;
102. }
103.
104. Tip.prototype = {
105. generate: function(){
106. //产生提示框
107.
108. return this.tip || (this.tip = $('<span class="colorTip">'+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. }
123.
124. })(jQuery);
关键代码注释明河已经翻译了,插件的制作思路,明河将在接下来的教程详解。
四、jquery插件模板
jquery插件是有固定的模板的,你大概大部分的jquery插件源码,会发现都有一套固定模板。
模板如下:
1. (function($){
2. $.fn.插件名= function(settings){
3. //默认参数
4. var defaultSettings = {
5.
6. }
7.
8. /* 合并默认参数和用户自定义参数 */
9. settings = $.extend(defaultSettings,settings);
10.
11. return this.each(function(){
12.
13. });
14.
15. }
16.
17. })(jQuery);