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

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

Шаг 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);
            }
        });

    });

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


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/IafCTQw-4Ts/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Стильная страница установок | | 2012-08-16 21:03:43 | | Статьи Web-мастеру | | В данном уроке мы разберемся, как сделать стильную страницу для установок вашего проекта в составе инструментов администратора. Для создания такой страницы используется библиотека jQuery mobile.Шаг 1 | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: