添加jquery ui css答案

【问题标题】：Add jquery ui css添加jquery ui css
【发布时间】：2017-01-30 14:46:51
【问题描述】：

我想使用 jquery ui，但我在以下环境中缺少 css：

$.ajax({
  url: '//code.jquery.com/ui/1.12.1/jquery-ui.js',
  dataType: 'script',
  cache: true,
  success: function() {
  $( "#dialog" ).dialog();
  }
});

$( "body" ).append('<div id="dialog" title="Basic dialog"><p>test</p></div>');

相信我错过了这部分：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

如何使用 jquery ui 框架中的样式？链接：https://jqueryui.com/dialog/#default

【问题讨论】：

你为什么要那样做？您可以简单地从头部添加样式表。你的困惑很混乱
哈哈好吧，在这种情况下我不能
通过仅基于 javascript/jquery 的第三方工具插入内容
那你应该说明原因，这样你才能得到具体的答案
对不起！对不起！对不起！

标签： jquery css ajax jquery-ui

【解决方案1】：

你需要添加这个 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 到您的 <head> 标记中的 HTML 文件中。

查看文档：https://jqueryui.com/dialog/#default

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#dialog" ).dialog();
  } );
  </script>
</head>
<body>
 
<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
 
 
</body>
</html>

【讨论】：

【解决方案2】：

您可以使用appendTo() 将css 文件附加到head 标记：

$.ajax({
  url: '//code.jquery.com/ui/1.12.1/jquery-ui.js',
  dataType: 'script',
  cache: true,
  success: function() {
    $("#dialog").dialog();
    $("<link/>", {
      rel: "stylesheet",
      type: "text/css",
      href: "//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
    }).appendTo("head");
  }
});

$("body").append('<div id="dialog" title="Basic dialog"><p>test</p></div>');

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案3】：

在您的<head> </head> 标签之间定义以下代码，您可以使用 Jquery UI 的所有功能。

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

当您希望在后端和前端之间进行异步通信时，会进行 ajax 调用。请删除 ajax 调用并继续开发您的代码。谢谢

【讨论】：