本插件是沿用了JTip的素材以及设计思路进行代码重写。拓展了以下功能:
1.增加了关闭按钮或者设置自动关闭间隔时间自动关闭
2.增加了多种调用方式,可以任意定位冒泡提示位置
jQuery.simpleTips = function(source,title,content,millisec){
title = title || ' 提示↓ ';
var $source = (typeof(source)== 'object') ? $(source) : $('#'+source);
$source.css('cursor','pointer');
var suffx = $source.attr('id') ? $source.attr('id') : new Date().getTime();
var jtipId = "Tip_" + suffx;
var jtipContentId = "TipInner_" + suffx;
var closeHTML = "<a href='javascript:void(0);' onclick='$(this).parent().parent().remove();' class='tips-titlebar-close'><span class='tips-icon'></span></a>";
var thePos = $source.position();
var screenW = $(window).width();
var arrowW = 11;
var tipContentW = 200;
var showTipOnRight = (screenW - thePos.left - $source.width() - arrowW)>tipContentW;
var tipX = 0;
if(showTipOnRight){
$("body").append("<div id='" +jtipId+ "' class='Tip' style='width:"+tipContentW+"px'><div class='Tip_arrow_left'></div><div class='Tip_close_left'>"+title+closeHTML+"</div><div class='Tip_content' id='" +jtipContentId+ "'></div></div>");//right side
var arrowOffset = $source.width() + arrowW;
tipX = thePos.left + arrowOffset; //set x position
}else{
$("body").append("<div id='" +jtipId+ "' class='Tip' style='width:"+tipContentW+"px'><div class='Tip_arrow_right' style='left:"+tipContentW+"px'></div><div class='Tip_close_right'>"+title+closeHTML+"</div><div class='Tip_content' id='" +jtipContentId+ "'></div></div>");//left side
tipX = thePos.left - tipContentW - arrowW + 1; //set x position
}
$('#'+jtipId).css({left: tipX+"px", top: thePos.top+"px"});
$('#'+jtipId).fadeIn("slow");
$('#'+jtipContentId).html(content);
if(millisec)setTimeout("jTipHide('" +jtipId+ "')",millisec);
jTipHide = function(objectId){
$('#'+objectId).fadeOut("slow",function(){
$(this).remove();
});
}
};
调用方法:
<input id="userNameID" name="userName" />
//将在id为userNameID元素产生提示,3秒自动隐藏
jQuery.simpleTips('userNameID','标题','提示内容',3000);
//将在id为userNameID元素产生提示,需要主动触发关闭按钮
jQuery.simpleTips('userNameID','标题','提示内容');
var target = document.getElementById('userNameID');
jQuery.simpleTips(target,'标题','提示内容');
$(":text").bind('blur',function(){
if(!isNaN( $(this).val())){
//
jQuery.simpleTips(this,'错误提示','必须为数字',3000);
$(this).val('');
}
});
在线演示
推荐 :淘宝品牌店铺大全
分享到:
相关推荐
jQuery qtip提示框插件制作5种常用的页面浮动提示框,通过鼠标滑过或点击触发浮动提示框,类似新浪微波滑过图片异步加载ajax提示框详细信息,等多种文字和图片提示框效果。
用 jquery插件实现的 图片冒泡提示效果,动态哦。
jQuery鼠标经过冒泡对话框特效是一款基于jquery.thoughtBubble.js插件实现的。
其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用,以及各种常用的jQuery插件的使用方法和技巧,所有这些知识点都配有完整的示例(包括...
使用dialog插件弹出提示和确定信息对话框 使用jQuery UI插件以拖动方式管理相册 第9章 使用browser对象获取浏览器信息 使用boxModel对象检测是否是W3C盒子模型 使用$.each()工具函数遍历数组 使用$.each()工具...
6.5 综合案例分析—用ajax实现新闻点评即时更新 6.5.1 需求分析 6.5.2 效果界面 6.5.3 功能实现 6.5.4 代码分析 6.6 本章小结 第7章 jquery常用插件 7.1 jquery插件概述 7.2 验证插件validate 7.3...
86:事件冒泡 87:阻止冒泡 88:阻止默认行为 89:动画效果 90:slideDown 91:淡入淡出 92:幻灯片插件1 93:幻灯片插件2 94:幻灯片插件3 95:幻灯片插件4 96:时间轴插件 97:图表插件1 98:图表插件2 99:图表插件3 100:图表...
1.6 jQuery开发工具和插件 1.7 小结 第2章 jQuery选择器 2.1 jQuery选择器是什么 2.2 jQuery选择器的优势 2.3 jQuery选择器 2.3.1 基本选择器 2.3.2 层次选择器 2.3.3 过滤选择器 2.3.4 表单选择器 2.4 应用jQuery...
第1章 jQuery入门 1.1 jQuery能做什么 1.2 jQuery为什么如此出色 1.3 第一个jQuery文档 1.3.1 下载jQuery 1.3.2 设置HTML文档 1.3.3 编写jQuery代码 1.4 小结 第2章 选择符...
通常第一个比较容易满足,但是第一个在遇到事件冒泡时,搞起来也比较麻烦, 这个时候在遇到第二个需求,就很难搞定了, 做微博APP时,常常要显示人的个人信息,想吧新浪或腾讯的那个js弄过来吧,搞了半天没找见是那...
有兴趣刚需的可以自己下载,非常实用的特效代码,可以完美运行,有能力的还可以二次修改!
添加消息提示功能,冒泡提示信息 优化上传功能提示,当后端配置项没正常加载,禁用上传功能 修复单图上传按钮和jqueryValidate不兼容的问题 简化了与jqueryValidate的结合操作,具体看_examples/jqueryValidateDemo....
添加消息提示功能,冒泡提示信息 优化上传功能提示,当后端配置项没正常加载,禁用上传功能 修复单图上传按钮和jqueryValidate不兼容的问题 简化了与jqueryValidate的结合操作,具体看_examples/jqueryValidateDemo....
添加消息提示功能,冒泡提示信息 优化上传功能提示,当后端配置项没正常加载,禁用上传功能 修复单图上传按钮和jqueryValidate不兼容的问题 简化了与jqueryValidate的结合操作,具体看_examples/jqueryValidateDemo....