<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
	<title type="html"><![CDATA[Форум PHP-MyAdmin.RU &mdash; Перелистывание, как на Яндексе, с помощью Ctrl+стрелочка]]></title>
	<link rel="self" href="https://forum.php-myadmin.ru/extern.php?action=feed&amp;tid=1811&amp;type=atom" />
	<updated>2010-07-02T11:06:02Z</updated>
	<generator>PunBB</generator>
	<id>https://forum.php-myadmin.ru/viewtopic.php?id=1811</id>
		<entry>
			<title type="html"><![CDATA[Перелистывание, как на Яндексе, с помощью Ctrl+стрелочка]]></title>
			<link rel="alternate" href="https://forum.php-myadmin.ru/viewtopic.php?pid=12594#p12594" />
			<content type="html"><![CDATA[<p>Перелистывание клавиатурой можно добавить практически к любой листалке, надо только добавить пару id к ссылкам и небольшую функцию JavaScript.</p><p>Имеем примерно такой HTML код листалки на ссылках <em>следующая/предыдущая</em> страница.<br /></p><div class="codebox"><pre><code>&lt;div&gt;
  &lt;span&gt;Страницы:&lt;/span&gt;
  &lt;a href=&quot;/test/test.php?page=1&quot; id=&quot;page_previous&quot;&gt;? предыдущая&lt;/a&gt;
  &lt;a href=&quot;/test/test.php?page=3&quot; id=&quot;page_next&quot;&gt;следующая ?&lt;/a&gt;
&lt;/div&gt;</code></pre></div><p>Важным является только определение идентификаторов ссылок [mono]id=&quot;page_previous&quot;[/mono] для предыдущей страницы, и [mono]id=&quot;page_next&quot;[/mono] для следующей страницы.</p><p>Создаем функцию JavaScript, которая будет отвечать за перехват нажатия клавиш и перевод пользователя на требуемую страницу.</p><div class="codebox"><pre><code>function Page_onkeydown(event) {
    var id = false;

    // Событие window.event необходимо для совместимости с браузером Internet Explorer.
    event = event || window.event;
    // Помещаем в переменную key код нажатой клавиши.
    var key = event.keyCode;
    // Проверяем нажата ли клавиша Ctrl.
    if (event.ctrlKey) {
        // Помещаем в переменную tag название активного тега, того в котором находится курсор.
        // Свойство event.srcElement необходимо для совместимости с браузером IE.
        var tag = (event.target || event.srcElement).tagName;
        // Проверяем где находится курсор. Если в текстовом поле, то перелистывать нельзя,
        // чтобы не портить перемещение по тексту, где тоже используется сочетание клавиш Ctrl+стрелочка.
        if (tag != &#039;INPUT&#039; &amp;&amp; tag != &#039;TEXTAREA&#039;) {
            // Код клавиши 37 - значит нажата стрелочка влево.
            if (key == 37) {
                // Помещаем в переменную id ссылку на тег &lt;a&gt; отвечающий за переход на предыдущую страницу.
                id = document.getElementById(&#039;page_previous&#039;);
            }
            // Код клавиши 39 - значит нажата стрелочка вправо.
            if(key == 39) {
                // Помещаем в переменную id ссылку на тег &lt;a&gt; отвечающий за переход на следующую страницу.
                id = document.getElementById(&#039;page_next&#039;);
            }
            // Проверяем существует ли объект.
            if (id) {
                // Осуществляем переход по ссылке указанной в свойстве href.
                // Это и есть цель данной функции, она осуществляет переход.
                location.href = id.href;
            }
        }
    }
}</code></pre></div><p>Осталось только заставить функцию работать. Делается это с помощью перехвата нажатия клавиш [mono]document.onkeydown[/mono]. Обратите внимание, что запускать функцию надо после вывода HTML кода листалки. Конечный вид HTML кода с запуском функции [mono]Page_onkeydown[/mono] будет таким.<br /></p><div class="codebox"><pre><code>&lt;div&gt;
  &lt;span&gt;Страницы:&lt;/span&gt;
  &lt;a href=&quot;/test/test.php?page=1&quot; id=&quot;page_previous&quot;&gt;? предыдущая&lt;/a&gt;
  &lt;a href=&quot;/test/test.php?page=3&quot; id=&quot;page_next&quot;&gt;следующая ?&lt;/a&gt;
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
&lt;!--
document.onkeydown = Page_onkeydown;
//--&gt;
&lt;/script&gt;</code></pre></div><p>Ничего сложного. <img src="https://forum.php-myadmin.ru/img/smilies/smile.png" width="15" height="15" alt="smile" /><br />Пример реализации можете посмотреть на нашей <a href="http://php-myadmin.ru/search/">странице поиска</a>.</p>]]></content>
			<author>
				<name><![CDATA[Hanut]]></name>
				<uri>https://forum.php-myadmin.ru/profile.php?id=181</uri>
			</author>
			<updated>2010-07-02T11:06:02Z</updated>
			<id>https://forum.php-myadmin.ru/viewtopic.php?pid=12594#p12594</id>
		</entry>
</feed>
