1 (2014-02-13 23:18:42 отредактировано )

Тема: Дизайн калькулятора, CSS, HTML

Если вы хотите применить к калькулятору свое оформление перейдите в настройки калькулятора и укажите в опции: Дизайн калькулятора - "Без темы".

После чего вы сможете применять свое оформление для каркаса калькулятора.

В коде указаны параметры означающие:

WPCC_ID = номер калькулятора
WPCC_FID = номер поля
WPCC_i = порядковый номер в списке, начинается всегда с 1

Описание стилей калькулятора

.wpcc {}
.wpcc_form {}
.wpcc_form_WPCC_ID {}

.wpcc_form .wpcc_box {}
.wpcc_form .wpcc_box_WPCC_FID {}

.wpcc_form .wpcc_description {}
.wpcc_form .wpcc_description_empty {}


.wpcc_form .wpcc_fields  {}
.wpcc_form .wpcc_fields_WPCC_FID  {}

.wpcc_form .wpcc_text  {}

.wpcc_form .wpcc_select  {}
.wpcc_form .wpcc_select_WPCC_FID  {}

.wpcc_form .wpcc_checkbox   {}
.wpcc_form .wpcc_checkbox label  {}
.wpcc_form .wpcc_checkbox_WPCC_FID  {}

.wpcc_form .wpcc_radio   {}
.wpcc_form .wpcc_radio label  {}
.wpcc_form .wpcc_radio_WPCC_FID  {}

.wpcc_form .wpcc_inputtext    {}
.wpcc_form .wpcc_inputtext_WPCC_FID  {}

.wpcc_form .wpcc_jq_slider_horizontal {}
.wpcc_form .wpcc_jq_slider_vertical  {}

.wpcc_form .wpcc_jq_slider {}
.wpcc_form .wpcc_jq_slider_box  {}
.wpcc_form .wpcc_jq_slider_box_WPCC_FID {}

.wpcc_form .wpcc_jq_slider_text {}

.wpcc_form .ui-slider-horizontal {}
.wpcc_form .ui-slider-vertical {}
.wpcc_form .ui-slider-range {}
.wpcc_form .ui-slider-horizontal .ui-slider-range {}
.wpcc_form .ui-slider-vertical .ui-slider-range {}
.wpcc_form .ui-slider-handle {}
.wpcc_form .ui-slider-horizontal .ui-slider-handle {}
.wpcc_form .ui-slider-vertical .ui-slider-handle {}

.wpcc_form .wpcc_submit {}
.wpcc_form .wpcc_submit_WPCC_ID {}

.wpcc_result_block {}
.wpcc_result_block_WPCC_ID {}

.wpcc_result  {}
.wpcc_result_WPCC_ID  {}
.wpcc_result .wpcc_field_result_WPCC_i {}

.wpcc_mail  {}
.wpcc_mail_WPCC_ID  {}

.wpcc_mail .wpcc_text {}
.wpcc_mail .input {}
.wpcc_mail .textarea {}
.wpcc_mail .wpcc_submit {}

.wpcc_mail .wpcc_error {}

.wpcc_mail .wpcc_mail_success {}

.wpcc_mail .wpcc_submit {}

.wpcc_mail .wpcc_loading {}


.wpcc_widget {}

.wpcc_clear {}

HTML структура калькулятора ()

<!-- из структуры вырезаны системные параметры, скрытые поля и стили. -->

<div class="wpcc"> <!-- Если виджет добавляется класс wpcc_widget -->
    <form method="POST" action="" class="wpcc_form wpcc_form_WPCC_ID">

        <!-- Текстовой блок -->
        <!-- Если заголовок пустой добавляется класс wpcc_description_empty -->
        <div class="wpcc_box wpcc_box_WPCC_FID"> 
            <div class="wpcc_description">
                Текстовой блок
            </div>
            <div class="wpcc_fields wpcc_text wpcc_text_WPCC_FID">
                Пример текста<br>
            </div>
            <div class="wpcc_clear"></div>
        </div>
                
        <!-- Поле SELECT -->
        <div class="wpcc_box wpcc_box_WPCC_FID">
            <div class="wpcc_description">
                Select блок
            </div>
            <div class="wpcc_fields">
                <select name="" class="wpcc_select wpcc_select_WPCC_FID">
                    <option value="100" selected> Первый селект</option>
                    <option value="200"> Второй селект</option>
                    <option value="300"> Третий селект</option>
                </select>
            </div>
            <div class="wpcc_clear"></div>
        </div>
        
        <!-- Поле Checkbox -->
        <div class="wpcc_box wpcc_box_WPCC_FID">
            <div class="wpcc_description">
                Чекбокс блок
            </div>
            <div class="wpcc_fields wpcc_checkbox wpcc_checkbox_WPCC_FID">
                <label><input type="checkbox" name="" value="100">  Первый чекбокс</label>
                <label><input type="checkbox" name="" value="200">  Второй чекбокс</label>
                <label><input type="checkbox" name="" value="300">  Третий чекбокс</label>
            </div>
            <div class="wpcc_clear"></div>
        </div>
        
        <!-- Поле Radio -->
        <div class="wpcc_box wpcc_box_WPCC_FID">
            <div class="wpcc_description">
                Радио блок
            </div>
            <div class="wpcc_fields wpcc_radio wpcc_radio_WPCC_FID">
                <label><input type="radio" name="" value="100" checked>  Первый Radio</label>
                <label><input type="radio" name="" value="200">  Второй Radio</label>
                <label><input type="radio" name="" value="300">  Третий Radio</label>
            </div>
            <div class="wpcc_clear"></div>
        </div>
        
        <!-- Поле Input Text -->
        <div class="wpcc_box wpcc_box_WPCC_FID">
            <div class="wpcc_description">
                Инпут текст
            </div>
            <div class="wpcc_fields">
                <input type="text" name="" value="" class=" wpcc_inputtext wpcc_inputtext_WPCC_FID">
            </div>
            <div class="wpcc_clear"></div>
        </div>
        
        <!-- Поле Слайдер -->
        <div class="wpcc_box wpcc_box_WPCC_FID">
            <div class="wpcc_description">
                Слайдер
            </div>
            <!-- У горизонтального wpcc_jq_slider_horizontal, у вертикального класс wpcc_jq_slider_vertical -->
            <div class="wpcc_fields wpcc_jq_slider_horizontal">
                <div class="wpcc_jq_slider wpcc_jq_slider_box wpcc_jq_slider_box_WPCC_FID">
                    <!-- Добавлемые блоки jQuery UI Slider -->
                </div>
                <input type="text" name="" value="" class="wpcc_jq_slider_text">
            </div>
            <div class="wpcc_clear"></div>
        </div>
        
        <!-- Далее идут скрыте поля -->
        <div class="wpcc_clear"></div>
        <input type="submit" value="Рассчитать" name="wpcc_calculate" class="wpcc_submit wpcc_submit_WPCC_ID">
        <div class="wpcc_loading"><div style="display: none;"></div></div>
    </form>
    
    <!-- Блок с результатами -->
    <div class="wpcc_result_block wpcc_result_block_WPCC_ID">
    
        <!-- Список сумм -->
        <div class="wpcc_result wpcc_result_WPCC_ID" id="wpcc_result">
            <p class="wpcc_field_result_WPCC_i">Результат 8020856 руб.</p>
            <p class="wpcc_field_result_WPCC_i">Вторая сумма 8020956 руб.</p>
        </div>
        
        <!-- Форма отправки письма -->
        <form method="POST" action="#wpcc_mail_scroll" class="wpcc_mail wpcc_mail_WPCC_ID" id="wpcc_mail_scroll">
            <div class="wpcc_text">Отправить расчет администратору?</div>
            <p>
                <input type="text" name="wpcc_user_name" value="" placeholder="Ваш Имя" class="input">
            </p>
            <p>
                <input type="email" name="wpcc_user_email" value="" placeholder="Ваш E-Mail" class="input">
            </p>
            <p>
                <input type="text" name="wpcc_user_phone" value="" placeholder="Ваш Телефон" class="input">
            </p>
            <p>
                <textarea name="wpcc_user_comment" placeholder="Ваш комментарий" value="" class="textarea"></textarea>
            </p>
            <!-- Для ошибок -->
            <div class="wpcc_error"></div>
            <input type="submit" class="wpcc_submit" value="Отправить">
            <div class="wpcc_loading"><div></div></div>
        </form>
        
        <!-- Отображается после успешной отправки письма заменяя собой форму отправки-->
        <div class="wpcc_mail wpcc_mail_success" id="wpcc_mail_scroll">
            <div class="wpcc_text">
                Спасибо! Ваш расчет отправлен! Мы свяжемся с Вами в ближайшее время.
            </div>
        </div>
        
    </div>
</div>