[英]Check If Jquery Ui is Rendered?
我正在使用 jquery ui(标签和手风琴)。 当页面加载时,我看到所有内容,因为选项卡/手风琴代码尚未呈现。
我想将内容隐藏到选项卡中,并且手风琴插件已将自身绑定到所有内容。
但是我不知道如何检查这个?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>accordion demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget.
Integer ut neque. Vivamus nisi metus, molestie vel, gravida in,
condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros.
Nam mi. Proin viverra leo ut odio.</p>
</div>
<h3>Section 2</h3>
<div>
<p>Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus.
Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit,
faucibus interdum tellus libero ac justo.</p>
</div>
<h3>Section 3</h3>
<div>
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus.
Quisque lobortis.Phasellus pellentesque purus in massa.</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
<script>
$( "#accordion" ).accordion();
</script>
</body>
</html>
在手风琴插件呈现为正确的手风琴之前,不要显示任何内容。
最坏的情况是你可以用 css 隐藏手风琴父级
#accordion { display: none}
并将show()
到插件初始化:
$( "#accordion" ).show().accordion();
我在 jQueryUI 选项卡上遇到了同样的问题,并以这种方式解决了它。 在正文中,在定义选项卡后,我将它们隐藏起来,如下所示。
<UL ID=TabList STYLE='list-style-type: none'>
<LI><A HREF='#tabs-1'>Page 1 </A></LI>
<LI><A HREF='#tabs-2'>Page 2</A></LI>
<LI><A HREF='#tabs-3'>Page 3</A></LI>
</UL>
<SCRIPT>
/* Hide the above section as soon as it's created, otherwise it displays briefly as a regular bulleted list before being converted into tabs. This only works here, not in the head. The section is shown after the tabs are created. */
$('#TabList').hide();
</SCRIPT>
然后我在头部脚本部分的顶部执行以下代码行,它在 document.ready 函数之前运行。 我不确定为什么,但这比将它放在 document.ready 中显示它们的行之前更能抑制未转换 UL 的简短显示。
$(function() {$('#tabs').tabs()});
然后在 document.ready 函数中显示它们。
$('#TabList').show();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.