选择Jquery UI对话框项

时间:2012-12-10 20:45:06

标签: jquery-ui-dialog

我在http://jsfiddle.net/xBJeV/6/添加了我的代码跟踪。 我需要一些帮助 1.在对话框中选择没有消失对话框的值。 2.当鼠标离开div时,应关闭对话框。

提前致谢

<div class="editionDetailAction">Action for Item 1</div>
<div class="editionDetailAction">Action for Item 2</div>
<div class="editionDetailAction">Action for Item 3</div>
<div class="editionDetailAction">Action for Item 4</div>



<div id="actionsPopup">
    <ul><li><a href="http://www.google.com">Add xyz</a></li></ul>
    <ul><li>Manage xyz</li></ul>
    <ul><li>Show xyz</li></ul>
</div>

jquery代码

$(document).ready(function () {
    $('.editionDetailAction').click(function (e) {
        $("#actionsPopup").dialog("option", { position: [e.pageX+5, e.pageY+5] });
    });

    $("#actionsPopup").dialog({
            autoOpen: false,  
dialogClass: 'actionsPopup',
        maxWidth:100,
                    maxHeight: 100,
                    width: 200,
        height: 80,
resizable: false,


    });
    $(".editionDetailAction").bind("click", function () {
        $("#actionsPopup").dialog('open'); 
    });
    $(".editionDetailAction").bind("mouseleave", function () {
        $("#actionsPopup").dialog('close'); 
    });

   });

我的css

.editionDetailAction { width: 150px; height: 30px; border: solid 1px #ddd; }
.actionsPopup .ui-dialog-titlebar { display:none; }

1 个答案:

答案 0 :(得分:0)

感谢您的时间...... 我添加了下面的代码,它为我工作。只想发布解决方案,以便其他人可以从类似的问题中获益....

$(".actionsPopup").bind("mouseover", function () {
        $("#actionsPopup").dialog('open');
    });