注解控件气泡提醒意义源代码

代码注释已经竭尽的详实了,也相当的少说了.
发轫测量检验暂未察觉大的BUG,总体来讲不满意的是鼠标移来移去不断触发气泡时会冒出XX为空或不是目的的标题,
就算不影响效用,但望着IE左下角的桃色警告不爽,权且不清楚怎样创新.
加了try/catch化解…
还会有正是气泡暗中同意出现在触及对象的正上方,当接触对象在边缘时,气泡会有部分冒出在窗口外面……也许这种情况能够让气泡展现在左侧或是侧面,感到也许会稍稍麻烦,就没去弄了,比较懒……
越用jquery就越喜欢用它…
bubble.js:

1.插件名cvtooltip中的cv是ChinaValue的首字母缩写,而tooltip正是提示啦。
2.适用于新职能的提示,携带顾客的唤醒,即时类音讯的唤醒,操作战败提醒(操作成功了也没人拦着)等等等,使用css实现,不附带任何图片文件。
3.脚下发觉的标题,在Chorme中表现的不给力,是由于Chrome对页面包车型地铁深入分析与IE和FF分裂,导致jquery的position只怕offset重返值差别。
4.该插件还是是演练之作,一个人之力,错误难免。

[用途:]
      
本程序能改革asp.net的验证控件的来得效果,用相比较人性化的血泡提醒来替换掉原本枯燥的分界面提示,并包含”关闭提示”的效果与利益,有效的缓慢解决了三个输入框带八个表明控件时,展现错误提示新闻不在同四个地方的劣点,也卓有功能消除了求证控件占用页面提醒音信版面包车型地铁欠缺。

气泡提示和荧光球提醒是分歧等的,要是要完成广告气球提醒(平时在系统栏弹出的唤起)需求去微软式网球址下载新的SDK技能支撑。

复制代码 代码如下:

实例演示
1.载入页面包车型大巴同时,气泡提醒也体现。请将目光移至第一段。
2.点击开关后出示气泡提示,注意,该提示不能够被关门,两秒后活动消失消失失失。
小编是链接
3.关闭气泡动作后调用闭馆函数。 再一次点本人

[成效截图:]
 

咱俩来拜谒气泡提醒是怎么着的。

