自定义JavaScript无法在Joomla 3模板中使用

时间:2014-08-11 20:20:30

标签: javascript php templates joomla

我在joomla 3模板代码中包含javascript有问题。我正在尝试使用http://9bitstudios.github.io/flexisel/创建滑块菜单。在joomla之外只有html和java代码,菜单效果很好。但是当我尝试实现joomla模板时,我无法使其正常工作。

我的模板代码:

<?php 
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 
   xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
    <jdoc:include type="head" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/reset.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/style.css" type="text/css" />



    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/flexisel.css" type="text/css" />
    <?php
    JHtml::_('jquery.framework');
    ?>
    <script type="text/javascript" src="templates/<?php echo $this->template ?>/js/jquery.flexisel.js"></script>
    <script type="text/javascript" charset="utf-8">
        $(window).load(function() {
            $("#flexiselDemo1").flexisel();
        });
    </script>




</head>
<body>

    <div id="page">
        <div id="head">
            <a href="http://www.vossp.cz" class="logo">VOSSP</a>
        </div>
        <div id="main-menu">
            <jdoc:include type="modules" name="main-menu" /> 
        </div>
        <div id="footer">
        </div>
    </div>

</body>
</html>

我尝试使用来自http://docs.joomla.org/Adding_JavaScript的$ document-&gt; addScriptDeclaration和$ document-&gt; addScript,但没有变化。

1 个答案:

答案 0 :(得分:0)

您正在以noConflict模式导入jQuery,因此请尝试更改此内容:

$(window).load(function() {
    $("#flexiselDemo1").flexisel();
});

到此:

jQuery(document).ready(function($) {
    $("#flexiselDemo1").flexisel();
});

注意:请回到使用JHtml::_('jquery.framework');