制作jquery文字提示插件—jquery插件实战教程(1)
很多朋友向明河请教如何写jquery插件,今天在浏览tutorialzine时候有篇教程讲解如何写个jquery文字提示插件,这插件很简单,很适合用于讲解jquery插件机制,明河也借此抛砖引玉先讲解具体一个插件,这个插件名为:Colortip,然后在下篇教程讲解jquery插件机制。
效果如下图,鼠标滑过链接出现文字提示,提示框的背景颜色可以自由控制。
制作教程
一、功能讲解
- 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的插件机制。(转载)
查看更多,请参阅 个人工作站:在这里网-前端技术博客