(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实现冒泡提示的技巧与应用》 在网页开发中,为了提供更好的用户体验,开发者经常需要在用户与页面元素交互时显示一些提示信息。jQuery的tips功能恰好能满足这一需求,它允许我们轻松地创建出具有冒泡效果的...
2. **反馈显示**:如果验证成功,可能通过改变文字颜色、显示提示信息等方式给予用户积极反馈;反之,如果验证失败,可能会弹出错误消息或者高亮错误字段。 3. **代码结构**:压缩包中的`132677974348325802.js`很...
通过以上步骤,你可以使用jQuery实现具有文字、链接和地图锚点的Tooltip,并提供多样化的样式选择。这个过程结合了JavaScript编程、DOM操作、事件处理和CSS设计,是提高网页交互性的重要技能。在实际项目中,可以...
当用户点击搜索框时,我们可能希望显示一个提示信息,告知用户如何使用搜索功能或提供搜索建议。这通常涉及CSS样式和HTML结构。我们可以创建一个隐藏的提示元素,然后在点击事件触发时使其可见。例如: ```html 请...
这是一个提示信息">点击我 $(document).ready(function() { $('#tooltipElement').tooltip(); }); ``` 这段代码将在按钮上添加一个默认样式的Tooltip。 四、自定义样式 jQuery Tooltip允许通过CSS进行样式定制...
在本项目"jQuery CSS3实现动态提示信息条.zip"中,我们主要探讨如何利用JavaScript库jQuery结合CSS3技术创建一种动态、美观的提示信息条,适用于网页中的表单提交反馈。这种提示信息条的设计旨在提升用户体验,通过...
在今天的知识分享中,我们将探讨如何利用JQuery实现一个常见的网页交互效果:鼠标移上元素时弹出提示框,鼠标移出时提示框消失。这一交互功能在用户界面设计中非常实用,能够有效地为用户提供额外的信息或说明。 ...
在这个“jQuery鼠标悬停文字提示插件.zip”中,我们关注的是一个名为“jquery.mytooltip”的插件,它专门用于实现鼠标悬停时的文字提示功能。 首先,让我们深入理解这个插件的核心功能。jQuery.mytooltip插件允许...
本教程将详细介绍如何利用jQuery实现“鼠标滑过图片提示图片文字信息”的功能,即当用户将鼠标悬停在图片上时,会弹出一个图文并茂的提示框,显示与图片相关的文字信息。 首先,我们需要引入jQuery库。在HTML文件的...
这种特效可以应用于网站标题、按钮、提示信息等多种场景,增加网页的视觉吸引力和用户体验。通过学习和理解这个压缩包中的代码,开发者可以进一步提升自己的前端技能,尤其是对于jQuery动画和CSS3特性的运用。
标题和描述提到的“jquery输入框提示插件input输入框文字下拉提示添加标签代码”是一个关于如何利用 jQuery 和相关技术实现这种功能的方法。 这个插件的主要目的是当用户在输入框中输入文字时,提供实时的下拉提示...
在这些事件处理函数中,我们将实现文字的显示与隐藏。 以下是实现文本框获得焦点时文字消失的jQuery代码: ```javascript $searchInput.focus(function() { if ($(this).val() === '默认文字') { // 检查文本框的...
首先,从标题“jQuery制作图片标注提示信息插件”来看,我们关注的核心功能是实现图片上的标注和提示信息。这种功能在网页设计中常用于为用户提供更直观的信息,例如在地图应用中标识地点、在产品展示中解释特定细节...
本资源“jQuery实现的用户注册表单上方弹窗提示文字特效源码.zip”提供了一种利用jQuery创建用户注册表单时,用于增强用户体验的动态提示文字效果。这种效果通常用于实时验证用户输入,或者在用户完成特定操作后给予...
在某些情况下,文字提示可能无法充分传达所需信息,这时可以利用jQuery Tips插件展示图片信息。例如,当用户鼠标悬停在某个图标或按钮上时,可以弹出一个包含相关图片的提示框,以提供更直观的说明。这种功能对于...
这个“jQuery为图片添加文字提示内容.rar”压缩包包含了一个实例,展示了如何利用jQuery来实现一种常见的用户体验增强功能:图片悬停提示。这种功能在网页设计中很常见,它可以向用户提供额外的信息,而无需离开当前...
本资源包含两个使用jQuery实现的自定义警告提示框示例,这些示例具有较高的可定制性和灵活性。以下是对这两个示例的详细解读: 1. **ConfirmDemo** `confirmDemo`是一个基于jQuery的确认对话框示例。在传统的...
本资源“jquery气泡弹出提示效果.rar”似乎包含了一个使用jQuery实现的气泡提示效果,这在网页交互设计中非常常见,用于向用户提供信息或者反馈。在C#开发的Web应用中,前端的这种交互效果可以极大地提升用户体验。 ...
总之,通过jQuery实现段落文字的高亮显示提示是一项实用的功能,它能够帮助用户快速定位到页面中的关键信息,提升阅读效率。结合适当的样式设计和性能优化,这一功能可以在多种场景下发挥作用,包括搜索结果高亮、...