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

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

ОБСУЖДЕНИЕ

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

Таблица тарифных планов
Просмотров: 1213  Скачан: 190 раз  Комментариев в теме: 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 плагинаПолноэкранное слайд-шоу с помощью J...

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

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

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

Слайдер (слайд-шоу) на css и jqueryСлайдер (слайд-шоу) на css и jquery

Довольно простой слайдер с предусмотренным слайд-шоу, если вам нужно, что-то простое, без каких либо наворотов (дополнительных панелей, кнопок и т.д)...

Текстовый слайдерТекстовый слайдер

Простой текстовый слайдер с прокруткой влево, вправо, не плохо подойдёт для вывода кратких новостей. Имеется три вида слайдера...

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

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

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

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

Navigation SlaiderNavigation Slaider

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

CharismaCharisma

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

Набор плоских форм «Formicon Flat Forms Pack»Набор плоских форм «Formicon Flat Forms ...

Formicon Flat Forms Pack - это набор плоских форм, построенных на Bootstrap 3.0. Набор содержит в себе различные формы и все они имеют разные стили...

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

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

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

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

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

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

MCUBE SolutionsMCUBE Solutions

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

PHP скрипт комментариевСкрипт комментариев

Commentics v2.4 - это превосходный скрипт комментариев написанный на языке PHP в связке с базой данных MYSQL....
  • Текущий 1.14/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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