Стильная страница установок

В данном уроке мы разберемся, как сделать стильную страницу для установок вашего проекта в составе инструментов администратора. Для создания такой страницы используется библиотека jQuery mobile.

demosourse

Шаг 1. Разметка HTML

Для использования jQuery mobile нужно присоединить данную библиотеку и ее стили к нашей странице:

    <!-- Стили -->
    <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>

Здесь используются: поля для ввода текста, селекторы, переключатели, чекбоксы, радиокнопки и обычные кнопки. Все опции поделены на два раздела - открытый и скрытый. Оба раздела по умолчанию невидимы (используется свойство display:none). Для изменения видимости используется  переключатель Для его работы требуется JavaScript код.

 

Шаг 2. JavaScript

    $(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);
            }
        });

    });

Готово! Очень просто получить отличный результат.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.script-tutorials.com/how-to-create-a-stylish-setting-page/
Перевел: Сергей Фастунов
Урок создан: 6 Августа 2012
Просмотров: 40054
Правила перепечатки


5 последних уроков рубрики "jQuery"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 7 Августа 2012 18:26
    Barahten
    ссылка на демо не работает, в IE9 коряво
    • 10 Августа 2012 07:21
      Morani
      ну а что вы хотели? IE вообще сложный браузер, который даже всё долго грузит. Под него демо сделают, но это лишняя морока.
    • 28 Октября 2012 16:18
      malina95
      Если на это пошло то легче было бы сделать регистрацию с админкой такой, думаю было бы полезно, Кто со мной согласен? Я бы ещё хотел чтобы был 5 урок по регистрации только с AJAX подгрузкой данных, например отправка сообщений пользователям могла бы быть без перезагрузки страницы, есть люди которые меня поддержат?
  • 7 Августа 2012 21:42
    serj011
    круто) и кросбраузерность хорошая... наконец что то полезное)
  • 8 Августа 2012 10:44
    saynez
    Крутецко! Спасибо. Задействую.
  • 8 Августа 2012 11:12
    anarh1111
    Очень классно!!
  • 8 Августа 2012 12:43
    asizintsev
    действительно интересно смотрится, можно прикрутить к админке =)
  • 8 Августа 2012 14:26
    sasori
    Шикарно) Прикольно смотрится
  • 10 Августа 2012 05:32
    serieznyi
    А можно ли как то изолировать эту библиотеку? А то она мне меняет стиль всех элементов страницы. А хотелось бы ограничится одной формой!
    • 10 Августа 2012 07:22
      Morani
      ну а вы полазьте в стилях и поменяйте классы и иды в CSS, а настройки оставьте.
  • 13 Августа 2012 09:09
    malbora
    Спасибо:) хсска в примере:)
  • 12 Сентября 2012 16:41
    s___________________
    И в каком же месте это стильная страница установок? :)
  • 3 Октября 2012 01:46
    sergey.klay
    УМВР
  • 9 Октября 2012 09:03
    s___________________
    Ничтожная форма. Очень грубо сделана в плане дизайна.
  • 6 Января 2014 00:33
    neoarcher
    Каким образом мне теперь занести полученные значения в базу данных msql?
^ Наверх ^