Тема: Jquery UI .tabs()
Показать сообщение отдельно
  #1 (permalink)  
Старый 15.06.2015, 05:55
Аспирант
Отправить личное сообщение для Dtri Посмотреть профиль Найти все сообщения от Dtri
 
Регистрация: 14.12.2014
Сообщений: 86

Jquery UI .tabs()
Здравствуйте. помогите пожалуйста разобраться с jquery UI метод .tabs().

Ниже в приведённом примере, во время клика по вкладке, происходит подгрузка контента в переключённую вкладку.

Вопрос: как сделать проверку, Если контент уже был подгружен, то ничего не подгружать а просто показать содержимое вкладки.

Причина: В идее в каждой вкладке будут поля ввода, и при переключении вкладок хотелось бы чтобы поля оставались в таком отредактированном виде в котором их оставили при переключении. Например во вкладке 1 какойто текст, во вкладке 2 поля ввода. При заполнении вкладки 2 пользователь захотел заглянуть во вкладку 1 для справки. Необходимо чтобы те изменения которые он уже провёл в вкладке 2 не потерялись.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Tabs - Content via Ajax</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#tabs" ).tabs({
      beforeLoad: function( event, ui ) {
        ui.jqXHR.fail(function() {
          ui.panel.html(
            "Couldn't load this tab. We'll try to fix this as soon as possible. " +
            "If this wouldn't be a demo." );
        });
      }
    });
  });
  </script>
</head>
<body>
 
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Preloaded</a></li>
    <li><a href="ajax/content1.htm">Tab 1</a></li>
    <li><a href="ajax/content2.html">Tab 2</a></li>
    <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
    <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
</div>
 
 
</body>
</html>


P.S. Возможно есть какие-то параметры чтобы активировать проверку у этого метода? Не нашёл в документации.

Последний раз редактировалось Dtri, 15.06.2015 в 05:58.
Ответить с цитированием