Повторное добавление вкладки Jquery - PullRequest
Новая
       5

Повторное добавление вкладки Jquery

0 голосов
/ 13 июня 2011

Я пытаюсь добавить функцию отмены / возврата во вкладках Jquery. Я могу хранить и восстанавливать li / div для добавленной / удаленной вкладки.

Проблема возникает, когда я снова добавляю вкладку в форму, хотя она добавляется правильно, поскольку li и div для этой конкретной вкладки присутствуют и могут быть видны. Но если я нажму на эту вкладку, событие tabsselect не будет запущено. Ли и div для вкладки выглядят по порядку. Но я не могу понять, чего не хватает.

На моем сайте я динамически добавляю и удаляю вкладки, и он работает нормально, но просто чтение только что удаленной вкладки не работает

Вот код для добавления вкладки 

 var $tabs = $("#tabs").tabs({
                    tabTemplate: "<li><a href='#{href}'>#{label}</a> <span id='id1' 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.";

                    }
                });

Вот код удаления 

$("#tabs span.ui-icon-close").live("click", function () {
                    if (imode == 1) {
                        var index = $("li", $tabs).index($(this).parent());
                        if ($tabs.tabs("length") > 1) {
                           $tabs.tabs("remove", index);
                           }
                    }
                });

Ничего особенного на самом деле. Ищу ответы. Спасибо

1 Ответ

0 голосов
/ 13 июня 2011

Попробуйте этот код, это даст вам хороший пример для манипулирования данными во вкладках с помощью jquery.

JavaScript 

  $(document).ready(function(){   
var $tabs = $('#tabs').tabs();

var $a = $('<a />').appendTo('body').attr('href','#').html('add new tab').click(function(){
  var n = parseInt($tabs.tabs( "length" ),10)+1;
      $('body').append('<div id="tabs-'+n+'">content for the tab # '+ n +'</div>');

        $tabs.tabs("add",'#tabs-'+n,'Tab #'+n);
  return false;

});

    $('<a/>').html('<br><br>remove tab').attr('href','#').click(function(){

      $tabs.tabs('remove',$tabs.tabs('length')-1);
      return false;
    }).appendTo('body');

  });

HTML 

<!DOCTYPE html>
<html>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"></link>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <div id="tabs">
   <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>
      <li><a href="#tabs-3">Aenean lacinia</a></li>
   </ul>
   <div id="tabs-1">
      <p>Tab 1 content</p>
   </div>
   <div id="tabs-2">
      <p>Tab 2 content</p>
   </div>
   <div id="tabs-3">
      <p>Tab 3 content</p>
   </div>
</div>
</body>
</html>

* Просто используйте идентификаторы выбранных вкладок и манипулируйте данными в них. это позволит добавлять и удалять вкладки на вашей странице *

Функция выбора вкладки 

$('.ui-tabs-nav').bind('tabsselect', function(event, ui) {
     ui.options // options used to intialize this widget
     ui.tab // anchor element of the selected (clicked) tab
     ui.panel // element, that contains the contents of the selected (clicked) tab
     ui.index // zero-based index of the selected (clicked) tab
 });

Используйте ui.index, чтобы получить индекс выбранной вкладки, а затем добавить, а затем манипулировать выбранной вкладкой.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...