qiwi
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Новостной аккордеон на css и jquery

Инфо-сетка на css и jquery «Grid accordion»
Просмотров: 1283  Скачан: 193 раз  Комментариев в теме: 0

Новостной аккордеон для сайта (Grid accordion) в стиле инфо-сетки, реализованный с помощью jquery. По сути это сетка ячеек, при клике по которой, она плавно растягивается по ширине, далее все как и в любом другом аккордеоне, вы кликните, он раскрывается, если внимательно присмотреться, то это довольно интересная идея, думаю такой подход хорошо подойдёт для интернет магазина, или же, если вам нужно вывести на своём сайте информацию в виде отдельных блоков, при этом затратив минимум места, в таком случае, такая сетка будет вам полезна.

Шаг 1 - создание разметки

 

HTML

&<div id="page-wrap">
    <div class="info-col">
        <h2>Iphone 4</h2>    
        <a class="image apple-iphone-4" href="#">Посмотреть изображение</a> 
        <dl>
            <dt>Оболочка</dt>
            <dd>Фирменная Apple iOS 4</dd>
            <dt>Экран</dt>
            <dd>Цветной S-IPS, сенсорный<br />
            Диагональ3.5 дюйма<br />
            Размер изображения640x960 пикс.<br />
            Автоматический поворот экранаесть</dd>
            <dt>Процессор</dt>
            <dd>Apple A4, 1000 МГц</dd>
            <dt>Память</dt>
            <dd>Слот карт памятиотсутствует<br />
            Объем оперативной памяти (RAM) - 512 Мб<br />
            Объем постоянной памяти (ROM) - 16384 Мб</dd>
            <dt>Камера</dt>
            <dd>Фотокамера - 5 млн пикс., светодиодная вспышка <br/>
            автофокус, цифровой Zoom 5x <br />
            Макс. разрешение видео - 1280x720</dd>
            <dt>Питание</dt>
            <dd>Тип аккумулятораLi-Ion<br />
            Время разговора14:00 ч:мин<br/>
            Время ожидания300 ч</dd>
        </dl>
    </div>
    <div class="info-col">        
        <h2>Xperia X10</h2>       
        <a class="image xperia" href="#">Посмотреть изображение</a>        
        <dl>
            <dt>Оболочка</dt>
            <dd>Android 1.6, естественно можно будет обновиться на более свежую версию.</dd>
            <dt>Экран</dt>
            <dd>Цветной сенсорный TFT, 65.54 тыс цветов<br />
            Диагональ - 4 дюйма<br />
            Размер изображения - 480x854 пикс.<br />
            Автоматический поворот экрана - есть</dd>
            <dt>Процессор</dt>
            <dd>Qualcomm QSD8250, 1000 МГц</dd>
            <dt>Память</dt>
            <dd>Объем встроенной памяти - 1024 Мб<br />
            Поддержка карт памятиmicroSD (TransFlash), объемом до 16 Гб </dd>
            <dt>Камера</dt>
            <dd>Фотокамера - 8.10 млн пикс., светодиодная вспышка<br />
            автофокус, цифровой Zoom 16x <br />
            Макс. разрешение видео - 1280x720</dd>
            <dt>Питание</dt>
            <dd>Тип аккумулятора- Li-polymer<br />
            Емкость аккумулятора - 1500 мАч</dd>
        </dl>        
    </div>
    <div class="info-col">
        <h2>Incredible S</h2>    
        <a class="image htc-incredible-s" href="#">Посмотреть изображение</a>    
        <dl>
            <dt id="starter">Оболочка</dt>
            <dd>Android 2.2</dd>
            <dt>Экран</dt>
            <dd>цветной Super LCD, сенсорный<br />
            Диагональ4 дюйма<br />
            Размер изображения480x800 пикс.<br />
            Автоматический поворот экранаесть</dd>
            <dt>Процессор</dt>
            <dd>Qualcomm MSM 8255, 1000 МГц</dd>
            <dt>Память</dt>
            <dd>Объем встроенной памяти - 1126 Мб<br />
            Поддержка карт памяти - microSD (TransFlash), объемом до 32 Гб<br />
            Объем оперативной памяти (RAM) - 768 Мб</dd>
            <dt>Камера</dt>
            <dd>8 млн пикс., светодиодная вспышка, автофокус<br />
            Макс. разрешение видео - 1280x720</dd>
            <dt>Питание</dt>
           <dd>Тип аккумулятора - Li-Ion<br />
            Емкость аккумулятора - 1450 мАч<br />
            Время разговора -9:40 ч:мин<br />
            Время ожидания -370 ч</dd>
        </dl>
    </div>
    <div class="info-col">
        <h2>Optimus 2X</h2>   
        <a class="image optimus_2x" href="#">Посмотреть изображение</a>    
        <dl>
            <dt>Оболочка</dt>
            <dd>Android 2.2</dd>
            <dt>Экран</dt>
            <dd>цветной TFT, 16.78 млн цветов, сенсорный<br/>
            Диагональ4 дюйма
            Размер изображениячисло строк - 14, 480x800 пикс.
            Автоматический поворот экранаесть</dd>
            <dt>Процессор</dt>
            <dd>NVIDIA Tegra 2, 1000 МГц, двухъядерный</dd>
            <dt>Память</dt>
            <dd>Объем встроенной памяти - 8192 Мб<br />
            Поддержка карт памятиmicroSD (TransFlash), объемом до 32 Гб<br />
            Объем оперативной памяти (RAM) - 512 Мб</dd>
            <dt>Камера</dt>
            <dd>8 млн пикс., светодиодная вспышка<br />
            режим макросъемки <br />
            Макс. разрешение видео - 1920x1080</dd>
            <dt>Питание</dt>
            <dd>Тип аккумулятора - Li-Ion<br />
            Емкость аккумулятора - 1500 мАч</dd>
        </dl>
    </div>
    <div class="info-col">
        <h2>Galaxy S II</h2>    
        <a class="image galaxy_s_II" href="#">Посмотреть изображение</a>   
        <dl>
            <dt>Оболочка</dt>
            <dd>Android 2.3</dd>
            <dt>Экран</dt>
            <dd>цветной Super AMOLED Plus, 16.78 млн цветов, сенсорный<br/>
            Диагональ - 4.27 дюйма<br />
            Размер изображения - число строк - 16, 480x800 пикс.</dd>
            <dt>Процессор</dt>
            <dd>ARM Cortex A9 1,2 ГГц</dd>
            <dt>Память</dt>
            <dd>Объем встроенной памяти - 16384 Мб
            Поддержка карт памяти -microSD (TransFlash) до 32 Гб </dd>
            <dt>Камера</dt>
            <dd>8 млн пикс., 3264x2448, светодиодная вспышка <br />
            автофокус, режим макросъемки <br/>
            Макс. разрешение видео1920x1080</dd>
            <dt>Питание</dt>
            <dd>Тип аккумулятораLi-Ion<br/>
            Емкость аккумулятора1650 мАч<br/>
            Время разговора6:30 ч:мин<br/>
            Время ожидания350 ч<br/>
            Время работы в режиме прослушивания музыки30 ч</dd>
        </dl>
    </div>
</div>

Шаг 2 - подключение стилей

 

CSS

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

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/infosetka.js"></script>
Материалы по теме:

Kenburner слайдерKenburner слайдер

Сочетание в слайдере красивого дизайна, анимации текста и различных эффектов, приятно выделяет его среди подобных плагинов....

Текстовый слайдерТекстовый слайдер

Простой текстовый слайдер с прокруткой влево, вправо, не плохо подойдёт для вывода кратких новостей. Имеется три вида слайдера...

Слайдер на css3 и jqueryСлайдер на css3 и jquery

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

Стильный слайдер на jQuery «Mobilyslider»Стильный слайдер на jQuery «Mobilys...

Стильный слайдер на jquery, а если быть точнее, то это плагин «MobilySlider» имеющий размер всего в 5kb, слайдер довольно привлекательный с виду, име...

Миниатюра изображений плагин «Grid Navigation Effects»Миниатюра изображений плагин «Grid ...

Оригинальная навигация в виде миниатюр изображений, если быть точнее, то это jQuery плагин «Grid Navigation Effects» который может похвастаться своими...

Слайдер с элементом HTML5 СаnvasСлайдер с элементом HTML5 Саnvas

Слайдер построенный с применением элемента HTML5 Саnvas, этот элемент позволяет создавать и изменять некоторую графику, так же его можно......

Navigation SlaiderNavigation Slaider

Простой слайдер на jquery, имеет меню расположенное с левой стороны, также вы можете задать текст, который будет......
Интересные публикации:

Вертикальное многоуровневое меню на css и JQueryВертикальное многоуровневое меню на css ...

Вертикальное многоуровневое меню с неограниченной вложенностью на основе jQuery....

Новостной слайдер «Lof JSliderNews 2.0»Новостной слайдер «Lof JSliderNews 2.0»

Неплохой новостной слайдер, отлично подойдёт для вывода последних новостей на сайте, в слайдере есть дополнительная панель с миниатюрами......

Полноэкранное слайд-шоу с помощью JQuery плагинаПолноэкранное слайд-шоу с помощью JQuery...

Jquery плагин «SuperSized», плагин можно использовать в ранних направлениях, одно с таких, это полно-экранное слайд-шоу....

EbuyEbuy

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

Горизонтальное меню с выдвигающимися иконкамиГоризонтальное меню с выдвигающимися ико...

Неплохое горизонтальное меню с выдвигающимися иконками. Когда вы переходите по навигации, иконки......

Шаблон EnvisionШаблон Envision

Качественный HTML шаблон Envision, на главной странице располагается красивый слайдер, есть галерея, контактная форма, табы, набор кнопок......

Социальные иконки на css3Социальные иконки на css3

Социальные иконки на css3, при наведении курсора на иконку, она делается полупрозрачной....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.0/5( Голосов 7 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить