自定义一个jquery插件[鼠标悬浮时候,出现说明label]
2011-06-27 12:17
731 查看
自定义一个jquery插件,一个简单的jquery.js,入门的jquery插件,jquery入门实例,jquery helloworld。
最近在学习jquery,看了几天,决定做个小东西练练手。入门级的可以看看。
先看下面这个小东西有什么功能,有模有用。
功能:当你鼠标悬浮在你的html元素上面的时候,它会显示一个help说明性的label。
效果图:
原始:
a1.query
最近在学习jquery,看了几天,决定做个小东西练练手。入门级的可以看看。
先看下面这个小东西有什么功能,有模有用。
功能:当你鼠标悬浮在你的html元素上面的时候,它会显示一个help说明性的label。
效果图:
原始:
a1.query
/* * HelpTextFn * Copyright (c) 2011 yongbin zhang http://www.cnblogs.com/2814/ * Date: 2011-6-27 * 当你鼠标悬浮在你的html元素上面的时候,它会显示一个help说明性的label */ //以下代码不可以改变 //注释为代码说明 /* 想要自己定义一个jquery插件,一般的框架就是: (function ($) { $.fn.HelpTextFn = function (options) { //要改变的就是HelpTextFn,这是你的jquery函数的名称[在你的html中要调用这个函数的时候就得用到这个名称], //其他的就不需要进行改变了。 var defaults = { //var defaults{ 这里面是你的这个函数的参数的默认值 } helpText: "default help text", //你要显示label的文档 bgcolor: "red", //label的背景色 ftcolor: "yellow", //label的前景色 width: "200px", //label的宽度 tempLeft: "15", //label相对于鼠标所在位子的left值 tempTop: "15" //label相对于鼠标所在位子的top值 } var options = $.extend(defaults, options); //这句话是死的,它的意思就是说,若你在html中调用这个插件的时候,若是没有传入参数的值得话, //那么我就用defalut里面定义好的参数,否则就用你传入的参数的值,[注意]:下面若是要用到参数的话, //就得使用[options.参数名]如:options.helpText $(this).mousemove(function (e) { //添加this的mousemove事件,就是说,哪个html元素调用了我的这个插件,那么我就给他添加mousemove事件 }); $(this).mouseleave(function () { //添加this的mouseleave事件,就是说,哪个html元素调用了我的这个插件,那么我就给他添加mouseleave事件 }); }; })(jQuery); //这句是固定的 */ (function ($) { $.fn.HelpTextFn = function (options) {// var defaults = { helpText: "default help text", bgcolor: "red", ftcolor: "yellow", width: "200px", tempLeft: "15", tempTop: "15" } var options = $.extend(defaults, options); var linkDivId = $(this).attr("id"); $(this).mousemove(function (e) { if ($("#linkDiv" + linkDivId)) { $("#linkDiv" + linkDivId).remove(); } var xx = e.originalEvent.x || e.originalEvent.layerX || 0; var yy = e.originalEvent.y || e.originalEvent.layerY || 0; var left = xx + parseInt(options.tempLeft); var top = yy + parseInt(options.tempTop); $("#" + linkDivId).after("<div id='linkDiv" + linkDivId + "' style='background-color:" + options.bgcolor + ";color:" + options.ftcolor + ";width:" + options.width + ";display:none;top:" + top + "px;left:" + left + "px;position:absolute;float:left'>" + options.helpText + "</div>"); $("#linkDiv" + linkDivId).show(); }); $(this).mouseleave(function () { $("#linkDiv" + linkDivId).remove(); }); }; })(jQuery);
相关文章推荐
- 自定义一个jquery插件[鼠标悬浮时候 出现说明label]
- 自定义一个jquery插件[鼠标悬浮时候 出现说明label]
- jQuery实现鼠标悬浮在div上时候动态浮动另外一个div层盖住第一个div层
- 自定义Jquery插件——由于项目需要,对页面中过长的文本进行截取,鼠标移上去有一个title的提示,所以做了一个Jquery过长文本处理的插件
- jQuery实现的一个自定义Placeholder属性插件
- Jquery 类似新浪微博,鼠标移到头像,用浮动窗口显示用户信息,已做成一个jquery插件
- 如何创建一个自定义jQuery插件
- jquery-tips悬浮提示插件说明
- 发现一个特别小巧的jquery插件可以在选择的时候显示小图
- jQuery实现的一个自定义Placeholder属性插件
- 在指定位置上方出现通用jquery悬浮提示框插件全站通用
- 分享一个jquery插件:实现类似淘宝上鼠标经过图片右侧显示大图的效果
- 基于jQuery的的一个隔行变色,鼠标移动变色的小插件
- 使用自定义 jQuery 插件的一个选项卡Demo
- jquery--创建一个自定义 jQuery 插件
- 如何创建一个自定义jQuery插件
- jquery 插件 自定义鼠标提示效果 jquery.toolTip
- 自定义 jQuery 插件, 自己开发的一个Demo
- 使用jquery插件autocomplete时候出现typeerror:this.source is not a function即与jquery的autocomplete冲突
- 分享一个分享超酷的添加图片悬浮特效jQuery插件 - Adipoli