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

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

ОБСУЖДЕНИЕ

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

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

JQuery слайдер - JliderJQuery слайдер - Jlider

Jlider - это компактный слайдер на JQuery с весьма богатым набором настроек....

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

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

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

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

Прокручивающиеся картинкиПрокручивающиеся картинки

Если вы ищите способ как плавно прокрутить картинку, или что-то в этом роде, воспользуйтесь представленным способом....

Аккордеон на css3 и jqueryАккордеон на css3 и jquery

Неплохой аккордеон для вашего сайта на css и jquery, в аккордеоне можно использовать текст, изображения, имеется два вида реализации аккордеона....

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

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

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

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

Горизонтальное меню в стиле AppleГоризонтальное меню в стиле Apple

Меню в стиле Apple, созданное полностью на css3.

Прозрачная форма регистрации с прогресс баромПрозрачная форма регистрации с прогресс ...

Стильная прозрачная форма регистрации на css3 и JQuery. В форме имеется прогресс бар показывающий пользователю процесс заполнения формы....

Pack кнопок на CSS3Pack кнопок на CSS3

Pack стильных кнопок на css3, в паке представлены восемь кнопок разного размера и цвета....

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

Социальные иконки на css3, при наведении курсора на иконку, она делается полупрозрачной....

Фиксированная форма обратной связи на PHP и jQueryФиксированная форма обратной связи на PH...

Довольно простая форма обратной связи без капчи, проверки полей, сообщений об ошибке и всего прочего......

Вертикальное меню с прокруткой на JQueryВертикальное меню с прокруткой на JQuery

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

VIP кнопка на css3VIP кнопка на css3

Красивая анимационная кнопка с эффектом блеска, при наведении курсора на кнопку, происходит красивая анимация на фоне кнопки....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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