JQueryUI 单选按钮示例不起作用

Posted 2023-03-06

【中文标题】JQueryUI 单选按钮示例不起作用

【英文标题】：JQueryUI Radio Button Examples Not Working

【发布时间】：2016-03-20 12:07:09

【问题描述】：

我正在尝试用漂亮的 JQueryUI 类型替换一些单选按钮。但是，当我将http://jqueryui.com/button/#radio 的示例代码（在该页面上可以看到）直接复制到“test.htm”并在同一个浏览器中打开它时，我会得到普通的、无样式的单选按钮。

“默认功能”下http://www.tutorialspoint.com/jqueryui/jqueryui_button.htm 的示例代码怎么样？在我的浏览器中，文本描述了制作一组单选按钮（即只能选择一个），但他们的示例是一组复选框（其中 0-all 可以选择）。我尝试将他们的代码粘贴到一个文件中并打开它。我得到了与他们的演示页面相同的结果：漂亮的分组复选框。将输入类型变成“收音机”会使它们不起作用；点击什么都不做。

官方的 JQueryUI 示例代码怎么会在这台计算机上无法运行，即使它在该代码出现的页面上的演示中运行？更重要的是，我需要做些什么来制作一组简单的单选按钮，其样式类似于 JQueryUI 样式*，其功能类似于普通单选按钮？

*（我可能想稍后重新着色，但这并不重要。）

浏览器是 Firefox 42。PC 位于工作防火墙后面，但显然可以很好地使用 JQueryUI 代码来显示演示页面。如果答案是内联的并且没有通过其他网站链接，那么我最容易阅读答案。

【参考方案1】：

尝试更具体地使用您用于 jQuery 资产的 URL，如下所示（以 https: 为前缀并为演示样式表提供完整路径）：

  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">

如果您检查页面并查看您的开发者控制台，您应该会看到任何未加载资源的错误。

它之前不起作用的原因是因为仅使用//path_to_file.js 正在使用所谓的“协议相对”URL。您可以使用协议相对 URL 而不是指定 HTTP 或 HTTPS，它将使用您的浏览器正在使用的任何内容。问题是，如果您在本地加载静态文件，它将使用file:// 协议，并会尝试使用file: 前缀加载您的js 和css。

【讨论】：

谢谢。我的演示代码现在可以在该示例页面中使用。我将发布一个后续问题，因为我无法让它专门在 ASP.NET 中工作。