Рубрика «JavaScript»

Страница 7 из 14« Первая...«56789»...Последняя »

Многоуровневое CSS меню с использованием jQuery

12 Ноябрь 2008, 13:32

Очень часто захожу на сайт Dynamic Drive, где можно найти множество полезных web-мастеру вещей. Например, как из вложенных неупорядоченных списков создать многоуровневое выпадающее меню с использованием визуальных эффектов. Посмотреть как это работает можно здесь.

Все что нужно для создания этого меню - библиотека jQuery, два файла (CSS и JavaScript) и две картинки

CSS и JavaScript:

<link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" />
<!--[if lte IE 7]>
<style type="text/css">
html .jquerycssmenu{height: 1%;} /* Holly Hack for IE7 and below */
</style>
<![endif]-->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jqueryslidemenu.js"></script>

HTML:

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Folder 3.1.1</a>
        <ul>
            <li><a href="#">Sub Item 3.1.1.1</a></li>
            <li><a href="#">Sub Item 3.1.1.2</a></li>
            <li><a href="#">Sub Item 3.1.1.3</a></li>
            <li><a href="#">Sub Item 3.1.1.4</a></li>
            <li><a href="#">Sub Item 3.1.1.5</a></li>
        </ul>
    </li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
  </ul>
</li>
<li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>

Скачать исходный код

Ссылки по теме:

Рубрика: HTML и CSS, JavaScript  |  Отзывов: 5

Всплывающие подсказки: плагин BetterTip для jQuery

4 Ноябрь 2008, 21:50

Плагин BetterTip для jQuery позволяет создавать всплывающие подсказки на страницах вашего сайта. Вес скрипта вместе с CSS и картинками — 12кб, а в сжатом виде — 10кб.

Для начала подключаем в разделе head HTML-страницы три файла:

<link rel="stylesheet" type="text/css" href="css/jquery.bettertip.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.bettertip.js"></script>

JavaScript:

<script type="text/javascript">
    $(function(){
        BT_setOptions({openWait:250, closeWait:0, cacheEnabled:true});
    })
</script>

Параметры:

  • openWait — число миллисекунд, в течение которых пользователь должен держать курсор наведенным, чтобы всплыла подсказка (по умолчанию: 500)
  • closeWait — число миллисекунд, в течение которых подсказа должна оставаться видимой после того как пользователь отведет курсор с блока с подсказкой (по умолчанию: 0)
  • cacheEnabled — может принимать значения true либо false, определяет должен ли контент, вызываемый с помощью AJAX кешироваться (по умолчанию: true)

Всплывающие подсказки можно назначить для элементов <a> и <div>. Эти элементы должны иметь уникальный ID и класс с именем betterTip.

<a id="mylink" href="ajax.php?width=250" class="betterTip" title="$none">
    Dynamic tooltip an 'a' element
</a>

Для элемента <a> можно также задать заголовок подсказки с помощью атрибута title. Атрибут title, кроме обычного текста заголовка подсказки, допускает два специальных значения:

  • $none — у подсказки не будет заголовока
  • $content — у подказки будет заголовок, совпадающий с содержимым блока, на который наведен курсор.

Атрибут href отвечает за то, откуда будет загружаться контент подсказки. Дополнительно можно указать ширину блока с подсказкой; по умолчанию — 250px.

Если значение атрибута href начинается с символа $, это означает, что плагин BetterTip должен взять контент из другого элемента страницы. Например href=”$mydiv?width=500″ означает, что текст подсказки будет взят из элемента <div> с id=”mydiv” и ширина блока подсказки 500px. Иначе контент подсказки будет загружен с сервера с использованием AJAX.

<a id="mylink" href="$mydiv?width=500" class="betterTip" title="$content">
    Static tooltip an 'a' element
</a>
<div id="mydiv" style="display:none;">
    Here is the content for the tooltip!
</div>

Чтобы задать подсказку для элемента <div>, разместите элемент <a> внутри <div>:

<div class="betterTip" id="div1" style="background-color:#eeeeee;">
    <a id="a1" href="ajax.php?width=300" class="betterTip" title="$none"></a>
    Dynamic tooltip for a div
</div>

Элемент <a> внутри <div> нужен чтобы:

  • задать место, откуда будет загружаться контент подсказки;
  • указать заголовок подсказки.

Ссылки по теме:

Рубрика: JavaScript  |  Отзывов: 6

Плагин Featured Content Glider для jQuery

31 Октябрь 2008, 13:01

Еще один плагин для демонстрации слайдов. Содержимое отдельных кадров помещается в контейнер с уникальным ID. Контейнеры для отдельных кадров должны иметь одинаковое значение атрибута class. Для создания панели навигации в еще один контейнер с уникальным ID помещаются ссылки на отдельные кадры слайдшоу.

Для начала подключим в разделе head HTML-страницы три файла:

<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="featuredcontentglider.css" />
<script type="text/javascript" src="featuredcontentglider.js">

HTML:

<div id="canadaprovinces" class="glidecontentwrapper">

  <div class="glidecontent">
  Glide content 1 here
  </div>
 
  <div class="glidecontent">
  Glide content 2 here
  </div>

  <div class="glidecontent">
  Glide content 3 here
  </div>

</div>

<div id="p-select" class="glidecontenttoggler">
  <a href="#" class="prev">Prev</a>
  <a href="#" class="toc">Page 1</a> <a href="#" class="toc">Page 2</a> <a href="#" class="toc">Page 3</a>
  <a href="#" class="next">Next</a>
</div>

JavaScript:

<script type="text/javascript">

featuredcontentglider.init({
    gliderid: "canadaprovinces", // ID of main glider container
    contentclass: "glidecontent", // Shared CSS class name of each glider content
    togglerid: "p-select", // ID of toggler container
    remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable
    selected: 0, //Default selected content index (0=1st)
    persiststate: false, //Remember last content shown within browser session (true/false)?
    speed: 500, //Glide animation duration (in milliseconds)
    direction: "downup", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
    autorotate: true, //Auto rotate contents (true/false)?
    autorotateconfig: [3000, 2] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})

</script>

Как видите, мы должны определить несколько параметров для управления слайдшоу:

  • gliderid - ID контейнера всех кадров
  • contentclass - имя класса отдельных кадров
  • togglerid - ID контейнера меню навигации
  • remotecontent - позволяет загружать кадры слайдшоу из внешнего файла на сервере, используя AJAX
  • selected - порядковый номер выбранного по умолчанию кадра (0 - первый кадр)
  • persiststate - запоминать (true) или нет (false) последний показанный кадр
  • speed - продолжительность в миллисекундах эффекта анимации при смене кадров
  • direction - определяет, как кадры будут сменять друг друга: “updown”, “downup”, “leftright” или “rightleft”
  • autorotate - разрешает (true) или запрещает (false) автоматическую смену кадров
  • autorotateconfig - если autorotate=true, задает интервал в миллисекундах между сменами кадров и количество полных циклов перед остановкой слайдшоу

Можно улучшить внешний вид меню навигации, используя CSS

<link rel="stylesheet" type="text/css" href="cssbuttonstoggler.css" />

и два изображения: square-gray-left.gif и square-gray-right.gif.

Рубрика: JavaScript  |  Отзывов: 4
Страница 7 из 14« Первая...«56789»...Последняя »