3

由于我对 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');
        },

    });

}

4

2 回答 2

5

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

在这里工作 jsFiddle

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

笔记：

该元素$('#employee-info-div');被分配给一个变量，以使代码更高效、更快地键入。（更高效的 b/c 只检查元素的 DOM 一次，然后从变量中检索。）

使用 jQueryhover()方法打开对话框，但单独初始化对话框（在文档准备好后）。请注意，悬停方法必须有两个与之关联的函数；第二个函数不需要做任何事情，但它必须在那里。

分配给类的 hover-IN 方法$('.employee-id')运行代码$('#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>
于 2013-09-09T20:22:26.503 回答
0

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

$("#employee-id").hover(function(){
    // call your produceDialog function here
});
于 2013-09-09T01:28:27.143 回答