Скрипты

job-portal-v3-5-сервис-по-поиску-работы Портал вакансий разработан для создания интерактивной вакансии для кандидатов. Это веб-приложение задумано в его текущей форме как динамический сайт,...
lcrm-saas-v1-0-5-сервис-saas LCRM SAAS-это программное обеспечение CRM, которое вы можете запускать на своем собственном сервере и предлагать его в качестве продукта SAAS бесплатно...
smartend-v4-1-панель-администратора-laravel-с-интерфейсом-и-restful-api SmartEnd-это отличительная админ панель (панель управления) со всеми опциями, которые вам могут понадобиться для создания любых типов веб-сайтов на...

Для Photoshop

animation-glitch-photoshop-action Action для программы Photoshop, который генерирует видео ряд анимационных эффектов в виде помех на экране, из ваших изображений. Вы можете создать...
radiant-action-photoshop Экшен для программы Photoshop, создаёт эффект света и геометрических фигур, что поможет создать стильный модный вид вашему образу. Создавайте яркие и...
doomsday-action-экшен-для-photoshop Экшен для программы Photoshop, создаёт потрясающий эффект драматизма с глубокими тенями и световым контрактом. Отлично подойдёт при создании рекламных...

Стилизация меню страницы настроек

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

Demo

Архив с примером

 HTML

Для того что бы использовать jQuery mobile мы должны связать эту библиотеку и CSS файл. 

 <!-- Ссылки на стили-->
    <link href="/css/main.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="/jquery.mobile/jquery.mobile-1.1.1.min.css" />
    <!-- ссылки на скрипты  -->
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="/jquery.mobile/jquery.mobile-1.1.1.min.js"></script>

Теперь HTML разметка всей формы.

 <form action="index.php" method="post" data-ajax="false">
        <div class="ui-body ui-body-c">
            <h2>Стилизация меню страницы настроек</h2>
            <!-- Поля ввода текста -->
            <div data-role="fieldcontain">
             <label for="text-p-1">Поле 1:</label>
             <input type="text" name="text-p-1" id="text-p-1" value="" data-mini="true" />
            </div>
            <div data-role="fieldcontain">
             <label for="text-p-2">Поле 2:</label>
             <input type="text" name="text-p-2" id="text-p-2" value="" data-mini="true" />
            </div>
            <!-- Основные параметры Выключатели-->
            <div data-role="fieldcontain">
                <label for="basic_settings">Показать основные параметры:</label>
                <select name="basic_settings" id="basic_settings" data-role="slider" data-mini="true">
                    <option value="off">Нет</option>
                    <option value="on">Да</option>
                </select> 
            </div>
            <!-- Основные настройки - скрытый раздел -->
            <div class="ui-body ui-body-c hidden_basic_settings" style="display:none">
                <!-- Поля ввода текста -->
                <div data-role="fieldcontain">
                 <label for="text-1">Ввод текста 1:</label>
                 <input type="text" name="text-1" id="text-1" value="" data-mini="true" />
                </div>
                <div data-role="fieldcontain">
                 <label for="text-2">Ввод текста 2:</label>
                 <input type="text" name="text-2" id="text-2" value="" data-mini="true" />
                </div>
                <!-- Переключите селектор поля -->
                <div data-role="fieldcontain">
                    <label for="switch">Переключение:</label>
                    <select name="switch" id="switch" data-role="slider" data-mini="true">
                        <option value="off">Нет</option>
                        <option value="on">Да</option>
                    </select> 
                </div>
                <!-- Ползунок-->
                <div data-role="fieldcontain">
                    <label for="slider">Ползунок:</label>
                    <input type="range" name="slider" id="slider" value="0" min="0" max="100" data-
mini="true" />
                </div>
            </div>
            <!-- Расширенные настройки переключателя -->
            <div data-role="fieldcontain">
                <label for="advanced_settings">Показать расширенные настройки:</label>
                <select name="advanced_settings" id="advanced_settings" data-role="slider" data-
