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

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

ОБСУЖДЕНИЕ

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

Таблица тарифных планов
Просмотров: 1394  Скачан: 206 раз  Комментариев в теме: 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>
Материалы по теме:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JQuery ползунокJQuery ползунок

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

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

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

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

Меню довольно простое, весит очень мало, подойдёт сайту любой тематики......

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

Красивый горизонтальный аккордеон для вывода изображений на сайте....

Сборка кнопок #3 на css3Сборка кнопок #3 на css3

Отличная сборка кнопок №3 на css3, в сборку вошли (раскрывающиеся кнопки, градиентные кнопки, круглые кнопки, анимационные)....

Анимационная кнопка с помощью css3Анимационная кнопка с помощью css3

Красивая анимационная кнопка похожая на 3D, при наведении курсора мыши на кнопку, она плавно......
  • Текущий 1.13/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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