Question

由于我对jquery不太了解，因此我无法在将鼠标悬停在复选框上时生成一个对话框。任何建议都会有所帮助。我的代码是

<input type="checkbox" id="employee-id" name="employeeId" onmouseover="produceDialog()">
<div id="employee-info-div"></div>

同样我的jquery是

produceDialog(){
     $("employee-info-div").dialog({
        open : function ( event, ui ) {

            $(".ui-dialog-titlebar-close").hide();
        },
        dialogClass : 'fixed-dialog',
        resizable : false,
        height : 150,
        width : 250,
        modal : false,
        create : function ( event ) {

            $(event.target).parent().css('position', 'fixed');
        },

    });

}

Answer 1

这可能是您正在寻找的示例：

Working jsFiddle here

下面是一个独立的例子，应该只是复制/播放。

注意：

元素$('#employee-info-div');已分配给变量，以使代码更高效和更快地输入。（更高效的b / c只为元素检查DOM一次，之后从变量检索。）

使用jQuery hover()方法打开对话框，但单独初始化对话框（文档就绪）。请注意，悬停方法必须具有与之关联的两个功能;第二个功能不需要做任何事情，但必须在那里。

分配给类$('.employee-id')的悬停IN方法运行代码$('#employee-info-div').dialog('open');，打开对话框。请注意，第二个元素是通过变量名访问的。

将以下代码复制/粘贴到您的webroot中的单独文档中并运行，或者只需使用上面的jsFiddle链接即可查看所有内容。

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />

        <style>
            #employee-info-div{
                width:40%; 
                float:right; 
                padding:5px; 
                background:wheat; 
                color:blue;
            }

        </style>

        <script type="text/javascript">
            $(document).ready(function() {

                var eid = $('#employee-info-div');
                var blurb = '<h2>Employee Information:</h2>Here is some example information about this employee. It can be text inserted like this, or it can be information retrieved from a database via AJAX. For simple AJAX examples, <a target="_blank" href="http://stackoverflow.com/questions/17973386/ajax-request-callback-using-jquery/17974843#17974843"> see this StackOverflow post </a> (remember to upvote any posts that are helpful to you, please.)';

                function hovIn() {
                    $(this).css({'font-weight':'bold','color':'blue'});
                    eid.html(blurb);
                    eid.dialog('open');
                }
                function hovOut() {
                    //eid.html(''); //<-- Causes dlg text to appear/disappear as you move mouse on/off checkbox and label
                    $(this).css({'font-weight':'normal','color':'black'});
                }

                $('.employee-id').hover(hovIn, hovOut);

                eid.dialog({
                    autoOpen:false,
                    title:"Your jQueryUI Dialog",
                    show: "fade",
                    hide: "fade",
                    width:500, //orig defaults: width: 300, height: auto
                    buttons: {
                        Ok: function() {
                            $(this).dialog('close');
                        }
                    }
                }); //END eid.dialog

            }); //END $(document).ready()

        </script>
    </head>
<body>

    Hover over below checkbox to see hidden DIV:<br><br>
    <input type="checkbox" id="employee-id" class="employee-id" name="employeeId" ><span class="employee-id">Hover over this checkbox</span>
    <div id="employee-info-div"></div>

</body>
</html>

Answer 2

您可以将悬停事件绑定到您的复选框：

$("#employee-id").hover(function(){
    // call your produceDialog function here
});

如何在通过jquery将鼠标悬停在复选框上时生成一个对话框

2 个答案: