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

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

ОБСУЖДЕНИЕ

Таблица тарифных планов для сайта

Таблица тарифных планов
Просмотров: 1274  Скачан: 197 раз  Комментариев в теме: 0

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

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

 

HTML

<div id="page-wrap">
    <table id="feature-table">
        <colgroup class="basic"></colgroup>
        <colgroup class="plus"></colgroup>
        <colgroup class="premium" id="featured"></colgroup>
        <colgroup class="pro"></colgroup>
        <thead>
            <tr>
                <th id="header-basic"><span>$15 Basic</span> <a class="button" href="#">Sign Up</a></th>
                <th id="header-plus"><span>$35 Plus</span><a class="button" href="#">Sign Up</a></th>
                <th id="header-premium"><span>$99 Premium</span><a class="button" href="#">Sign Up</a></th>
                <th id="header-pro"><span>$150 Pro</span><a class="button" href="#">Sign Up</a></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>50 pages</td>
                <td>75 pages</td>
                <td>Unlimited</td>
                <td>Unlimited</td>
            </tr>
            <tr>
                <td>3 users</td>
                <td>5 users</td>
                <td>10 users</td>
                <td>Unlimited</td>
            </tr>
            <tr>
                <td>10 Sites</td>
                <td>25 Sites</td>
                <td>100 Sites</td>
                <td>Unlimited</td>
            </tr>
            <tr>
                <td>50 MB</td>
                <td>250 MB</td>
                <td>1 GB</td>
                <td>5 GB</td>
            </tr>
            <tr>
                <td>included</td>
                <td>included</td>
                <td>included</td>
                <td>included</td>
            </tr>
            <tr>
                <td><img src="images/icon-check.png" alt="yes" /></td>
                <td><img src="images/icon-check.png" alt="yes" /></td>
                <td><img src="images/icon-check.png" alt="yes" /></td>
                <td><img src="images/icon-check.png" alt="yes" /></td>
            </tr>
            <tr>
                <td><img src="images/icon-x.png" alt="no" /></td>
                <td><img src="images/icon-check.png" alt="yes" /></td>
                <td><img src="images/icon-check.png" alt="yes" /></td>
                <td><img src="images/icon-check.png" alt="yes" /></td>
            </tr>
            <tr>
                <td><img src="images/icon-x.png" alt="no" /></td>
                <td><img src="images/icon-check.png" alt="yes" /></td>
                <td><img src="images/icon-check.png" alt="yes" /></td>
                <td><img src="images/icon-check.png" alt="yes" /></td>
            </tr>
            <tr>
                <td><img src="images/icon-x.png" alt="no" /></td>
                <td><img src="images/icon-x.png" alt="no" /></td>
                <td><img src="images/icon-check.png" alt="yes" /></td>
                <td><img src="images/icon-check.png" alt="yes" /></td>
            </tr>
            <tr>
                <td><img src="images/icon-x.png" alt="no" /></td>
                <td><img src="images/icon-x.png" alt="no" /></td>
                <td><img src="images/icon-x.png" alt="no" /></td>
                <td><img src="images/icon-check.png" alt="yes" /></td>
            </tr>
            <tr>
                <td><a class="button" href="#">Sign Up</a></td>
                <td><a class="button" href="#">Sign Up</a></td>
                <td><a class="button" href="#">Sign Up</a></td>
                <td><a class="button" href="#">Sign Up</a></td>
            </tr>
        </tbody>
    </table>
</div>

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

 

CSS

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

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

 

JS

<script type="text/javascript" src="js/jquery 1.8.2.js"></script>
<script type="text/javascript">
$(function() {
    var numCols = $("colgroup").length,
    featuredCol;   
    $("tr:odd").addClass("odd");
    $("tr:last").addClass("final-row");    
    $("colgroup").each(function(i) {
        if (this.id == "featured") featuredCol = i+1;
    });   
    $("td, th").each(function(i) {
        $(this).addClass("table-col-" + ((i % numCols) + 1));
        if (((i%numCols)+1) == (featuredCol-1)) $(this).addClass("leftOfFeatured");
        if (((i%numCols)+1) == (featuredCol+1)) $(this).addClass("rightOfFeatured");
    });        
});
</script>
Материалы по теме:

Адаптивная карусель, плагин jQuery «Elastislide»Адаптивная карусель, плагин jQuery ...

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

Скроллер картинокСкроллер картинок

Красивый скроллер для вашего сайта, имеет возможность прокручиваться как в левую сторону, так и в правую......

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

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

3D плакат с анимацией на чистом css33D плакат с анимацией на чистом css...

3D анимация на чистом css3, добиться такого эффекта удаётся с помощью свойства -webkit-perspective....

Карусель (плагин Circular Content)Карусель (плагин Circular Content)

На данной странице представлена карусель бесконечной прокрутки контента «плагин Circular Content», идея заключается в том, что бы вращать......

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

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

Слайдер на jQuery для сайтаСлайдер на jQuery для сайта "Estro ...

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

Слайдер карусель с миниатюрами «Infinite Carousel 3.0.3»Слайдер карусель с миниатюрами «Infinite...

Слайдер с миниатюрами, а если быть точнее, то это плагин «Infinite Carousel» который позволяет демонстрировать любое количество изображений и видео в ...

Стильная форма пошаговой установкиСтильная форма пошаговой установки

Это комплект пошаговой установки, которая состоит из четырёх этапов и включает в себя проверку полей....

Кнопка Download на css3Кнопка Download на css3

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

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

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

Красивые кнопки на css3Красивые кнопки на css3

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

Обратная связь на JQuery, PHP и MySQLОбратная связь на JQuery, PHP и MySQL

Красивая форма обратной связи на PHP/JQuery и MySQL. В форме реализована проверка полей, сообщение об ошибке и база данных для хранения присылаемых ва...

Аккордеон изображенийАккордеон изображений с помощью css3

Красивый горизонтальный аккордеон для вывода изображений на сайте....
  • Текущий 1.14/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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