RUB
Платежи проходят через сервис ROBOKASSA
visa/mastercard
Visa / MasterCard
qiwi
qiwi
yandex
yandex
beeline
beeline
mts
mts
tele2
tele2
alfa
alfa
sber
sber
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

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

ОБСУЖДЕНИЕ

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

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

Функциональный слайдер «bxSlider»Функциональный слайдер «bxSlider»

Отличным слайдер с очень богатым функционалом, а если быть точнее, то это широко известный плагин «bxSlider», плагин постоянно усовершенствуется......

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

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

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

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

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

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

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

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

Инфо-сетка на css и jquery «Grid accordion»Инфо-сетка на css и jquery «Grid ac...

Стильный аккордеон в сетку хорошо подойдёт для интернет магазина....

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

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

Mercina v3.4Mercina v3.4

Mercina - это современный шаблон для wordpress разработан специально для сайтов портфолио с многоцелевой тематикой....

Слайдер на jQuery «Featured Content Slider»Слайдер на jQuery «Featured Content Slid...

Лёгкий слайдер с авто-листанием на jquery, в слайдере вы множите полноценно использовать текст, изображения....

CharismaCharisma

Профессиональный шаблон административной панели, построенный на HTML5, в шаблоне имеются: закладки, меню, галерея, набор кнопок......

XMarket v1.1XMarket v1.1

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

Галерея в сетку с помощью jQueryГалерея в сетку с помощью jQuery

Картинки расположены в ряд по сетке с наложенным на них затемнением, при наведении курсора на картинку, затемнение......

Exterior DesignExterior Design

Неплохой html шаблон с готовым набором страниц, на главной странице расположено два слайдера, имеется портфолио, контактная форма......

Форма обратной связи с админкой PHP, JS, CSS, MySQL, AJAXФорма обратной связи с админкой PHP, JS,...

Универсальная форма обратной связи написанная на PHP, JS, CSS, MySQL, AJAX. Форма довольно гибкая в возможностях, с помощью админки......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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