Вкладки пользовательского интерфейса jQuery - 2 проблемы - PullRequest
Новая
       10

Вкладки пользовательского интерфейса jQuery - 2 проблемы

1 голос
/ 21 апреля 2010

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

ЗАДАЧА 1:

У меня есть 6 вкладок (вкладка по умолчанию в локальном div, остальные 5 загружаются через Ajax). Когда страница загрузится, мне нужно, чтобы 3-я вкладка была выбрана по умолчанию. Легко. Проблема, скажем, в том, что я ссылаюсь на http://example.com/index.html#services 3-я вкладка все еще отображается вместо вкладки служб.

Я пытался использовать cookie для установки выбранного значения, но оно просто не работает правильно.

ЗАДАЧА 2:

Это главное, и я не могу понять это. Третья вкладка - это данные по умолчанию, и если я нажму на вкладку справа от этой вкладки и вернусь, все будет золотым. НО ... Если я нажму на вкладку слева от 3-й вкладки (все вкладки слева или справа по умолчанию загружаются через Ajax), а затем вернусь на 3-ю вкладку, панель полностью исчезнет и станет пустой. Затем, щелкая другую вкладку, вы не только оставляете 3-ю вкладку в выбранном состоянии (не содержимое, а только саму вкладку) И ТАКЖЕ выбранная вкладка также отображается в выбранном состоянии.

Я дергаю себя за волосы, пытаясь понять, что здесь происходит в мире. Я сегодня немного поеду, но по возможности проверю. Надеюсь, один из вас поможет мне разобраться с этим.

Хорошо ... вот код из моего jquery 

$(document).ready(function() {
          //build tabs
          $("#tabs").tabs( { 
              cookie: { expires : 30 },
              load: function(ui) {
                  //initilize accordion
                  $("#accordion").accordion( { active: 2 } );
              },
              show: function(event, ui) {
                  //initialize accordion
                  $("#accordion").accordion( { active : 2 } );
                  //cookie select
                  var cookie = $("#tabs").tabs("option", "cookie");
                  /*
                  if(cookie) {
                      $("#tabs").tabs("select", $.cookie('ui-tabs-1'));
                  } else {
                      $("#tabs").tabs("select", 2);
                  }
                  */
              },
              ajaxOptions: {
                  dataFilter: function(data, dataType) {
                      return $(data).find("#content_area");
                  }
              }
          } ); 

      });

Вот код из моих вкладок: 

<div id="tabs">
    <ul>
       <li><a href="home.html" title="home">Home</a></li>
       <li><a href="services.html" title="services">Services</a></li>
       <li><a href="#content_area">Company</a></li>
       <li><a href="employee.html" title="employee">Employee</a></li>
       <li><a href="work-tools.html" title="work_tools">Work Tools</a></li>
       <li><a href="contact.html" title="contact">Contact</a></li>
    </ul>

    <div id="content_area">
       <p>CONTENT HERE</p>
    </div>
    <!-- end #content_area -->

Я искренне ценю вашу помощь.

1 Ответ

0 голосов
/ 22 апреля 2010

Хорошо ... Разобрался! Пошел в совершенно новом направлении и фактически закончил лучше, поскольку я могу использовать вкладки и кнопку возврата с изменениями пользовательской адресной строки.

Я настоятельно рекомендую плагин jQuery Address , поскольку я использовал его для решения своих проблем. Мне пришлось немного поработать с аккордеоном на вкладках, потому что autoHeight не сработал, но исправил это, проверив высоту () div'ов аккордеона и установив changetart.

...