我还需要做啥才能插入 jQuery UI？

Posted 2023-05-08

【中文标题】我还需要做啥才能插入 jQuery UI？

【英文标题】：What else do I need to do to plug in jQuery UI?我还需要做什么才能插入 jQuery UI？

【发布时间】：2016-11-29 10:28:39

【问题描述】：

我正在使用jQuery UI tabs 构建一个页面，我看到了一些效果，但不是预期的效果。用于存储选项卡标题的 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 的期望而言，这正是人们在没有任何尝试应用 jQuery UI 的情况下所看到的。然而，调试器确实会显示添加的类，这些类是 jQuery UI 将 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 选项卡正常运行？

【问题讨论】：

你在哪里完成了你想要制表的部分的 html？ jQuery UI 选项卡需要非常特定的选项卡布局和内容才能正常工作。

是这两个CDN吗？

@jmoerdyk 我试图遵循 jQuery UI 的特定选项卡。减去一段几乎没有格式化的文本，它位于pastebin.com/PDhuFaC5。

@DulyKinsky 我试图从一个 jQuery 伞形 CDN 发出两个请求，主页位于 code.jquery.com。

为什么你的 jQuery UI css 和 js 文件来自不同的版本？您的包含路径是否正确？

【参考方案1】：

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

你是否包含了 jquery ui css？

我删除了你所有的脚本并使用了

$(document).ready(function()

  $("#tabs").tabs();
);

我包括 jquery 然后 jquery ui，和 this

jquery ui css 文件。

【讨论】：

它是块中的第二个<link>，但它引用的jQuery UI版本与js <script>不同

【参考方案2】：

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

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

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

【参考方案3】：

我认为这是因为您的脚本 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>

【参考方案4】：

看起来你有两个问题。首先，如果你粘贴的代码是准确的，说明你调用ready()方法有问题：

;(jQuery.ready(function()

    jQuery('#tabs').tabs();
()));

正如您所说，不会产生任何错误。但是，它也没有任何作用！清除多余的括号和分号，您的代码如下所示：

jQuery.ready(function()

    jQuery('#tabs').tabs();
);

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

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

jQuery(document).ready(function()

    jQuery('#tabs').tabs();
);

你会发现你的tabs() 函数被调用了。您会注意到 JD E 和 John Detlefs 将 $ 替换为 jQuery，这是常见的（实际上几乎无处不在）简写，但除此之外，他们也是如此。这是调用ready() 的常规方式。 （有两种等效的语法（您的不是其中之一），您可以阅读有关 here 的信息。）

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

选项卡小部件现在将 ui-tabs-tab 类而不是名称不一致的 ui-tab 添加到每个选项卡元素。

如果您实际上有目录结构所建议的不同版本的 .js 和 .css 文件，那么您可能会让 .js 文件应用 ui-tab 类，而 .css 文件会查找具有ui-tabs-tab。因此，除非它们具有向后兼容性，否则您将无法获得样式。在某些情况下他们没有。 （更新：查看 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 已经有一段时间了。