Js/jQuery
9 подписчики

Подписка на категорию статей

Активируй уведомление на email при появлении новой статьи в этом разделе.

Допустим, нам нужно вывести список новостей. Информация о новости содердит:

 

  • Картинку
  • Дату
  • Название
  • Краткое описание (или просто начало)

 

Нужно дать возможность пользователю просматривать этот перечень новостей в двух режимах - краткий вывод всей информации (список выше) или просто дата и название новости. Для реализации этой задумки, используем просто скрипт на jQuery.

 

 

Часто встречала такую штуку, реализованную на flash. Вот решила сделать на Javascript'e. Идея в том, что при движении курсора по экрану или по некоторому блоку, содержимое перемещается. Содержимым может быть картинка, карта или даже менюшка. Если это содержимое больше масштабов видимости, мы можем его просмотреть перемещая курсор.  

 

 

Среда, 16 Мая 2012 11:11

Диаграмма на HTML/CSS/Js

По правде говоря, не знаю конкретного применения этой штуке, просто хотелось такое сделать. Если будет желание разобрать возможные модификации, пишите в комментах.

 

Рисуем диаграмму с помощью HTML, CSS и Javascript. На странице есть два блока: список некоторых показателей с их значениями в процентах и блок, в котором будет прорисовываться диаграмма по этим процентам.

 

Например, есть менюшка или просто список ссылок, блок с текстовой информацией, описание чего-то и т.д. Изначально это информация скрыта и появляется при клике на кнопочку, ссылочку, стрелочку. В данной статье на конкретном примере расскажу какими образами можно реализовать появление скрытого блока. Будем рассматривать fadeIn, animate и slideDown.

 

 

 

Рассмотри примеры применения события mouseover() с помощью Javascript для создания динамики на сайте.

В обоих примерах есть блоки с картинками, при наведении на которые происходят некоторые события.

 

 

Понедельник, 07 Мая 2012 13:11

Открывающийся список с помощью jQuery

Ранее мы рассматривали создание выпадающего списка с помощью HTML, CSS и с помощью jQuery. Там рассматривалась ситуация горизонтального меню, один раздел которого содержит подразделы.

В этой статье рассмотрим случай, когда многие пункты меню содержат подпункты и этих подпунктов много. Мы сделаем список, в котором будут видны только разделы. Нажав на плюсик рядом с разделом, пользователь может его открыть и просмотреть все подразделы. Вместо плюсика при этом будет отображаться минус. Нажав на него, пользователь может закрыть раздел.

Такое меню идеально подойдет для создания списка категорий товаров.

 

 

Понедельник, 07 Мая 2012 12:36

Выпадающее меню с помощью jQuery

Создадим выпадающее меню с помощью jQuery.

Предположим, у нас есть горизонтальное меню, у которого один из разделов сожержит подразделы. При загрузке страницы эти подразделы не видны. Блок с позпунктами меню будет показываться при наведении на родительский пункт.

Будем для простоты использовать меню описаное в статье Выпадающее меню с помощью HTML, CSS, только покажем подразделы не при помощи css, а при помощи jQuery.

 

Как мы знаем, элементы управления типа <select>, <input type="radio">, <input type="checkbox"> нельзя стилизировать с помощью стилей css. Для этого нужно использовать Javascript.

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

Хочу обратить внимание на то, что у radio и checkbox есть два состояния - выбранный и не выбранный. Для этого введем еще один блок, внутри основного, который будет появляться только для выбранного состояния.

У элемента select также есть два состояния - открытое и закрытое. В закрытом состоянии видно только выбранный пункт списка вариантов, а в открытом виден весь список.

 

Понедельник, 23 Апреля 2012 12:33

Lightbox. Accordion. Scrolling text.

Продолжаю серию полезных для сайта динамических эффектов. Ранее я подробно рассказывала о Реализация hightlighter, tabs, lightbox и закрытие блока при клике, в данной же статье рассмотрю такие эффекты:

  • Lightbox
  • Accordion
  • Scrolling text

 

Lightbox (лайтбокс) чаще всего используется для показа картинки в полном размере или для вывод формы - авторизации, регистрации и т.д.

Accordion (аккордион) может использоваться в информационных и других блоках, для вывода меню (например, категории товаров - сразу видны основные категории, а при разворачивании можно получить подкатегории) или для любого другого контента, для которого вначале можно показать только заголовки, а содержание пользователь может узнать, развернув аккордион.

Scrolling text - это текст "бегущая строка", в таком виде можно показывать анонсы новостей, акции, новости от партнеров и многое другое.

 

В данной статье рассмотрим возможность простых реализаций таких популярных эффектов, как lightbox, hightlighter, tabs и на закуску блок с кнопочкой "Close". 

 

Смотреть демо

 

 

1.Highlighter

 

Тут все просто.

 

< 1 2 3 4 5 6 7 8 >
Страница 7 из 8

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов