вкладок JQuery UI пример - открытие новой вкладки = добавив уникальный скрипт для каждой вкладки

Question

Это JQuery вкладки Сценарий: http://jqueryui.com/demos/tabs/#manipulation

 var $tabs = $("#tabs").tabs({ 
      tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>", 
      add: function(event, ui) { 
       var tab_content = $tab_content_input.val() || "Tab " + tab_counter + " content."; 
       $(ui.panel).append("<p>" + tab_content + "</p>"); 
      } 
     }); 

// rest of script 

Итак, что мне нужно? Мне нужно, чтобы скрипт будет устанавливать (с другим контентом) в строке var tab_content =. Обычно (в скрипте со статическими вкладками) мой собственный скрипт загружается в нижней части страницы (я создал несколько экземпляров того же скрипта, как (founction (script1), founciton (script2) и 2 divs с идентификатором script1 и script2), после того, как все HTML-код, но в данном случае я не знаю, как это сделать, мне нужно, чтобы скрипт быть уникальным для каждой вкладки

Answer 1

Предположим, что основной HTML выглядит следующим образом:..

<div id="tabs"> 
    <ul> 
    <li><a name="my_id" href="/watman">Hey</a></li> 
    <li><a name="test_it" href="/brown-chicken-brown-cow">Hey2</a></li> 
    </ul> 
</div> 

Вот что я использовал в такой ситуации. В глобальный сценарий Я определяю переменные

var _SCRIPT = {}; 
var _CURRENT_TAB = '#ui-tabs-1'; 
var _CURRENT_TAB_NAME = 'my_id'; 

Теперь для каждой вкладки я загружаю скрипт в начало главного вида (после глобального скрипта). Сценарии я загружаю выглядеть следующим образом:

_SCRIPT['my_id'] = { 
    tab: null, 
    init: function() { 
    this.tab = _CURRENT_TAB; 
    // initialize script 
    }, 
    // some other fields 
} 

где my_id это имя, которое будет связано с закладкой я собираюсь загрузить. Затем я генерировать вкладки с моей основной JavaScript, как это:

$('#tabs').tabs({ 
    // some other options 
    ajaxOptions: { 
    cache: false, 
    complete: function() { 
     _SCRIPT[_CURRENT_TAB_NAME].init(); 
    }, 
    }, 
    select: function(event, ui) { 
    _CURRENT_TAB = $(ui.tab).attr('href'); 
    _CURRENT_TAB_NAME = $(ui.tab).attr('name'); 
    }, 
    cache: true, 
}); 

Теперь каждый HTML, который идет внутри вкладки, скажем my_id можно получить с помощью JQuery, как этот (код из функции _SCRIPT['my_id'].init или любой другой функции внутри _SCRIPT['my_id']):

console.log($('a', this.tab)); 

Обратите внимание, что это вернет элементы только внутри поля my_id.

Боковое примечание 1: Я не рекомендую вставлять теги скриптов через ajax. Трудно отлаживать, и вы можете легко потерять контроль над «пространствами имен». Также вы будете иметь проблемы, когда вы перезагружаете вкладку.

Боковое примечание 2: будьте осторожны при определении атрибута id на элементах в вкладках. Имейте в виду, что они должны быть уникальными в HTML-документе.