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

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

ОБСУЖДЕНИЕ

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

Таблица тарифных планов
Просмотров: 1334  Скачан: 203 раз  Комментариев в теме: 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 слайдер - JliderJQuery слайдер - Jlider

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

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

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

css3 слайдерcss3 слайдер

Красивый адаптивный слайдер с параллакс эффектом на чистом CSS3....

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

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

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

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

JQuery плагин с навигацией в виде слайдераJQuery плагин с навигацией в виде с...

JQuery плагин «Easy Paginate» созданный для удобного оформления контента на сайте, он очень прост в установке....

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

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

Hope CenterHope Center

Универсальный шаблон Hope Center на HTML5, был разработан для благотворительного сайта, в шаблоне используется красивый слайдер......

Valenti v1.1.8Valenti v1.1.8

Многофункциональная журнальная тема с полной адаптивной вёрсткой для WordPress....

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

Pack кнопок 2, в паке представлены 20 кнопок на css3 с разными иконками....

MCUBE SolutionsMCUBE Solutions

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

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

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

In Admin PanelIn Admin Panel

Неплохой html шаблон панели администратора, в наличии имеются все необходимые элементы: кнопки, закладки, меню и прочее....

Горизонтальное меню на jQuery «Menu Kwicks»Горизонтальное меню на jQuery «Menu Kwic...

Стильное горизонтальное меню с выдвижными иконками
  • Текущий 1.13/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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