我需要从对象列表中生成一个表。每行仅包含每个对象的基本信息。但是,当用户将鼠标悬停在特定单元格上时,我想要一个弹出窗口,其中包含该特定对象的所有信息。也许弹出窗口应该是一个表格的形式,其中包含某种细节?我该如何做到这一点?我可以使用JQuery以及它的一些效果吗?
答案 0 :(得分:1)
我使用jQuery tooltip来做这件事。您可以使用bodyHandler选项执行Javascript来填充工具提示窗格,您可以随意设置样式。参见示例。
答案 1 :(得分:1)
是的,jQuery非常适合这类事情。
有(至少)两种方法:
预先填充和隐藏(CSS):在HTML页面上构建可见单元格内的所有弹出详细信息表,使用CSS将它们“置于”主层(并在单元格之外),并使用{ {1}},并添加display:none
,以便在光标位于主单元格时显示它们。
AJAX:将函数绑定到每个主单元格的.maincell:hover .detailtable { display:block;}
/ "mouseenter"
事件,在那里使用AJAX从服务器获取详细信息表并显示在定位{{1} },最好是在固定的地方,或者可能是光标右边的几个像素(如果它是一个小桌子)。 jQuery的"mouseleave"
函数使其变得容易(其中'inspector'是您插入详细信息表的<div>
的ID)。
答案 2 :(得分:0)
是的,你可以。您可以使用http://dev.iceburg.net/jquery/jqModal/来完成此任务。
答案 3 :(得分:0)
绑定鼠标悬停事件监听器 - 当它们悬停在预期元素上时,将调用您的回调。在回调内部,您可以访问触发事件的元素 - 在您的情况下使用td或tr - 使用适当的jquery选择器获取整行的内容。然后,您可以显示一个对话框,现在您可以在对话框中显示内容。