如何在代码中包含一个jQuery插件
[英]How to include a jquery plugin in your code
问题描述
This may be a really dumb question but I'm having trouble including a jquery plugin in my code. 
这可能是一个很愚蠢的问题，但是我在代码中包含一个jQuery插件时遇到了麻烦。 The plugin I'm referring to is: http://davidlynch.org/projects/maphilight/docs/ 我指的插件是： http : //davidlynch.org/projects/maphilight/docs/
I want to mimic something very similar to the following: http://jsfiddle.net/keith/PVpgK/ 我想模仿与以下内容非常相似的内容： http : //jsfiddle.net/keith/PVpgK/
But when I copy the code over, I keep getting error messages saying "maphilight is not a function" 但是，当我复制代码时，我不断收到错误消息，指出“ maphilight不是函数”
How do I use a jquery plugin in my code? 如何在代码中使用jquery插件？ Thank you 谢谢
$(function() {
//using the jquery map highlight plugin:
//http://davidlynch.org/js/maphilight/docs/
//initialize highlight
$('.map').maphilight({strokeColor:'808080',strokeWidth:0,fillColor:'00cd27'});
//hover effect
$('#maplink1').mouseover(function(e) {
$('#map1').mouseover();
}).mouseout(function(e) {
$('#map1').mouseout();
}).click(function(e) { e.preventDefault(); });
// initialize tabbing
$(".tabs area:eq(0)").each(function(){
$(this).addClass("current");
});
$(".tab-content").each(function(){
$(this).children(":not(:first)").hide();
});
//map clicks
$(".tabs area").click(function(){
//This block is what creates highlighting by trigger the "alwaysOn",
var data = $(this).data('maphilight') || {};
data.alwaysOn = !data.alwaysOn;
$(this).data('maphilight', data).trigger('alwaysOn.maphilight');
//there is also "neverOn" in the docs, but not sure how to get it to work
if ($(this).hasClass("current") == false)
{
var thisTarget = $(this).attr("href");
$(this).parents(".tabs").find('area.current').removeClass('current');
$(this).addClass('current');
$(this).parents(".tabs").nextAll(".tab-content").children(":visible").fadeOut(1, function() {
$(thisTarget).fadeIn("fast");
});
}
return false;
});
});
3 个解决方案
解决方案1
0 2015-06-25 20:17:47
You need to include the link to jquery in your html header. 您需要在HTML标头中包含指向jquery的链接。
1) Download jquery from jQuery.com 1）从jQuery.com下载jquery
2) Link to downloaded file in your header 2）链接到标题中的下载文件
Like so: 像这样：
<head>
...
<script src="/path/to/jquery-1.11.3.min.js"></script>
...
</head>
解决方案2
0 2015-06-25 20:20:58
As the previous answer. 作为先前的答案。 But put them in the bottom of the body tag. 但是将它们放在body标签的底部。
<html>
<head>
</head>
<body>
<script src="../path/to/jquery-1.11.3.min.js"></script>
<script src="http://davidlynch.org/js/maphilight/jquery.maphilight.min.js"></script>
</body>
</html>
解决方案3
0 2015-06-25 20:22:28
you need to add the following to the header of your html code 您需要将以下内容添加到html代码的标题中
<script type="text/javascript" src="http://davidlynch.org/js/maphilight/jquery.maphilight.min.js">
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.