/*
* @date: 2010-5-30 11:57:22
* @author: 胡灵伟
* Depends:
* jquery.js
*
* function:气泡提醒效果
* use:$(“selectors”).bubble({fn:getdata, width:width,
height:height});
* 对富有须求气泡提醒作用的靶子使用bubble方法,
* fn为气泡中呈现内容获得艺术,即fn中回到的数据会呈现在气泡中
* 以体制指代div则有:
* width\height为contents的width\height属性
* 气泡总width为left.width + contents.width + right.width
* 气泡总height为top.height + contents.height + bottom.height
*/
(function ($) {
$.fn.bubble = function (options) {
Bubble = function(){
this.defaults = {
distance : 10,
time : 250,
hideDelay : 500,
width:100,
height:100
};
this.options = $.extend(this.defaults, options);
this.hideDelayTimer = new Array();
this.shown = new Array();
this.beingShown = new Array();
this.popup = new Array();
this.trigger = new Array();
this.makebubble = function(w, h){
var tpl = $(‘<div
class=”bubble-popup”></div>’).append(‘<div
class=”topleft”></div>’).append(‘<div
class=”top”></div>’)
.append($(‘<div class=”topright”></div>’)).append(‘<div
class=”left”></div>’)
.append(‘<div class=”contents”></div>’).append(‘<div
class=”right”></div>’)
.append(‘<div class=”bottomleft”></div>’)
.append($(‘<div class=”bottom”></div>’)
.append($(‘<div class=”bottomtail”></div>’)))
.append(‘<div
class=”bottomright”></div>’).appendTo(‘body’);
tpl.find(‘.left, .right,
.contents’).each(function(){$(this).height(h)});
tpl.find(‘.top, .bottom,
.contents’).each(function(){$(this).width(w)});
return tpl;
};
this.add = function(triggers, options){
//此处的options为每趟调用add方法传进来的参数,比方钦定获取数据的格局fn,
气泡宽width高height
//console.debug(“length:”+triggers.length);
var t = this.trigger.length;
//将新步入的急需气泡提醒意义的目的放置trigger数组中
for(var j =0;j<triggers.length;j++)
this.trigger.push(triggers[j]);
//console.debug(“trigger.length:” + this.trigger.length);
var hout = this.handleout;
var hover = this.handleover;
var obj = this;
//为新插手的指标绑定鼠标监听事件
triggers.each(function(ind){
$(this).unbind(‘mouseover’).mouseover(function(){
hover(t + ind, obj, options);
}).unbind(‘mouseout’).mouseout(function(){
hout(t + ind, obj, options);
});
});
};
this.handleover = function(i, obj, options){
//console.debug(“hideDelayTimer.length:” + obj.hideDelayTimer.length);
//当新触发冒气泡事件时原先的沙漏还没得了则将原来的停车计时器清除
if (obj.hideDelayTimer[i]) clearTimeout(obj.hideDelayTimer[i]);
if (obj.beingShown[i] || obj.shown[i]) {
//假若气泡正在冒或已经冒出来了则不再重复冒气泡
return;
} else {
var trigger = $(obj.trigger[i]);
//标识正在冒气泡
obj.beingShown[i] = true;
//创设气泡
obj.popup[i] = obj.makebubble(options.width||obj.options.width,
options.height||obj.options.height);
//对于气泡绑定一样的风云以使得鼠标离开触发对象后放到气泡上时气泡不会消退
obj.popup[i].mouseover(function(){obj.handleover(i,
obj)}).mouseout(function(){obj.handleout(i, obj)});
//调用获取数据的办法fn来呈现数据
obj.options.fn(obj.trigger[i], function(data){
obj.popup[i].find(‘.contents’).text(data);
});
//设定气泡的职位和出示属性,气泡暗中认可出现在接触对象正上方
obj.popup[i].css({
top: trigger.offset().top-obj.popup[i].height(),
left: trigger.offset().left + trigger.width()/2 –
obj.popup[i].width()/2,
display: ‘block’
}).animate(
//由于万恶的IE无法而且补助PNG半透明和滤镜,所以对于IE不应用滤镜
$.browser.msie?{
top: ‘-=’ + obj.options.distance + ‘px’
}:{
top: ‘-=’ + obj.options.distance + ‘px’,
opacity: 1
}, obj.options.time, ‘swing’, function() {
obj.beingShown[i] = false;
obj.shown[i] = true;
});
}
return false;
};
this.handleout = function(i, obj, options){
//console.debug(“hideDelayTimer[“+i+”]:”+obj.hideDelayTimer[i]);
//管理当因为一些意外操作使得尚未触发鼠标步向事件而直白再一次触发鼠标离开事件时的事态
if (obj.hideDelayTimer[i]) clearTimeout(obj.hideDelayTimer[i]);
obj.hideDelayTimer[i] = setTimeout(function () {
obj.hideDelayTimer[i] = null;
try{
         obj.popup[i].animate(
$.browser.msie?{
top: ‘-=’ + obj.options.distance + ‘px’
}:{
top: ‘-=’ + obj.options.distance + ‘px’,
opacity: 0//渐隐效果
}, obj.options.time, ‘swing’, function () {
obj.shown[i] = false;
obj.popup[i].css(‘display’, ‘none’);
obj.popup[i] = null;
});}catch(e){};
}, obj.options.hideDelay);
return false;
};
};
$.bubble = new Bubble();//单例
$.bubble.add(this, options);
};
})(jQuery);

