Как вы можете использовать метод загрузки вкладок jquery для загрузки нескольких вкладок

Question

Насколько мне известно, метод загрузки вкладок jQuery обрабатывает только один индекс вкладок, как показано ниже:

.tabs( "load" , index )

Попытка нескольких вызовов подряд отменяет только более ранние вызовы, т. Е .:

.tabs ("load", 2)

.tabs ("load", 3)

Загрузка tabindex 2 отменяется последующей загрузкой tabindex 3.

Как вы можете вызвать метод загрузки без отмены более ранних вызовов более поздними вызовами?

Answer 1

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

$("#nameOfMyTabsList").tabs("add", "#href-to-my-element"+some_unique_string, "This Is The Link Text!");

Это создаст вкладку и div с идентификатором:

<div id="href-to-my-element">
  //this is where my text is.
</div>

Аякс:

$.ajax({
 url: 'location/to/my/file.php',
 data: 'data='+myDataVar,
 success: function(data){
   $("#nameOfMyTabsList").tabs("add", "#href-to-my-element"+some_unique_string, "This Is The Link Text!");
   $("#href-to-my-element"+some_unique_string).html(data);
 }
});

Хорошо ... мы почти у цели, но как мне создать уникальные динамические элементы? Ну что ж, поехали:

$("#whatever").click(function(){
  //I had a list of elements, each one had it's own unique name, so I created a variable from my links text when I click.
  var ourTabName = $(this).text;
  //I did some regexp and replacing of unwanted values so there wasn't issues with &, -, and / operators
  var cleanTabName = ourTabName(//do regexp);
  //the data I needed to send to the server is held in my HREF tag. A replace of the hash tag and I'm good to go
  var myDataVar = $(this).attr("href");
  //just a simple removal, nothing fancy
  var myDataVar = myDataVar.replace(/#/g, '');
  //now I can do my ajax. all my variables are set. let's build the new tabs and inject the content.
  $.ajax({
    url: 'location/to/my/file.php',
    data: 'data='+myDataVar,
    success: function(data){
       //This is where pure magic happens. See our cleanName? we're using it again for the dynamic ID tags and Links so we don't run into any issues.
      $("#nameOfMyTabsList").tabs("add", "#href-to-my-element"+cleanTabName, "This Is The Link Text!");
      //now that the link and div have been created, we access the div with the same identifer we just made in the above line. then we append the data that was returned from our ajax request.
      $("#href-to-my-element"+some_unique-string).html(data);
    }
  });
});

Это решение, которое я использовал для создания динамических вкладок. Я не говорю, что это красиво (во что бы то ни стало); но это 100% проверенное и проверенное решение.