我还需要做些什么来插入jQuery UI

What else do I need to do to plug in jQuery UI?

本文关键字：插入 jQuery UI 做些什么      更新时间：2023-09-26

我正在使用jQuery UI选项卡构建一个页面，我看到了一些效果，但不是预期的效果。用于存储选项卡标题的UL是有线的，因此UL和选项卡内容是同一个较大DIV的一部分。控制台包含一些描述的诊断信息，但在我的代码、其他人的代码、资源加载等中没有报告错误。我检查了JavaScript/CSS的链接，它们都指向看起来像JavaScript/CSS:的真实资源

<link href='//fonts.googleapis.com/css?family=Averia+Serif+Libre:400,700,400italic,700italic' rel='stylesheet' type='text/css' />
<link href='/jquery-ui-1.12.0.custom/jquery-ui.css' />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="/javascripts/bgstretch.js"></script>

显示，就CSS的表现而言，正是在不尝试应用jQueryUI的情况下所能看到的。然而，调试器确实显示添加的类，这是jQueryUI将UL和一些DIV转换为选项卡式显示时所期望的，例如：

<a href="#living-room" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-6">Living Room</a>

原始元素未经修饰：

<a href="#living-room">Living Room</a>

我可以/应该怎么做才能使jQuery选项卡正常工作？

http://codepen.io/anon/pen/BzxbqY

你包含jquery ui css了吗？

我去掉了你所有的脚本并使用

$(document).ready(function(){
  $("#tabs").tabs();
});

我包含了jquery，然后是jquery ui这个

jquery ui css文件。

这里有一个工作版本（基于您的代码）：

https://jsfiddle.net/g3o7chw1/1/

我认为问题可能是ui主题css。当我使用常规主题cdn时，它似乎工作得很好：https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css

我认为这是因为您的脚本CDN src链接没有http协议。代替：

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

你应该有：

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

看起来有两个问题。首先，如果粘贴的代码是准确的，则在调用ready()方法时出现问题：

;(jQuery.ready(function()
{
    jQuery('#tabs').tabs();
}()));

正如你所说，这不会产生任何错误。然而，它也没有任何作用！清除多余的parens和分号，您的代码看起来像这样：

jQuery.ready(function()
{
    jQuery('#tabs').tabs();
});

现在，这里的问题是，在调用tabs()方法之前，你没有说明需要准备什么，因为你没有指定要应用ready()方法的选择器。这意味着你的tabs()方法永远不会被调用。

对于ready()方法，选择器应始终为document。因此，如果您将代码更改为：

jQuery(document).ready(function(){
{
    jQuery('#tabs').tabs();
});

你会发现你的tabs()函数被调用了。你会注意到JD E和John Detlefs用$代替了jQuery，这是一种常见的（事实上几乎无处不在的）缩写，但除此之外，他们也有这种缩写。这是调用CCD_ 11的常规方式。（这里有两个等价的语法（你的语法不是其中之一），你可以在这里阅读。）

您的第二个问题似乎是兼容性问题：您的目录结构表明您使用的是jquery-ui.jsv.1.11.4和jquery-ui.css v.1.12.0。如果是这样的话，你肯定会遇到问题，因为1.12.0实现了很多突破性的更改。看一下这份文件。在选项卡下的部分，你会发现：

选项卡小部件现在向每个选项卡元素添加ui选项卡选项卡类，而不是名称不一致的ui选项卡。

如果您的目录结构实际上建议使用不同版本的.js和.css文件，那么您可能会使用应用ui-tab类的.js文件，以及查找具有ui-tabs-tab的类的.css文件。所以你不会得到样式，除非他们向后兼容。在某些情况下他们没有。（更新：从JD E在回答中提供的链接来看，我没有看到任何关于这一变化的证据。有几处引用了ui-tab，而没有一处引用ui-tabs-tab。由于1.12.0在三周前才发布，也许这是一个有记录的变化，从未真正发生过，他们还没有时间取消文档。但如果我是你，我仍然会保持我的版本一致。）

我建议您确保jquery-ui.js和jquery-ui.css文件的版本相同。如果你不需要支持IE，我建议你使用1.12.0。如果你这样做了，那么你需要研究jQuery UI的哪些版本支持哪些版本的IE。（1.12.0放弃了对IE 10及更早版本的支持。）此外，你的jQuery.js版本目前已有三年历史，你可能会考虑升级。最新版本是3.1.0（最近发布），2.2.4已经存在了一段时间。

相关文章：