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

Question

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

use*_*234 3 html jquery jquery-ui javascript-events

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

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

Run Code Online (Sandbox Code Playgroud)

同样我的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');
        },

    });

Run Code Online (Sandbox Code Playgroud)

}

Answer 1

css*_*hus 5

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

在这里工作jsFiddle

下面是一个独立的例子,它应该只是复制/播放.

笔记:

该元素$('#employee-info-div');已分配给变量,以使代码更有效,更快速地输入.(更高效的b/c只检查元素的DOM一次,之后从变量检索.)

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

分配给该类的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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，4 月前
查看次数：	9656 次
最近记录：	12 年，4 月前