Question

我正在Joomla建站点。我一直在添加越来越多的小jQuery片段，我觉得网站和模板变得杂乱无章。有没有办法将所有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文件 - 我是否需要使用除脚本类型之外的任何其他内容=＆＃34; text / javascript＆＃34;？我什么时候使用$（document）.ready？所有的帮助将不胜感激。

Answer 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);

Answer 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();
    });
});

希望这可以帮助有人继续前进。

将Jquery函数放在一个单独的文件中 - Joomla

2 个答案: