想实现这样一种效果,点击控件后弹出一个窗口,窗口的位置根据控件的位置确定(比如说控件的右下方),窗口的内容根据控件传入的参数来决定
就是想日历控件那样的一个弹出窗口,只是里面的内容不是日历,要是我自己的东西;
或者说像title属性里面的东西,但是要能复制
javascript
jquery?
css
------解决方案--------------------
随便找一个tooltip插件就行了
就是个弹出层效果,tooltip效果要能复制原理也很简单,鼠标离开目标时延时隐藏tooltip层,这样鼠标就能够移动到tooltip层上,tooltip层的鼠标进入事件里面销毁setTimeout计时器,这样层就不会消失,还要写tooltip层的鼠标离开事件隐藏tooltip层
------解决方案--------------------
<style>
.tip{
position: absolute;
display:none;
border:1px solid #aaa;
background:#ffa;
padding:3px;
}
</style>
<button>tes1t</button>
<button>test2</button>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script>
$(function(){
var tip=$('<div class="tip" ></div>').appendTo('body') ;
$('button').click(function(){
var p=$(this).offset();
p.top+= $(this).height()+5;
tip.show().css(p);
tip.html( this.innerHTML );
});
$(document).mousedown(function(evt){
if($(evt.target).is(tip)) return ;
tip.hide();
})
});
</script>
------解决方案--------------------
使用jquery实现的一个思路:
1.先取到控件相对于文档的位置(也就是控件左上角在文档中的横坐标和竖坐标)。获取方法如下:
var pos=$('控件').offset();
var x=pos.left;
var y=pos.top;
//pos的值(也就是offset方法返回的值)是一个对象(包含left和top两个属性,属性值分别为控件的横、竖坐标值)
2.将弹出窗口追加到body中,然后将第一步中获取的的横、竖坐标值(x,y)赋给弹出窗口并设置为绝对定位。如下:
$('弹出').appendTo('body').css({position:'absolute',left:x,top:y})
最终的结果是弹出窗口和控件位置对齐(左上角重叠)。
如果你想窗口在上或者在下等,只需要改变x,y的值然后再赋给窗口即可。
比如,使窗口出现在右下角:
var pos=$('控件').offset();
var x=pos.left+$('控件').width();
var y=pos.top+$('控件').height();
$('弹出').appendTo('body').css({position:'absolute',left:x,top:y})