[英]making dropdown menu with jQuery
I'm having a problem getting a dropdown image menu to display properly in my browser. 我在获取下拉图像菜单以在浏览器中正确显示时遇到问题。 The code is as follows
代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery test</title>
<style>
#webmenu{
width:340px;
}
</style>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() { // makes sure the whole site is loaded
$("body select").msDropDown();
})
</script>
<select name="webmenu" id="webmenu">
<option value="calendar" title="http://www.abe.co.nz/edit/image_cache/Hamach_300x60c0.JPG"></option>
<option value="shopping_cart" title="http://www.nationaldirectory.com.au/sites/itchnomore/thumbs/screenshot2013-01-23at12.05.50pm_300_60.png"></option>
<option value="cd" title="http://www.mitenterpriseforum.co.uk/wp-content/uploads/2013/01/MIT_EF_logo_300x60.jpg"></option>
</select>
</body>
</html>
I found the original code on github at http://jsfiddle.net/GHzfD/357/ but have not been able to reproduce it - am I making some kind of fundamental mistake? 我在github上的http://jsfiddle.net/GHzfD/357/上找到了原始代码,但无法复制它-我犯了某种基本错误吗?
The page is live at http://www.datatrouble.com/jquery_test.html 该页面位于http://www.datatrouble.com/jquery_test.html上
Missing msdropdown
plugins 缺少
msdropdown
插件
msdropdown and css msdropdown和CSS
Include this code befor you call msdropdown
在调用
msdropdown
之前包含此代码
<link rel="stylesheet" href="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/css/msdropdown/dd.css">
<script src="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/js/msdropdown/jquery.dd.min.js"></script>
in jsFiddle these external links are included too on the left panel here is snapshot . 在jsFiddle中,这些外部链接也包含在左侧面板中,这是快照。
Also read What is the difference between $(window).load and $(document).ready? 还请阅读$(window).load和$(document).ready有什么区别?
Update after OP's comment OP发表评论后更新
You are placing msdropdown
plugin before you have included jQuery file . 您要在包含jQuery文件之前放置
msdropdown
插件。
msdropdown
is a jQuery plugin so jQuery file must be added before the plugin script is called. msdropdown
是一个jQuery插件,因此必须在调用插件脚本之前添加jQuery文件。
So it should look like this: 所以它应该看起来像这样:
put your scripts
at bottom
of the page and css
at the top
to improve page load speed. 将
scripts
放在页面bottom
,将css
放在top
以提高页面加载速度。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/js/msdropdown/jquery.dd.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("body select").msDropDown();
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.