(function($){
$.fn.extend({
plugins_tip:function(){
return this.each(function(){
var self = this;
//获取个性化的位置、宽度
var options={_tip_left:$(self).attr("tipLeft"),_tip_top:$(self).attr("tipTop"),_tip_width:$(self).attr("tipWidth")};
var settings = {_tip_left:10,_tip_top:10,_tip_width:200};//默认值
$.extend(settings, options);
$(self).css("cursor","default");
var _s={
_init:function(){
this._event();
},
_g:{_wrap:$()},
_html:function(){
var html = [
"<div class='plugins_tip_wrap'>"
,"<div class='plugins_tip_arrow'></div>"
,"<div class='plugins_tip_content'></div>"
,"</div>"
].join("");
$("body").append(html);
_s._g._wrap=$(".plugins_tip_wrap");
$(".plugins_tip_content",_s._g._wrap).html($(self).attr("otitle"));
if(_s._g._wrap.width()>settings._tip_width){_s._g._wrap.width(settings._tip_width)};
},
_event:function(){
$(self).hover(function(event){
_s._html();
_s._fn._set_position(event);
_s._g._wrap.show();
},function(){
_s._g._wrap.hide();
_s._g._wrap.remove();
});
$(self).mousemove(function(event){
_s._fn._set_position(event);
})
},
_fn:{
_set_position:function(e){
var _x = e.pageX+parseInt(settings._tip_left);
var _y = e.pageY+parseInt(settings._tip_top);
_s._g._wrap.css( {left : _x , top : _y } );
}
}
}
_s._init();
})
}
})
$(function(){
function tipbind(){
//防止重复绑定
if(window.plugins_tip) return;
$("a[otitle]").plugins_tip();
window.plugins_tip={};
};
tipbind();
})
})(jQuery)
/*
.plugins_tip_wrap{ position:absolute; display:none; font-size:12px; line-height:18px; color:#18508e;opacity:0.7;filter:alpha(opacity=70);border-right:2px solid #ccc; border-bottom:2px solid #ccc}
.plugins_tip_arrow{ position:absolute; top:0px; left:0px; width:0px; height:30px;}
.plugins_tip_content{ padding:4px 6px; background:#dce8f2;}
*/
分享到:
相关推荐
jquery输入框提示插件input输入框文字下拉提示添加标签代码
jquery,tips,冒泡,jquery,tips,冒泡
jquery实现input搜索输入关键词后自动筛选相关信息效果
jQuery qtip提示框插件制作5种常用的页面浮动提示框,通过鼠标滑过或点击触发浮动提示框,类似新浪微波滑过图片异步加载ajax提示框详细信息,等多种文字和图片提示框效果。
Jquery实现关键字标签生成插件功能Enter或Tab或失去焦点确定标签输入完毕,双击文字可以编辑该标签,单击叉叉(×)表示删除该标签 1、一开始初始化标签输入框的数量 2、容器可接受最大的标签数量 3、每个标签...
实现效果: jQuery Tooltips悬停文字提示框效果,基于jQuery插件,可自定义显示位置,很不错的信息提示插件特效
鼠标移动到图片上后,弹出图文并茂提示效果
jQuery表单输入框标签插件jQuery FormLabels jQuery插件字数统计 jQuery垂直滚动新闻效果插件jQuery jCarouse jQuery可伸缩的反馈表单插件Contactable ...基于jQuery实现的大号的banner图片切换效果
本文实例讲述了jQuery实现信息提示框效果。分享给大家供大家参考。具体如下: 一个jquery提示框特效,黑色风可,...jQuery实现的非常人性化的提示信息框效果</title> <script type="text/javascript" src="jqu
4.jQuery实现支付宝隐藏层提示信息内容的功能 5.jquery实现鼠标划过网址名称显示网站截图功能 6.jQuery带Tips动画提示通用表单验证插件下载(jquery validate),动画效果漂亮 7.jQuery鼠标移到下载地址滑出气泡...
摘要:脚本资源,jQuery,浮动框 jQuery实现的适用于图片、链接的浮动提示信息框,鼠标移上去后,会显示一个浮动的层,这个层可用于提示图片和文字信息,比较不错。希望大家喜欢。
其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用,以及各种常用的jQuery插件的使用方法和技巧...
实现效果: jQuery带页面跳转的确认提示框,点击上面的几个文字标签,从而给出提示信息,非常适用于网站表单的验证,例如登录与注册。php中文网推荐下载!
我们在登录网站的时候,文本框中经常会有提示你输入的信息,当你点击文本框,提示信息自动消失,当文本框什么都没有,而且失去焦点的时候,又有了提示文字。 1.原型开发,先做一个简单的: 我们首先需要一个html文件...
让提示信息显示后自动消失的方法有很多,在本文为大家介绍下使用jquery是如何做到的,感兴趣朋友可以参考下
主要介绍了jquery+ajax+text文本框实现智能提示的方法,涉及jQuery基于ajax交互实现后台数据的动态查询与文本提示信息的显示功能,需要的朋友可以参考下
第一种:文字提示(showword模式);第二种:弹出窗口提示(showalert模式) 支持多个校验组。如果一个页面有多个提交按钮,分别做不同得提交,提交前要做不同的校验,所以你得用到校验组的功能。 支持4种状态的信息...
摘要:脚本资源,jQuery,动态提示插件 jquery.notice.js 动态提示信息插件,鼠标点击文字,上方会淡出一个提示框效果,很漂亮的提示框,过一会会自动消失,这是使用jquery.notice.js提示框插件实现的效果,本代码可...