Javascript jQueryYesConflict
我有一个基于joomla模板的网站。我想从中添加码头 ndesign-studio.com/blog/mac/css-dock-menu 我已经为此构建了一个示例页面 代码如下:Javascript jQueryYesConflict,javascript,jquery,joomla,Javascript,Jquery,Joomla,我有一个基于joomla模板的网站。我想从中添加码头 ndesign-studio.com/blog/mac/css-dock-menu 我已经为此构建了一个示例页面 代码如下: <script type="text/javascript" src="images/eklenecek/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="images/eklenecek/interfac
<script type="text/javascript" src="images/eklenecek/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="images/eklenecek/interface.js"></script>
<script type="text/javascript">
$(document).ready(
function()
{
$("#dock").Fisheye(
{
maxWidth: 30,
items: "a",
itemsText: "span",
container: ".dock-container",
itemWidth: 30,
proximity: 100,
halign : "center"
}
)
}
);
</script>
<style type="text/css">
<!--
.dock {
position: relative;
height: 50px;
text-align: center;
}
.dock-container {
position: absolute;
height: 50px;
background: #FFFFFF;
padding-left: 20px;
}
a.dock-item {
display: block;
width: 48px;
color: #000;
position: absolute;
top: 0px;
text-align: center;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
.dock-item span {
display: none;
padding-left: 20px;
}
-->
</style>
<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="#"><img src="images/eklenecek/email.png" alt="home" /><span>E-Posta ile Gonder</span></a>
<a class="dock-item" href="#"><img src="images/eklenecek/print.png" alt="contact" /><span>Yazdir</span></a>
<a class="dock-item" href="#"><img src="images/eklenecek/fav.png" alt="portfolio" /><span>Portfolio</span></a>
<a class="dock-item" href="#"><img src="images/eklenecek/pdf.png" alt="music" /><span>Music</span></a>
<a class="dock-item" href="#"><img src="images/eklenecek/blogger.png" alt="video" /><span>Video</span></a>
<a class="dock-item" href="#"><img src="images/eklenecek/delicious.png" alt="history" /><span>History</span></a>
<a class="dock-item" href="#"><img src="images/eklenecek/digg.png" alt="calendar" /><span>Calendar</span></a>
<a class="dock-item" href="#"><img src="images/eklenecek/facebook.png" alt="rss" /><span>RSS</span></a>
<a class="dock-item" href="#"><img src="images/eklenecek/friendfeed.png" alt="rss" /><span>RSS</span></a>
<a class="dock-item" href="#"><img src="images/eklenecek/google.png" alt="rss" /><span>RSS</span></a>
<a class="dock-item" href="#"><img src="images/eklenecek/habergentr.png" alt="rss" /><span>RSS</span></a>
<a class="dock-item" href="#"><img src="images/eklenecek/myspace.png" alt="rss" /><span>RSS</span></a>
<a class="dock-item" href="#"><img src="images/eklenecek/stumbleupon.png" alt="rss" /><span>RSS</span></a>
<a class="dock-item" href="#"><img src="images/eklenecek/twitter.png" alt="rss" /><span>RSS</span></a>
<a class="dock-item" href="#"><img src="images/eklenecek/yahoo.png" alt="rss" /><span>RSS</span></a>
</div>
</div>
有什么想法吗?这与您在同一页面中加载Mootools和JQuery有很大关系,看看这个,我认为它会有所帮助 实际上,您的代码将变成:
jQuery.noConflict();
jQuery(document).ready(
function()
{
$("#dock").Fisheye(
{
maxWidth: 30,
items: "a",
itemsText: "span",
container: ".dock-container",
itemWidth: 30,
proximity: 100,
halign : "center"
}
)
}
);
您确实意识到,页面的html格式不正确,注释掉的部分以以下内容开头:
<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
我试过了,但没用。如果你看一看大代码,已经有一行写着:If(jQuery&&jQuery.noConflict)jQuery.noConflict();是的,但您的代码仍然有$(document).ready而不是jQuery(document).ready除此之外,所有javascript路径都引用根“/”作为路径的开始,而不是相对路径或引用这些文件的实际源服务器。因此,您没有加载jQuery、mooTools或其他任何东西。我知道这一点。a.html只是加载到另一台服务器的html源代码,因为我无法将其粘贴到此处。您是否尝试使用Firebug和Firefox加载页面,并查看其中控制台报告的错误?此错误是因为我仅将一个示例html从本地主机上载到另一台服务器以向您展示。我无法粘贴那么多的代码。因此,首先,只需删除启动页面的注释,使HTML成为正确的HTML,看看它是否加载,修复跨度问题,然后看看它是否工作……照目前的情况,链接中的示例HTML页面真的很乱,如果它与真实页面不匹配,则没有多大帮助。我已经找到了答案。这是因为我将interface.js放在jquery之前。非常感谢。
<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
<script type="text/javascript" >if (jQuery && jQuery.noConflict) jQuery.noConflict();</script>
<script type="text/javascript" > jQuery.noConflict();</script>