mini="true">
                    <option value="off">Нет</option>
                    <option value="on">Да</option>
                </select> 
            </div>
            <!-- Расширенные настройки - скрытый раздел -->
            <div class="ui-body ui-body-c hidden_advanced_settings" style="display:none">
                <!-- Несколько флажков -->
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
                        <legend>Несколько флажков:</legend>
                        <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
                        <label for="checkbox-1">Флажок 1</label>
                        <input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
                        <label for="checkbox-2">Флажок 2</label>
                        <input type="checkbox" name="checkbox-3" id="checkbox-3" class="custom" />
                        <label for="checkbox-3">Флажок 3</label>
                    </fieldset>
                </div>
                <!-- Радио кнопки -->
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup" data-mini="true">
                        <legend>Радио кнопки:</legend>
                            <input type="radio" name="radio-1" id="radio-1" value="1" />
                            <label for="radio-1">Радио 1</label>
                            <input type="radio" name="radio-1" id="radio-2" value="2"  />
                            <label for="radio-2">Радио 2</label>
                            <input type="radio" name="radio-1" id="radio-3" value="3"  />
                            <label for="radio-3">Радио 3</label>
                            <input type="radio" name="radio-1" id="radio-4" value="4"  />
                            <label for="radio-4">Радио 4</label>
                    </fieldset>
                </div>
                <!-- селектор -->
                <div data-role="fieldcontain">
                    <label for="select" class="select">Селектор:</label>
                    <select name="select" id="select" data-native-menu="false" data-mini="true">
                        <option value="value1">Вариант 1</option>
                        <option value="value2">Вариант 2</option>
                        <option value="value3">Вариант 3</option>
                        <option value="value4">Вариант 4</option>
                        <option value="value5">Вариант 5</option>
                    </select>
                </div>
            </div>
            <!-- Кнопки -->
            <fieldset class="ui-grid-a">
                <div class="ui-block-a"><button type="submit" data-theme="b" data-
mini="true">Отправить</button></div>
                <div class="ui-block-b"><button type="cancel" data-theme="c" data-
mini="true">Отменить</button></div>
            </fieldset>
        </div>
    </form>

А теперь код JS обработчика.

 

$(document).ready(function() { 
    $('#basic_settings').change(function(event, ui) {
        if ($(this).attr('value') == 'on') {
            $('.hidden_basic_settings').slideDown(500);
        } else {
            $('.hidden_basic_settings').slideUp(500);
        }
    });
    $('#advanced_settings').change(function(event, ui) {
        if ($(this).attr('value') == 'on') {
            $('.hidden_advanced_settings').slideDown(500);
        } else {
            $('.hidden_advanced_settings').slideUp(500);
        }
    });
});

 

 


  1. Комментарии (0)

  2. Add Yours

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

Комментарии отсутствуют

Оставьте свой комментарий

Оставить комментарий в качестве гостя. Зарегистрироваться либо авторизоваться.
Вложения (0 / 3)
Поделиться вашим местоположением

Векторная графика

плашки-для-рекламных-текстов Набор ярких плашек для рекламных текстов в векторном формате, которые значительно выделят ваш текст на общем фоне. Формат файлов: AI / EPS /...
start-up-rockets-–-ракеты-в-векторе Набор векторных изображений, разного вида летящих ракет. Можно использовать при создании анимации и рекламных баннеров. Формат файлов:...
pop-art-man-векторные-мужчин-в-стиле-поп-арт Набор изображений в векторном формате, яркие иллюстрации мужчин в модном стиле поп арт, отлично подойдёт при создании рекламных баннеров. Формат...

Растовая графика

атлетика-и-бодибилдинг-–-фото-клипарт Набор из 32 изображений высокого качества на тему атлетики и бодибилдинга. Отлично подойдут для рекламных флаеров, баннеров и слайдеров на сайтах...
интернет-технологии,компьютер,гаджеты-–-фото-клипарт Набор из 25 изображений высокого качества, различные интернет технологии, компьютеры, гаджеты. Отлично подойдет для слайд-шоу. Размер 4800 на 3200 px....
бизнес-леди-–-набор-фото-клипарта Набор из 15 изображений высокого качества с красивой блондинкой, бизнес-леди. Эти изображения отлично подойдут для использования в презентациях,...