gpt4 book ai didi

html - 你如何通过 jQuery 在将鼠标悬停在复选框上时生成对话框

转载 作者:搜寻专家 更新时间:2023-10-31 23:05:48 24 4
gpt4 key购买 nike

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

});

最佳答案

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

Working jsFiddle here

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

注意事项:

$('#employee-info-div'); 元素被分配给一个变量,以提高代码输入速度。 (更高效的 b/c 只检查元素的 DOM 一次,之后从变量中检索。)

使用 jQuery hover() 方法打开对话框,但单独初始化对话框(在文档准备好后)。请注意,悬停方法必须有两个相关联的函数;第二个函数不需要做任何事情,但它必须存在。

分配给类 $('.employee-id') 的 hover-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>

关于html - 你如何通过 jQuery 在将鼠标悬停在复选框上时生成对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18690355/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com