將jquery函數放在單獨的文件中 - Joomla

我在Joomla中構建網站。我在所有地方都添加了越來越多的小型jQuery片段，並且我覺得網站和模板變得雜亂無章。有沒有辦法將所有jQuery函數放在一個.js文件中，然後將該文件包含在Joomla的模板index.php中，並最終從Joomla上的任何頁面調用這些函數？將jquery函數放在單獨的文件中 - 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文件 - 我需要使用其他任何東西，而不僅僅是腳本類型=「文本/ Java腳本」？我何時使用$（document）.ready？等你所有的幫助將不勝感激。

來源

2014-03-18 George Chanturidze

你不需要單獨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);

來源

2014-03-18 22:19:06 infinity

好吧，我意識到這是如何完成的。由開始時的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(); 
    }); 
});

希望這有助於別人的道路。

來源

2014-03-24 20:56:51

將jquery函數放在單獨的文件中 - Joomla

回答

相關問題