Javascript 在 Joomla 文章中不起作用

Question

我正在尝试将这个 (dannyvankooten dot com/jquery-plugins/mapz/) 图像平移脚本实现到 Joomla 文章中。我在 Joomla (http://tylypahka.tk/karttatesting/) 之外对其进行了测试，它运行良好。但是，当我在 Joomla 文章中尝试时，平移不起作用 (http://tylypahka.tk/kartta)。

我将与测试版相同的代码放入 Joomla 模板的头部：

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
<script src="https://jquery-ui.googlecode.com/svn-history/r2596/branches/dev/spinner/external/mousewheel/jquery.mousewheel.min.js" type="text/javascript" ></script>
<script src="http://tylypahka.tk/js/jquery.mapz.js" type="text/javascript"></script>
<script type="text/javascript" src="http://tylypahka.tk/js/jquery.maphilight.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("#map").mapz({
    zoom : true,
    createmaps : true,
    mousewheel : true
  });
});
</script>
<script type="text/javascript">$(function() {
        $('.map').maphilight();
        $('#squidheadlink').mouseover(function(e) {
            $('#squidhead').mouseover();
        }).mouseout(function(e) {
            $('#squidhead').mouseout();
        }).click(function(e) { e.preventDefault(); });
    });</script>
<style>
.map-viewport{ position:relative; width:860px; height:883px; overflow:hidden; background-color:black;}
.level{ position:absolute; left:0; top:0; z-index:10;}
.current-level{ z-index:20; }
#map{ width:1297px; height:883px; position:absolute; left:0; top:0; cursor:move;}
</style>

与文章相同的代码：

<div class="map-viewport">
  <div id="map">
    <img src="http://img42.imageshack.us/img42/8954/tylypahkanportit.png" width="1297" height="883" usemap="#html-map" class="current-level level map" />
  </div>
  <map name="html-map">
    <area id="squidhead" shape="rect" coords="311,494,434,634" href="http://www.image-maps.com/" alt="" title=""/>
  </map>
</div>

jQuery 会自动加载到 Joomla 网站中，所以这应该不是问题。有什么想法我在这里做错了吗？

我们将不胜感激所有建议和帮助！

Answer 1

您正在使用 $ ，它是 jQuery 的简写代码，但 Joomla 也加载了 mootools，它被分配了相同的选择器：因此只需将所有 $() 更改为 jquery() ，您应该可以正常工作。您只需要在外部级别执行此操作，然后将 $ 作为参数传递：

jQuery(function($){
  // inside this handler you can use the $ since you passed it as a parameter to the function:
  // btw, this is nicer than jQuery(document).ready...
  $('#someid').show();
}); 

Answer 2

最好使用 Joomla 编码标准将代码包含在您的脑海中，同时检查它是否尚未导入，因为这会导致冲突。

所以，首先，下载Sourcerer，它可以让你在你的文章中添加代码。

然后，使用 Sourcerer 添加以下内容：

$document = JFactory::getDocument();
if(!JFactory::getApplication()->get('jqueryui')){
     JFactory::getApplication()->set('jqueryui',true);
     $document->addScript("https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js");
}
$document->addScript("https://jquery-ui.googlecode.com/svn-history/r2596/branches/dev/spinner/external/mousewheel/jquery.mousewheel.min.js");
$document->addScript("http://tylypahka.tk/js/jquery.mapz.js");
$document->addScript("http://tylypahka.tk/js/jquery.maphilight.js");
$document->addScriptDeclaration('
$(document).ready(function() {
  $("#map").mapz({
    zoom : true,
    createmaps : true,
    mousewheel : true
  });
});
');
$document->addScriptDeclaration('
$(function() {
        $('.map').maphilight();
        $('#squidheadlink').mouseover(function(e) {
            $('#squidhead').mouseover();
        }).mouseout(function(e) {
            $('#squidhead').mouseout();
        }).click(function(e) { e.preventDefault(); });
    });
');

$document->addStyleDeclaration(.map-viewport { position:relative; width:860px; height:883px; overflow:hidden; background-color:black;}
.level{ position:absolute; left:0; top:0; z-index:10;}
.current-level{ z-index:20; }
#map{ width:1297px; height:883px; position:absolute; left:0; top:0; cursor:move;});

希望这有效并有所帮助