У меня есть страница phtml с отдельными вкладками
<div id="maintabs"> <ul id='mainTabNav'> <li><a href="#maintabs-1">Tab 1</a></li> <li><a href="#maintabs-2">Tab 2</a></li> </ul> <div id="maintabs-1"> <p><?php require_once VIEW_DIR."somewhere/tab1.phtml"; ?></p> </div> <div id="maintabs-2"> <p><?php require_once VIEW_DIR."somewhere/tab2.phtml"; ?></p> </div> </div> Каждая вкладка / страница имеет заголовок с источником js, специфичным для этой страницы.
<script src="js/tab<num>.js"></script>
На загрузке страницы загружается каждый файл javascript. Есть ли способ загрузить js для открытой вкладки? Когда открывается новая вкладка, js перезагружает только js для текущей вкладки?
Есть ли способ загрузить js для открытой вкладки?
Поскольку вы используете PHP, вам удастся передать номер текущей страницы для просмотра. Псевдо-код
View::factory('templateView') ->set('page_number', $page_number)
$page_number теперь содержит номер страницы, который можно использовать в ваших сценариях с легкостью
<script src="js/tab<?php echo $page_number; ?>.js"></script> ... <div id="maintabs"> <ul id='mainTabNav'> <li><a href="#maintabs-1">Tab 1</a></li> <li><a href="#maintabs-2">Tab 2</a></li> </ul> <div id="maintabs-".<?php echo $page_number; ?>> <p><?php require_once VIEW_DIR."somewhere/tab".<?php echo $page_number; ?>.".phtml"; ?></p> </div> </div>
Вы можете сохранять события кликов на каждой из основных вкладок, которые будут динамически загружать соответствующий javascript, используя что-то вроде jQuery.getScript() .
$('div[id^="#maintabs"]').click(function(e){ var tabno = $( this ).index(); $.getScript("js/tab"+tabno); });
Ловушка, которую я могу себе представить, заключается в том, что вы, похоже, хотите, чтобы весь предыдущий javascript был вымыт после загрузки последнего JS-файла. Я не уверен, что это выполнимо, или если у вас будут побочные эффекты.
Также это можно было бы полностью сделать с помощью ванили JS, но хорошо, экономия времени.
Не могли бы вы просто поставить это:
<script src="js/tab<num>.js"></script>
в вашем месте / вкладке * .phtml?
Используя чистый Javascript, я считаю, что это возможно, если вы загружаете страницу с помощью AJAX.
Этот учебник, http://code.tutsplus.com/tutorials/how-to-load-in-and-animate-content-with-jquery–net-26 , демонстрирует способ загрузки другой страницы (я называю их дочерними страниц) на главную страницу (которую я называю индексной страницей). Насколько я могу судить, если вы включаете связанные теги скриптов в дочерние страницы, а не на индексную страницу, то они являются динамическими, поскольку они загружаются при загрузке дочерней страницы и выгружаются при разгрузке его дочерней страницы.
Раньше я использовал модифицированную версию этого учебника в своих собственных проектах, где не создаю дочерние страницы с тем же содержимым, что и индексная страница, как показывает учебник, и вместо этого использовать весь дочерний html-файл исключительно для только дочернего содержание страницы.
Вот пример, основанный на вашем коде:
indexScript.js:
/* When index.html is loaded and ready */ $(document).ready(function() { /* Handels on-click of menu buttons */ $('#mainTabNav a').click(function(){ /* Getting the linked page */ var toLoad = $(this).attr('href'); /* Hiding content and calling loadContent function - creates animation*/ $('#contentDiv').hide('slow', loadContent); /* Injects content to contentDiv div tag */ function loadContent(){ $('#contentDiv').load(toLoad, '', showNewContent); } /* Shows contentDiv div */ function showNewContent() { $('#contentDiv').show('normal'); } demonstratePageChange(); //For testing - you can remove this /* In order to stop the browser actually navigating to the page */ return false; }); /* Initial Load - load first child page by simulation of clicking on it*/ $('#maintabs_1').click(); }); /* To demonstrate the respective JS script is loaded as needed */ function demonstratePageChange() { setTimeout(function(){ alert(testMsg); //Alerts the message from resepctive child page script }, 3000); }
index.html:
<!DOCTYPE html> <html> <head></head> <body> <div id='maintabs'> <ul id='mainTabNav'> <a id='maintabs_1' href='childA.html'><li>Tab 1</li></a> <a id='maintabs_2' href='childB.html'><li>Tab 2</li></a> </ul> </div> <div id='contentWrapper'> <div id='contentDiv'></div> </div> </body> <script type='text/javascript' src='jquery-2.1.1.min.js'></script> <script type='text/javascript' src='indexScript.js'></script> </html>
childA.html:
<div id='maintabs-1' class='contentBody'> <script type='text/javascript' src='childAScript.js'></script> Child A - Page </div>
childAScript.js:
console.log("childAScript has been loaded"); var testMsg = "This is Child A";
childB.html:
<div id='maintabs-2' class='contentBody'> <script type='text/javascript' src='childBScript.js'></script> Child B - Page </div>
childBScript.js:
console.log("childBScript has been loaded"); var testMsg = "This is Child B!!!!";
Однако есть несколько вещей, которые следует рассмотреть, используя этот метод:
Надеюсь, это поможет решить вашу проблему.
Использование AMD требует также этого. Можно использовать чистые js, хотя я предпочитаю модули AMD [ie define ()]. Для моих приложений в зависимости от действий пользователя код загружается на лету, уменьшая нагрузку. Событие onclick запускается в элементе управления tab, требующем requirejs, и скрипт загружается, и вы вызываете его. PsuedoExample:
<script type="text/javascript" src="require.js"></script> $(document).ready(function() { //Assuming using jQuery, use document.getElementById and what not otherwise $('#maintabs-1').click(function(e) { require(['/js/tabnum1.js'], function (tab1) { tab1(doStuff); }); }); }
Используйте цикл for для нескольких вкладок. Кроме того, я стараюсь сделать так много обработки [без хранения данных и проверки сервера (очевидно)] на стороне клиента.