参数 panel: “body”,
//该参数是加载气泡提示的器皿,值分化或然会导致计算的职位不相同
selector: “”, //用于总括定位的控件
direction: 0, //箭头方向
width: 300, //气泡提醒宽度,完全手动设置
left: 0, //距离panel参数的左臂距
top: 0, //距离panel参数的最上端距
delay: -1, //延迟关闭,单位纳秒,值为0时期表即刻关闭
speed: 300, //关闭时的效应,淡出速度
close: true, //是或不是出示关闭按钮
callback: function() {
$.noop(); //点击关闭后的事件
}

[应用办法:]
将WinValidatorFiles文件夹copy到站点根目录,然后在
</form>之后插入如下代码:
<script type=”text/javascript”
src=”/WinValidatorFiles/js/validator.js”>
</script>

1、 写一个类传承CToolTipCtrl。

利用办法:(用到的图纸样式img.zip,注意路线,没图片是很掉价的…)

用法和源码 那个就不贴了,查看下页面源文件就行呐,在JS中也写得灰常清楚鸟,或然猛点这里下载。

[注意:]
       1.
本程序在asp.net2.0,IE6、Firefox2下通过,但不保证能适应全数浏览器。
       2.
在利用验证控件时,请将表达控件的Display属性设为Static(默感到Static)。
       3.
路线都以从根路线始于,所以地方测验时请设置为网址,并不是虚构目录。
       4.
本程序的规律是覆盖掉.net框架中自带的ValidatorUpdateDisplay函数,所以引进的代码必须要在她自个儿生成的<script
src=”/WebResource.axd代码段之后。

2、 在类中加多下列方法

复制代码 代码如下:

皮奈斯 体现气泡提醒的前提是,一定会有三个被唤醒的对象,默许的地方是依靠body来计量的,那样的破绽正是一旦页面内容暴发了转变,而气泡的任务并未有改观,导致提醒目标失利。
本着此情景,提供了selector参数来保管气泡随着该选取器控件的职位变动而发生改动。
js文件打包下载
原稿地址

[版权相关:]
      
招待大家使用和转发本程序,但是为了强调小编的劳动成果,请转载时决不将小编的交流消息去掉;也招待我们依照这一个思路创制出越来越好的认证提醒意义,同时也请将修改后的次序发一份给作者自身,款待调换,共同升高。此气泡特效参谋了青古铜色理想中的代码,在此对其表示谢谢。

BOOL AddTool(UINT nID,LPCTSTR
Text)

