Переключение раскладки страниц при переходе (улучшение к сценарию) - PullRequest
Новая
       17

Переключение раскладки страниц при переходе (улучшение к сценарию)

1 голос
/ 20 мая 2010

Я использую этот скрипт для переключения макетов на странице: 

$("span.switcher").click(function () {
    $("span.switcher").toggleClass("swap"); /*!*/
    $("ol.search-results").fadeOut("fast", function() {
        $(this).fadeIn("fast").toggleClass("grid");
});

Сценарий работает нормально, у меня проблема в том, что если представление переключателя находится внизу страницы, компоновка меняется, а затем страница снова поднимается.

Если я добавлю 'return false' прямо там, где вы видите / *! * / во второй строке скрипт не работает.

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

Есть идеи как исправить скачку страницы?

Спасибо.

Ответы [ 2 ]

2 голосов
/ 20 мая 2010

Как отмечается в этом сообщении в блоге, страница прокручивается вверх, потому что

fadeOut устанавливает для свойства css значение none.

Решением, также приведенным в блоге, будет использование fadeTo() вместо fadeOut() и fadeIn(), например: 

$("span.switcher").click(
    function () {
        $("span.switcher").toggleClass("swap");
        $("ol.search-results").fadeTo("fast", 0,
            function () {
                $(this).fadeTo("fast", 1).toggleClass("grid");
            }
        );
    }
);


<ч /> Что касается использования элемента a вместо span, вы можете сделать несколько вещей, чтобы предотвратить поведение ссылки по умолчанию (что могло бы стать переходом к началу страницы, если ее атрибут href был "#"). Как это сделать и как это сделать, обсуждается в этом ТАК вопрос.

2 голосов
/ 20 мая 2010

Вам нужно сослаться на событие в вызове функции и stopPropagation для него: 

$("span.switcher").click(function (event) {

    event.stopPropagation();

    $("span.switcher").toggleClass("swap"); /*!*/
    $("ol.search-results").fadeOut("fast", function() {
        $(this).fadeIn("fast").toggleClass("grid");
    });

});

Это предотвращает уведомление клика на что-либо кроме этой привязки.

...