自定义 JavaScript 在 Joomla 3 模板中不起作用答案

【问题标题】：Custom JavaScript not working in Joomla 3 template自定义 JavaScript 在 Joomla 3 模板中不起作用
【发布时间】：2014-08-11 20:20:30
【问题描述】：

我在 joomla 3 模板代码中包含 javascript 时遇到问题。我正在尝试使用http://9bitstudios.github.io/flexisel/ 创建滑块菜单。在只有 html 和 java 代码的 joomla 之外，菜单效果很好。但是当我尝试在 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->addScriptDeclaration 和 $document->addScript，但没有任何变化。

【问题讨论】：

标签： javascript php templates joomla

【解决方案1】：

您正在以 noConflict 模式导入 jQuery，因此请尝试更改：

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

到这里：

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

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

【讨论】：

还是不行，我什至试过 JHtml::_('jquery.framework', false);
@user3931028 - 我已经更新了答案中的代码。它在准备好文档的情况下工作得很好