<style type=”text/css” media=”screen”>
<!–
* {
margin: 0;
padding: 0;
}
body {
padding: 10px;
}
h1 {
margin: 14px 0;
font-family: ‘Trebuchet MS’, Helvetica;
}
.bubbletrigger {
}
/* Bubble pop-up */
.bubble-popup {
position: absolute;
display: none;
z-index: 50;
border-collapse: collapse;
}
.bubble-popup .topleft {width:19px;
height:15px;float:left;background-image:
url(../images/bubble/bubble-1.png);}
.bubble-popup .top { width:1px;height:15px;float:left;background-image:
url(../images/bubble/bubble-2.png); }
.bubble-popup .topright { width:19px;
height:15px;float:left;background-image:
url(../images/bubble/bubble-3.png); }
.bubble-popup .left { clear:left;width:19px;
height:1px;float:left;background-image:
url(../images/bubble/bubble-4.png); }
.bubble-popup .contents {
white-space:normal;
word-break:break-all;
float:left;
font-size: 12px;
line-height: 1.2em;
background-color: #fff;
color: #666;
font-family: “Lucida Grande”, “Lucida Sans Unicode”, “Lucida Sans”,
sans-serif;
}
.bubble-popup .right { width:19px;
height:1px;float:left;background-image:
url(../images/bubble/bubble-5.png); }
.bubble-popup .bottomleft { clear:left;width:19px;
height:15px;float:left;background-image:
url(../images/bubble/bubble-6.png); }
.bubble-popup .bottom
{width:1px;height:15px;float:left;background-image:
url(../images/bubble/bubble-7.png); text-align: center;}
.bubble-popup .bottomtail { width:30px; height:29px; display: block;
margin: 0 auto; background-image:
url(../images/bubble/bubble-tail2.png);}
.bubble-popup .bottomright { width:19px;
height:15px;float:left;background-image:
url(../images/bubble/bubble-8.png); }
–>
</style>
<script src=”../js/jquery-1.4.2.min.js”
type=”text/javascript”></script>
<script src=”../js/bubble-1.0.js”
type=”text/javascript”></script>
<script type=”text/javascript”><!–
aa = function(obj, callback){
$.ajax({
type : ‘POST’,
data : {word:$(obj).attr(‘alt’),rand:Math.random()},
url : ”,
dataType : ‘text’,
timeout : 1000,
success : function(data){
callback(data);
}
});
};
bb = function(obj, callback){
$.ajax({
type : ‘POST’,
data : {word:$(obj).attr(‘alt’),rand:Math.random()},
url : ”,
dataType : ‘text’,
timeout : 1000,
success : function(data){
callback(data + “aaaa”);
}
});
};
$(function(){
$(‘.bubbletrigger’).bubble({width:150, height: 100, fn:aa});
$(‘#a’).bubble({fn:bb});
});
//
–></script>
</head>
<body id=”page”>
<h1>jQuery Bubble Example</h1>
<div>
<br/>aaaaaaaaaa
<br/>aaaaaaaaaaaaaaaaaaaa
<br/>aaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br/>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br/>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br/>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div style=”padding-left:100px;”>
<img class=”bubbletrigger” alt=”a”
src=”../images/bubble/starburst.gif” />
<img class=”bubbletrigger” alt=”b”
src=”../images/bubble/starburst.gif” />
<img class=”bubbletrigger” alt=”c”
src=”../images/bubble/starburst.gif” />
<img class=”bubbletrigger” alt=”d”
src=”../images/bubble/starburst.gif” />
<img id=”a” alt=”e” src=”../images/bubble/starburst.gif” />
</div>
</body>

你大概感兴趣的篇章:

  • D3.js达成散点图和气泡图的法门详解
  • 纯JS代码实现气泡效果
  • javascript兑现很肉麻的血泡冒出特效
  • JavaScript落到实处鼠标滑过处生成气泡的法子
  • js由下向上不断升起冒气泡效果实例
  • Jquery插件分享之气泡形提示控件grumble.js
  • JS+CSS完毕一个气泡提示框
  • js 模拟气泡屏保功效代码
  • 选拔JS完毕气泡跟随鼠标移动的卡通片效果

{

servlet只要回到一段字符串就能够了,就不贴了.

       TOOLINFO
ti;

.
初阶测量试验暂未察觉大的BUG,总体来讲不乐意的是鼠标移来移去不断触发气泡时会现出XX为空或不是…

      
memset(&ti,0,sizeof(TOOLINFO));

      
ti.cbSize=sizeof(TOOLINFO);

      
ti.hwnd=this->GetOwner()->GetSafeHwnd();

      
ti.uFlags=TTF_IDISHWND|TTF_SUBCLASS;

      
ti.uId=(UINT)GetParent()->GetDlgItem(nID)->m_hWnd;

      
ti.lpszText=(LPSTR)Text;

       return
(BOOL)SendMessage(TTM_ADDTOOL,0,(LPARAM)&ti);

}

参数nID为要增添气泡的控件ID,Text即为文本内容。

3、 先在头文件处声雅培个新创立的类的变量TextArea

4、 然后在在对话框OnInitDialog()中增多如下代码

TextArea.Creat(this);

//上面那句就是给控件增多气泡提醒

TextArea.AddTool(ControlID,”This is an
TextArea example”);

结果如下:

图片 1

 

from:

发表评论

电子邮件地址不会被公开。 必填项已用*标注