Подробно

jQuery. Урок 7

Вот мы, то есть я, и добрались до 7-го урока

Сегодня будет рассмотрена весьма полезная функция hide элементов, которые в данный момент не нужны пользователю. Как и обычно, с jQuery, всё просто, как валенок.

Вот код html, который мы используем:

<h2>Список наших рубрик</h2>
<div id="manipulator"></div>
<ul id="rubric">
<li>Рубрика номер 1</li>
<li>Рубрика номер 2</li>
<li>Рубрика номер 3</li>
<li>Рубрика номер 4</li>
<li>Рубрика номер 5</li>
<li>Рубрика номер 6</li>
</ul>

Опять-таки, используем дополнительную “нагрузку” для тех “несчастных”, которые не имеют (не хотят) использовать JavaScript в своих браузерах, и добавляем управляющие элементы именно через JavaScript - т.е. кому надо, те увидят DHTML, кому не надо, кто не может - для тех будет обычный html, с дурацкими, пустыми div-ами кое где Вот такая военная хитрость, кстати, я её уже использовал в одном из предыдущих примеров.

Ну и собственно, сам код:

<script>
$(document).ready(function() {
    $("#rubric").hide();
            $("#manipulator").html("показать рубрики");

            $("#manipulator").toggle( function () { 
             $("#rubric").slideDown("slow");
             $("#manipulator").html("спрятать рубрики");}, 
            function () {
             $("#rubric").slideUp("slow");
             $("#manipulator").html("показать рубрики");} 
            );
});
</script>

Не знаю, стоит ли здесь что-то особо комментировать, но я всё-таки опишу, чтобы совсем уж не было вопросов.

Итак, для начала мы прячем рубрики, и добавляем надпись “показать рубрики”, которую будем использовать для того, чтобы управлять видимостью нужного div-а (помните, я говорил о тех, кто без JS? Это как раз для того, чтобы у них всё отображалось как положено, без JavaScript). Дальше - уже знакомая нам функция toggle - которая переключает два режима, описанных первой и второй функцией. В первой - мы меееедленно разворачиваем рубрики, и меняем надпись на “спрятать”, вторая функция - мееедленно сворачивает рубрики, и меняет надпись на “показать”. Сама функция toggle цепляется к div - манипулятор. Думаю понятно почему? Вопросов нет? Замечательно!

А теперь ссылка на stand alone jQuery example

Как видите всё просто - дальше некуда. Где лучше использовать? Ну я, например, планирую подобной функцией свернуть в правой колонке два раздела “Архив” и “Рубрики”. Как показывает моя статистика кликов на эти ссылочки мало, поэтому кому очень надо - те “развернут” и нажмут, а кому не надо, те и не увидят “рождественскую ёлку” в правом side-bar.

Ну что? Вы уже начали программировать на jQuery? Нет? Пора, пора…

Subscribe to the comments for this post

Парадокс Wordpress-а

Парадокс Wordpress-а заключается в том, что с одной стороны - вроде бы развивающийся, настраиваемый и любящий плагины блоговский движок. Казалось бы - бери и пользуйся, живи и радуйся…

Но стоит сделать шаг в сторону, немного потребовать нетрадиционных действий от движка, как тут же начинается “ё-моё!” это не предусмотрено, точнее предусмотрено, но не работает, или работает но с ограничениями, или надо столько настраивать, что проще этот вопрос решить вобще вне пространства действий Wordpress.

Судя по binarylook не я первый упираюсь лбом в многочисленные вордпрессовские стенки. Пока удавалось их прошибить, но чем дальше, тем больше меня это начинает напрягать, и я всё больше смотрю в сторону того, что либо взять другой, более удобный движок, либо возродить “из пепла” свои старые наработки…

Subscribe to the comments for this post