将 Jquery 函数放在单独的文件中 - Joomla答案

【问题标题】：Putting Jquery Functions in a Separate file - Joomla将 Jquery 函数放在单独的文件中 - Joomla
【发布时间】：2014-03-18 22:16:10
【问题描述】：

我正在 Joomla 中构建网站。我一直在到处添加越来越多的小型 jQuery sn-ps，我觉得网站和模板变得杂乱无章。有没有办法将所有 jQuery 函数放在一个 .js 文件中，然后将该文件包含在 Joomla 的模板 index.php 中，最后从 Joomla 上的任何页面调用这些函数中的任何一个？

例如在模板index.php里面：

<?php
$document = JFactory::getDocument();
$document->addScript('/media/system/js/sample.js');
?>

在 sample.js 中，类似：

<script type="text/javascript">

$(document).ready(function(){
  $(".ease").slideUp(1).delay(400).slideDown(700);
});

$(document).ready(function() {
    $('.menu>li').hover(function(){
        $('.menu>li>ul').stop(true,true).slideDown(400);
    }, 
    function(){
        $('.menu>li>ul').stop(true,true).slideUp();
    });
});
</script>

在 Joomla 模块中，类似于：

<div class="ease">
<div class="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>

我只是不确定如何构建 .js 文件 - 除了 script type="text/javascript" 之外，我还需要使用其他任何东西吗？我什么时候使用 $(document).ready？等。您的所有帮助将不胜感激。

【问题讨论】：

标签： javascript php jquery templates joomla3.0

【解决方案1】：

您不需要单独的 document.ready 块，所有这些都可以在一个包装块中完成

$(document).ready(function(){
    $(".ease").slideUp(1).delay(400).slideDown(700);

    $('.menu>li').hover(function(){
        $('.menu>li>ul').stop(true,true).slideDown(400);
    }, 
    function(){
        $('.menu>li>ul').stop(true,true).slideUp();
    });
});

为了正确构建文件，我会说有一个用于核心功能的文件，更准确地说，您应该为模板、组件和模块提供单独的文件。例如：

模板

templates/my_template/js/scripts.js

组件

components/com_test1/js/script.js
components/com_test2/js/script.js
components/com_test2/js/script.js

模块

modules/mod_test1/js/script.js
modules/mod_test1/js/script.js
modules/mod_test1/js/script.js

这样事情就清楚了，哪个文件负责哪段代码。如果文件变得很大，您可以在文件本身中添加一些注释，例如：

(function($) {
    # 1. Main menu
    # 2. Accordion block home page
    # 3. Lightbox/Pop-up overlays
    # 4. Tabbed content
    # 5. Misc

    # 1. Main menu
    $('.main-menu').on('click' someFunction);

    # 2. Accordion block home page
    $('.accordion').on('click' someFunction);

    # 3. Lightbox/Pop-up overlays
    //...
})(jQuery);

【讨论】：

【解决方案2】：

好的，我意识到这就是它的完成方式。通过以下方式启动 index.php：

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
JHtml::_('jquery.framework');
$document = JFactory::getDocument();
$document->addScript(JUri::root() . 'templates/MyTemplate/mainmenu.js');
?>

在 mainmenu.js 中，使用 jQuery 而不是 $，这样它就不会与 Mootools 冲突：

jQuery(window).ready(function(){
    jQuery('.menu>li').hover(function(){
        jQuery(this).find('ul').first().stop(true,true).slideDown(400);
    }, 
    function(){
        jQuery(this).find('ul').first().stop(true,true).slideUp();
    });
});

希望这对以后的人有所帮助。

【讨论】：