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

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

ОБСУЖДЕНИЕ

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

Инфо-сетка на css и jquery «Grid accordion»
Просмотров: 1248  Скачан: 191 раз  Комментариев в теме: 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 для сайтаСлайдер на jQuery для сайта "Estro ...

Красивый слайдер на jQuery для прокрутки изображения (картинки) на вашем сайте....

Navigation SlaiderNavigation Slaider

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

Мульти слайдер с подпунктами «Multi-Item Slider»Мульти слайдер с подпунктами «Multi...

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

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

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

Слайдер в стиле AppleСлайдер в стиле Apple

Стильный слайдер в стиле Apple на css и jquery, в слайдере используется красивый эффект перехода между категориями....

Широкоформатный слайдер (видео, изображение, текст)Широкоформатный слайдер (видео, изо...

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

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

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

SonjaSonja

Шаблон Sonja построенный на HTML5, в шаблоне красиво реализована главная страница, имеется оригинальная галерея, стрелка вверх, видео проигрыватель......

Paris ClarkParis Clark

Красивый html шаблон Paris Clark, на главной странице используется привлекательный слайдер, имеется портфолио, контактная форма......

MCUBE SolutionsMCUBE Solutions

HTML шаблон MCUBE Solutions хорошо подойдёт для сайта в сфере бизнеса, в шаблоне используется flash слайдер, который......

LibertyLiberty

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

Прозрачная контактная форма на css3Прозрачная контактная форма на css3

Прозрачная контактная форма на CSS3 в тёмном стиле. В форме реализована проверка полей......

Music v1.4.3Music v1.4.3

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

Галерея на jQueryГалерея на jQuery

В галерее используется потрясающий эффект раскрытия картинки, когда вы нажимаете на картинку, она как бы собирается по......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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