jquery запомнить состояние анимации после перезагрузки страницы

Question

У меня есть блок, следующий за кнопками меню, чтобы указать, какой из них активен. Есть ли способ сохранить местоположение блока после обновления? На данный момент местоположение сбрасывается, когда я нажимаю ссылку на подстранице.

код JQuery:

$("button",document.body).click(function(){ 
    var offset = $(this).offset(); 
    var offsetBody = $("body").offset(); 
    $("#block") 
    .animate({ 
    left: (offset.left - offsetBody.left) 
    }, 200); 
}); 

Answer 1

JQuery - это клиентский скрипт. Когда вы перезагружаете страницу или переходите на новую страницу, вы запрашиваете информацию с сервера, что означает, что все данные на стороне клиента теряются.

Однако в зависимости от вашей конкретной проблемы существует ряд решений.

1. Если вы заинтересованы только в месте расположения блока на каждой странице по отдельности, то вы могли бы кодировать какой-то элемент в наценке иметь значение атрибута, равное к чему-то, проверить это значение при загрузке, если DOM и соответственно переместите блок.

2. Вы можете использовать куки-файлы на стороне клиента для хранения значения и при загрузке DOM проверить эту переменную и соответствующим образом анимировать блок.

3. Вы можете использовать вызов AJAX для установки переменной на стороне сервера в PHP и использовать эту переменную, чтобы динамически создать элемент в 1.

ли какие-либо из этих трех решений работы вы думаете? Я могу более подробно остановиться, если вы можете более точно рассказать, как вы хотели бы это сделать.

Для метода 1.

Используйте метод JQuery .attr() таким образом, что;

Markup

<meta name="description" content="home" /> 

JQuery

var page = $('meta[name=description]').attr("content"); 
if (page == "home") { 
    // you know where it should be 
} else if (page == "account") { 
    // you know where it should be 
} 

Однако я немного обеспокоен тем, что это не совсем функциональность вы хотите, это?

Для метода 3

Markup

<?php 
    session_start(); 
    $pos = $_SESSION['position']; 
    echo '<meta name="description" content="' . $pos . '" />' 
?> 

JQuery

var position; 
// perform animation stuff and store position in the variable 
// make a post() request after the position has changed 
$.post("position.php", { pos: position }); 

РНР позиции.php

<?php 
    session_start(); 
    $_SESSION['position'] = $_POST['pos']; 
?> 

Answer 2

Вы можете сохранить позицию в следующем объекте. 1. Локальное хранилище (поддержка браузера) В современных браузерах вы можете сохранить позицию в Localstorage. профи: быстрый, удобный. минусы: вам нужно обработать кросс-браузер. 2. Серверная сторона. В противном случае вам необходимо сохранить его на serveride() профи: вам не нужно учитывать браузеры. минусы: медленно, вам нужно беспокоиться о латентности в Интернете. 3. Печенье.