如图
想实现一个类似的效果<img src="images/button3.gif" id="morearea" />
<div id="areacollection" ">
<ul>
<li><a class="blue" href="#">湖南</a></li>
<li><a class="blue" href="#">湖北</a></li>
<li><a class="blue" href="#">广东</a></li>
<li><a class="blue" href="#">广西</a></li>
<li><a class="blue" href="#">福建</a></li>
<li><a class="blue" href="#">河南</a></li>
<li><a class="blue" href="#">河北</a></li>
<li><a class="blue" href="#">湖南</a></li>
<li><a class="blue" href="#">湖北</a></li>
<li><a class="blue" href="#">广东</a></li>
<ul>
</div>
$('#morearea').mouseover(function(){
$("#areacollection").dialog({
autoOpen:true,
show: "slide",
hide: "slide",
closeOnEscape: true,
dialogClass:'alert',
position:[$('#morearea').offset().left+$('#morearea').width(),$('#morearea').offset().top-$(window).scrollTop()],
width:210
});
$(".ui-dialog-titlebar").hide();
}).mouseleave(function(){
$("#areacollection").dialog('close');
});代码如上,结果发现当鼠标移出img的时候触发mouseleave,弹出的dialog就会隐藏。而淘宝上的效果则是可以移上去选择地区。网上搜到老外的方法是将mouseleave的触发弄到最外层的div,大致如下<div mouseover="..." mouseleave="...">
<img src="images/button3.gif" id="morearea" />
<div id="areacollection" ">....sth....</div>
</div>但老外没用jquery的dialog,所以我这里还是不行
求各位指点迷津啊
另外:大家周末愉快哈
解决方案 »
- 求助:表单中的文本输入(input)与下拉选择(select)里的文字无法水平居中
- 求一段同时显示小写与大写金额的代码
- 有用js连接的客户端数据库么
- js中 thisform.operation.value thisform.submit() thisform.range.value 都是什么意思?
- 如何把客户端数据传到服务器端
- ext4分页问题
- 寻JAVASCRIPT牛人~~~~onmouseup事件触发不了~~~
- 急!如何实现层的定时关闭,请朋友们帮忙
- 请教,这两个问题的解答??
- yahoo和新浪网站的flash不需要插件也能播放,怎么实现的?高手请指点
- iframe 跨域问题
- JQ 获取TABLE某列的和
$('#morearea').mouseover(function(){ $("#areacollection").dialog({ autoOpen:true, show: "slide", hide: "slide", closeOnEscape: true, dialogClass:'alert', position:[$('#morearea').offset().left+$('#morearea').width(),$('#morearea').offset().top-$(window).scrollTop()], width:210 }); $(".ui-dialog-titlebar").hide(); })
$(document).click(function(){ $("#areacollection").dialog('close'); });
点击后将值放入隐藏域 。
这是个很巧妙的的方法,因为当onmouseout触发后,实质性的方法并没有马上执行,而是要等待一小段时间。如果在这段时间里马上又触发了 onmouseover事件,那么基本上就可以肯定onmouseout事件的触发是因为内部元素的干扰了,所以在onmouseover事件中使用 clearTimeout来阻止延时的方法执行。 二.contains在onmouseover时先进行如下判断,结果为true时再执行方法体:
var s = e.fromElement || e.relatedTarget ;
if(!this.contains(s)){MouseOverFunc()}在onmouseout时先进行如下判断,结果为true时再执行方法体:
var s = e.toElement || e.relatedTarget ;
if(!this.contains(s)){MouseOutFunc()}
下面来解释一下上面两行代码的含义:在IE中,所有的HTML元素都有一个contains方法,它的作用是判断当前元素内部是否包含指定的元素。我们利用这个方法来判断外层元素的事件是不是因为内部元素而被触发,如果内部元素导致了不需要的事件被触发,那我们就忽略这个事件。event.fromElement指向触发onmouseover和onmouseout事件时鼠标离开的元素;event.toElement指向触发onmouseover和onmouseout事件时鼠标进入的元素。那么上面两行代码的含义就分别是:○ 当触发onmouseover事件时,判断鼠标离开的元素是否是当前元素的内部元素,如果是,忽略此事件;○ 当触发onmouseout事件时,判断鼠标进入的元素是否是当前元素的内部元素,如果是,忽略此事件;这样,内部元素就不会干扰外层元素的onmouseover和onmouseout事件了。但问题又来了,非IE的浏览器并不支持contains函数,不过既然我们已经知道了contains函数的作用,就可以自行添加如下的代码来为非IE浏览器增加contains支持:if(typeof(HTMLElement) != "undefined"){HTMLElement.prototype.contains = function(obj){ while(obj != null && typeof(obj.tagName) != "undefined") {if(obj == this)return true;obj = obj.parentNode;} return false; }; }