现在很多网站都流行DIV弹出式的对话框或是信息显示框，因为使用jQuery可以不费大力气实现这种效果，这里就向大家描述一下jQuery DIV弹出效果实现代码。下面请看本文的详细介绍。
现在很多网站都流行这种DIV弹出式的对话框或是信息显示框，很想将这个流行元素加入到自己的项目中。使用jQuery可以不费大力气实现这种效果。将其记录到我的Blog中，与业界朋友们起分享。
先上个效果图，可以点击Close按钮或是在遮罩层上任意处点击，就可以关闭DIV弹出层。
阅读全文…
项目到了后期，发现前端的提示信息不统一，解决思路如下：
1.回顾系统中tip出现的场景：表单验证提示信息、数据列表中随填随显
2.确定问题域：多条提示信息层叠、信息显示风格不统一
3.结论：找出一款合适的tip插件进行整合快速的响应项目的需要
google关键词：jquery tooltip，检索了好多tip插件，最终选择了Poshy Tip,理由如下：
1.多种不同的外观。
2.同时可以作为 Form Tooltips使用
3.可以自定义气泡出现的位置
先来一个直观的认识：
Poshy Tip tooltip jquery
详细的参数说明如下：
$.fn.poshytip.defaults = {
// 提示内容默认为元素的标题，可以使指定的字符串、元素、回调函数、jquery对象
content:'[title]',
// 指定的tips class样式
className:'tip-yellow',
//按照像素计算背景图片和显示内容的内边距
bgImageFrameSize:10,
showTimeout:500,// 延时多久开始显示
hideTimeout:100,// 延时多久开始隐藏
timeOnScreen:0,// 自动隐藏之前延时多久
//显示方式 支持'hover'鼠标划入、'focus' 获取焦点、'none'手动显式调用
showOn:'hover',
liveEvents:false,// 支持live 事件 同样可以对未来元素进行影响
alignTo:'cursor',// 和谁进行对齐 ('cursor' 鼠标, 'target' 目标元素)
// 水平方向对齐方式 可选参数：
//('right', 'center', 'left', 'inner-left', 'inner-right')
alignX:'right',
// 垂直方向对齐方式 可选参数：
//('bottom', 'center', 'top', 'inner-bottom', 'inner-top')
alignY:'top',
offsetX:-22,// 水平偏移量
offsetY:18,// 垂直方向偏移量
//hover显示方式下，允许鼠标离开元素仍然显示提示信息
allowTipHover:true,
// 提示信息随着鼠标移动 只在满足hover显示方式下，对齐方式为alignTo:'cursor' 才有效
followCursor:false,
fade:true,// 使用动画
slide:true,// 使用slie效果
slideOffset:8,// slide 动画的偏移量
// 动画显示的时间间隔 如果不想动画效果，设置为0即可
showAniDuration:300,
// 动画隐藏的时间间隔 如果不想动画效果，设置为0即可
hideAniDuration:300
};
核心方法
.poshytip('show') 手动显示tip
.poshytip('hide') 手动隐藏tip
.poshytip('update', content, [ dontOverwriteOption ] ) 手动更新tip
.poshytip('disable') tip不可用
.poshytip('enable') tip可用
.poshytip('destroy') 销毁tip
官方网址：
http://vadikom.com/tools/poshy-tip-jquery-plugin-for-stylish-tooltips/
我们做电子商务，javascript框架采用的是jQuery,在开发过程中遇到了上面标题列出的问题：如何监听div内容的变化。
先给出最终代码（后续进行相关分析）：
var title = $("b.facility");
var title = $('#title');//the element I want to monitor
title.bind('DOMNodeInserted', function(e) {
alert('element now contains: ' + $(e.target).html());
});
解决问题的思路如下：
我们先回顾一下jQuery事件中的change()方法定义和用法：
当元素的值发生改变时，会发生 change 事件。
该事件仅适用于文本域（text field），以及 textarea 和 select 元素。
change() 函数触发 change 事件，或规定当发生 change 事件时运行的函数。
注释：当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。
但是问题出现了关于div内容的改变change方法中只字不提，我们如何处理那？
后续百度关键词： jquery div 内容发生变化：无果；
继续，bing关键词：jquery how to listen div change 找到一篇相关文档http://stackoverflow.com/questions/2712124/jquery-listen-to-changes-within-a-div-and-act-accordingly
粗略的明白是采用自定义事件的方式去处理问题，采纳代码如下：
$('#laneconfigdisplay').bind('contentchanged', function() {
// do something after the div content has changed
alert('woo');
});
// 这样会调用上面的函数
$('#laneconfigdisplay').trigger('contentchanged');
但是contentchanged是什么内容没有说明，继续追溯
bing关键词：jquery how to listen div change 找到一篇相关文档
继续，bing关键词：jquery contentchanged 找到一篇相关文档http://stackoverflow.com/questions/1449666/create-a-jquery-special-event-for-content-changed
这篇文章详细说明了contentchanged内容定义，采纳代码如下：
jQuery.fn.watch = function( id, fn ) {
return this.each(function(){
var self = this;
var oldVal = self[id];
$(self).data(
'watch_timer',
setInterval(function(){
if (self[id] !== oldVal) {
fn.call(self, id, oldVal, self[id]);
oldVal = self[id];
}
}, 100)
);
});
return self;
};
jQuery.fn.unwatch = function( id ) {
return this.each(function(){
clearInterval( $(this).data('watch_timer') );
});
};
创建自定义事件
jQuery.fn.valuechange = function(fn) {
return this.bind('valuechange', fn);
};
jQuery.event.special.valuechange = {
setup: function() {
jQuery(this).watch('value', function(){
jQuery.event.handle.call(this, {type:'valuechange'});
});
},
teardown: function() {
jQuery(this).unwatch('value');
}
};
貌似这样的解决是完美的但是后续再继续查看到时候，发现有更简洁的方式，代码如下：
var title = $("b.facility");
var title = $('#title');//the element I want to monitor
title.bind('DOMNodeInserted', function(e) {
alert('element now contains: ' + $(e.target).html());
});
感觉这应该是我需要代码，do it ！fine
最新评论