Инкрементные маркеры с HTML5 или jQuery? - PullRequest
Новая
       6

Инкрементные маркеры с HTML5 или jQuery?

3 голосов
/ 30 июня 2011

У меня очень мало знаний по HTML, так что это, наверное, очень тривиальный вопрос. Буду очень признателен за любую помощь!

Когда я создаю презентации с помощью класса LaTeX beamer, есть очень полезная команда: 

\begin{itemize} 
\item<x-> Alpha
\item<x-> Beta
\item<x-> Gamma  
\end{itemize}

Это создает три маркера, которые появляются постепенно после щелчка мышью или стрелки вперед / назад, как, например, в Powerpoint.

Я хотел бы иметь такую ​​же функцию в файле .html для очень длинных списков, может быть, более 50 элементов. Так что это действительно не будет работать в среде слайдов, но только в браузере с прокруткой вниз.

Есть ли простой способ добиться этого с помощью HTMl5, jQuery или каким-либо другим способом? Гугл подбрасывает тысячи презентационных инструментов, и я не знаю, с чего начать.

1 Ответ

1 голос
/ 30 июня 2011

С помощью jQuery вы можете привязать событие keypress к окну и показывать следующий элемент списка при каждом нажатии клавиши: 

var curIndex = 0;
$(window).keypress(function() {
   $("li").eq(curIndex).show();
   curIndex++;
});

Чтобы это работало только с клавишами со стрелками,требуется небольшое изменение (вам нужно использовать keydown вместо keypress): 

var curIndex = 0;
$(window).keydown(function(e) {
    if(e.keyCode === 37) {
        if(curIndex > 0) curIndex--;
        $("li").eq(curIndex).hide();
    }
    else if(e.keyCode === 39) {
        $("li").eq(curIndex).show();
        if(curIndex < 3) curIndex++; 
    }
});

Ваш список HTML будет выглядеть примерно так: 

<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>

Элементы списка будутдолжны быть скрыты по умолчанию, используя что-то вроде li { display:none } в вашем CSS.

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

Вот пример примерной скрипки , показывающий это в действии (необходимо щелкнуть по рамке «Результат», чтобы выделить ее, а затем нажать любую клавишу для запуска обработчика события).

...