jQuery Slide и Fade остаются открытыми при перезагрузке с помощью куки - PullRequest
Новая
       2

jQuery Slide и Fade остаются открытыми при перезагрузке с помощью куки

1 голос
/ 20 ноября 2011

У меня есть рабочий пример, который поддерживает разделение с помощью файлов cookie. Частично проблема в том, что я использую список выбора вместо переключателя. Другая проблема заключается в том, что значения списка выбора и соответствующего div генерируются динамически. Однако, делая вещи немного проще, значение select ВСЕГДА совпадает с div id. Я просто пытаюсь сделать так, чтобы при перезагрузке страницы div оставался открытым. Вот пример, который, я думаю, близок к тому, что я ищу: 

<fieldset>
<ol class="formset">
  <li>
    <label for="fname2">First Name: </label>`
    <input type="text" id="fname2" value="" name="fname2"/>
  </li>
  <li>
    <label for="lname2">Last Name: </label><br />
    <input type="text" id="lname2" value="" name="lname2"/>
  </li>
  <li>
    <label for="email2">Email Address: </label><br />
    <input type="text" id="email2" value="" name="email2" />
  </li>
  <li>
    <label for="age2">Are you above 21 yrs old?</label><br />
    <input type="radio" name="age2" value="Yes" class="aboveage2" /> Yes
    <input type="radio" name="age2" value="No" class="aboveage2" /> No
  </li>
</ol>
<ol id="parent2" class="formset">
  <li>
    <strong>Parent/Guardian Information:</strong>
  </li>
  <li>
    <label for="pname2">Parent Name: </label>
    <input type="text" id="pname2" value="" name="pname2"/>
  </li>
  <li>
    <label for="contact2">Contact No.: </label><br />
    <input type="text" id="contact2" value="" name="contact2"/>
  </li>
</ol>
<input type="submit" name="submit" value="Submit" class="submitbtn" />  
</fieldset>

<script>
  $(document).ready(function(){
    $("#parent2").css("display","none");
    $(".aboveage2").click(function(){
      if ($('input[name=age2]:checked').val() == "No" ) {
        $("#parent2").slideDown("fast"); //Slide Down Effect
        $.cookie('showTop', 'expanded'); //Add cookie 'ShowTop'
      } else {
        $("#parent2").slideUp("fast");  //Slide Up Effect
        $.cookie('showTop', 'collapsed'); //Add cookie 'ShowTop'
      }
    });
    var showTop = $.cookie('showTop');
    if (showTop == 'expanded') {
      $("#parent2").show("fast");
      $('input[name=age2]:checked');
    } else {
      $("#parent2").hide("fast");
      $('input[name=age2]:checked');
    }
  });
</script>

В качестве примечания я использую плагин cookie, найденный здесь: http://plugins.jquery.com/project/Cookie Ближе к тому, что я делаю и мне нужна помощь, является следующее: 

<html>
  <head>
    <script>
      $(document).ready(function() {
        $('div.book').css("display","none"); // display none on all ol that doesn't have book class
        $('#book_list').change(function() {
          $('div.book').slideUp("fast"); //Slide Up Effect
          $('#' + $(this).val()).slideDown("slow"); //Slide Down Effect
        });
      });
    </script>
  </head>
  <body>
    <form>
      <select id="book_list">
        <option value="">Select</option>
        <option value="1">Number 1</option>
        <option value="2">Number 2</option>
        <option value="3">Number 3</option>
      </select>
    </form>
    <div id="1" class="book">Div number 1</div>
    <div id="2" class="book">Div number 2</div>
    <div id="3" class="book">Div number 3</div>
  </body>
</html>

Я рисую значения из базы данных. Это PHP, который я использую при перезагрузке, чтобы сохранить выбранный пункт меню: 

<?php
$bookcookie = $_COOKIE['book'];
$book_list = "<select id=\"book_list\">";
while($book = mysql_fetch_array($book_result)){
//THE BOOK LIST
$book_list .= "<option value=\"" . $book['id'] . "\"";
if(isset($bookcookie) && $bookcookie == $book['id']){
    $book_list .= " selected";
}
$book_list .= ">Number " . $book['id'] . "</option>";
}
$book_list .= "</select>";
?>

1 Ответ

0 голосов
/ 20 ноября 2011

Я немного не люблю писать слишком много кода; если вы можете сделать серьезную попытку, сотни людей будут рады помочь вам получить эту последнюю милю!

Хотя я не против дать совет.

Ваш первоначальный подход совсем не плох. Скрыть все соответствующие div, а затем, в зависимости от события изменения, показать соответствующий. Вам просто нужно вставить новую логику:

  • Когда документ готов, проверьте, существует ли файл cookie, который сообщает вам, какой div нужно открыть.
  • если файл cookie существует, получить его значение и показать соответствующий div
  • если кук не существует, не открывайте соответствующий div
  • в обработчике изменений, когда пользователь делает выбор, устанавливает cookie и затем выполняет анимацию

Надеюсь, это поможет!

[обновлено в комментариях ниже]

Если вы хотите основать его на установленном «выбранном», вам просто нужно сделать это: 

$(document).ready(function() {
  $('div.book').css("display","none"); // display none on all divs with class 'book'
  var listVal = $('#book_list').val();
  if(listVal != "") {
    $('#book-'+listVal).show();
  }


  $('#book_list').change(function() {
    $('div.book').slideUp("fast"); //Slide Up Effect
    $('#book-' + $(this).val()).slideDown("slow"); //Slide Down Effect
  });
});

Обратите внимание на изменение, которое я заметил по пути: ваши div не могут быть просто числом; действительные идентификаторы должны начинаться с буквы, поэтому я добавил шаблон «book-» в начало. Я не публиковал обновленный HTML-код, но для использования предложенного кода у ваших div-ов должны быть идентификаторы book-1 book-2 и book-3.

Не утверждая, что это оптимизировано, но это суть. ;-) Если значение не выбрано, по умолчанию выбирается первое, значение которого равно пустой строке. Один документ готов, получите значение, и если это НЕ пустая строка, должен быть div, который нужно показать. Показать его на основе значения списка.

...