How to add this jQuery library to my project?
Question
I've worked with JS a lot in school, but we never used libraries. There's so little info online as to how to succesfully add one with all the necessary external resources to a project.
I'm trying to add a library that uses jQuery to have a small window pop-up inside the page ( http://jsfiddle.net/55DBx/1/ ) of a website I'm working on but no matter what I do, it doesn't work as it's supposed to. On jsFiddle, it says the library needs jquery-ui.js and jquery-ui.css which I've both linked to my HTML file as follows:
<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">
and I've added the sample code from jsFiddle to my project, and it doesn't work. The pop-up window's content just shows up directly on the page.
<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>
What am I missing? :(
1 answers
solution1
1 ACCPTED 2017-04-06 02:42:04
You may place the library references in wrong places, you should place them within the <head></head> section. And in your css reference, you are adding the link for rel attribute, which is used for specifies the relationship between the current document and the linked document/resource, you should add the link for href attribute.
$( "#dialog" ).dialog({ autoOpen: false }); $( "#btnExample" ).click(function() { $( "#dialog" ).dialog( "open" ); });
<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>
The entire code:
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.