Question

我在学校里经常与JS合作，但我们从未使用过图书馆。关于如何成功地将一个具有所有必要外部资源的项目添加到项目中，在线信息非常少。

我试图添加一个使用jQuery的库，在我正在处理的网站页面（from this Stack Overflow answer）内弹出一个小窗口，但无论我做什么，它并没有像它应该的那样工作。在jsFiddle上，它说库需要jquery-ui.js和jquery-ui.css，它们都链接到我的HTML文件，如下所示：

＆＃13;

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>   
<link rel="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

＆＃13;

我已将jsFiddle中的示例代码添加到我的项目中，但它不起作用。弹出窗口的内容直接显示在页面上。

＆＃13;

<button id="btnExample">open the dialog</button>
<div id="dialog" title="Test">
    <img src="image.png" />
</div>

<script>$( "#dialog" ).dialog({ autoOpen: false });
$( "#btnExample" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});</script>

＆＃13;

我错过了什么？ :(

Answer 1

您可以将库引用放在错误的位置，您应该将它们放在<head></head>部分中。在您的css参考中，您要添加rel属性的链接，该属性用于指定当前文档与链接文档/资源之间的关系，您应该添加href属性的链接。

＆＃13;

$( "#dialog" ).dialog({ autoOpen: false });
$( "#btnExample" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

<button id="btnExample">open the dialog</button>
<div id="dialog" title="Randy">
    <img src="http://icons.iconarchive.com/icons/sykonist/south-park/256/Randy-Marsh-Jamming-2-icon.png" />
</div>

＆＃13;

整个代码：

<html>

<head>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript">
    $(function() {
        $("#dialog").dialog({
            autoOpen: false
        });
        $("#btnExample").click(function() {
            $("#dialog").dialog("open");
        });
    });
    </script>
</head>

<body>
    <button id="btnExample">open the dialog</button>
    <div id="dialog" title="Randy">
        <img src="http://icons.iconarchive.com/icons/sykonist/south-park/256/Randy-Marsh-Jamming-2-icon.png" />
    </div>
</body>

</html>

如何将这个jQuery库添加到我的项目中？

1 个答案: