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

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

ОБСУЖДЕНИЕ

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

Инфо-сетка на css и jquery «Grid accordion»
Просмотров: 1320  Скачан: 195 раз  Комментариев в теме: 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>
Материалы по теме:

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

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

Cлайдер КарусельCлайдер Карусель

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

Новостная карусель на css и JQureyНовостная карусель на css и JQurey

Стильная новостная карусель на css и JQurey, отлично подойдут для вывода последних новостей на сайте, карусель имеет два стиля (темный и светлый)....

Таблица тарифных плановТаблица тарифных планов

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

Слайдер (слайд-шоу) на css и jqueryСлайдер (слайд-шоу) на css и jquery

Довольно простой слайдер с предусмотренным слайд-шоу, если вам нужно, что-то простое, без каких либо наворотов (дополнительных панелей, кнопок и т.д)...

Компактный новостной Rotator на jqueryКомпактный новостной Rotator на jqu...

Если вам нужно вывести новости на вашем сайте, и вы хотите что бы это было привлекательно и в тоже время компактно......

Rotator на css и jQueryRotator на css и jQuery

Стильный Rotator для вашего сайта, ротатор довольно информативный, имеются миниатюры, слайд-шоу, при клике по......
Интересные публикации:

Блок на CSS3 c эффектом 3D трансформацииБлок на CSS3 c эффектом 3D трансформации

Блок реализован с помощью css3 и использует 3D трансформацию для изменения своего вида....

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

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

VLDPersonals v2.7VLDPersonals v2.7

VLDPersonals - это функциональный движок с огромным количеством возможностей, который вмещает в себе социальную сеть и сайт знакомств....

ElliotElliot

Неплохой html шаблон.сделанный с уклоном на вывод изображения, имеется два стиля (светлый и тёмный), на главной странице расположена карусель......

Вертикальное многоуровневое меню следующее за курсоромВертикальное многоуровневое меню следующ...

Многоуровневое меню, работает оно довольно интересным образом, меню привязывается к......

Сборка кнопок #3 на css3Сборка кнопок #3 на css3

Отличная сборка кнопок №3 на css3, в сборку вошли (раскрывающиеся кнопки, градиентные кнопки, круглые кнопки, анимационные)....

Adams v1.2.0Adams v1.2.0

Журнальная тема для WordPress с современным дизайном и отличным функционалом....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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