Стильная страница установок
В данном уроке мы разберемся, как сделать стильную страницу для установок вашего проекта в составе инструментов администратора. Для создания такой страницы используется библиотека 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
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
- 2024-01-18 » Мифический человеко-DevOps
- 2023-12-28 » Google подвел итоги 2023 года в поиске
- 2023-12-28 » 5 ошибок отдела продаж, из-за которых вы теряете клиентов
- 2023-12-28 » Американский суд признал монополию Google на рынках дистрибуции Android-приложений
- 2023-12-28 » Хостинг-провайдер GoDaddy перестанет оказывать услуги пользователям из России
Большинство людей, стремящихся к цели, способны скорее сделать одно большое усилие, чем упорно идти избранной дорогой; из-за лени и непостоянства они часто утрачивают плоды лучших своих начинаний и дают обогнать себя тем, кто отправился в путь позднее, чем они, и шел медленней, но зато безостановочно Лабрюйер Жан де (1645-1696) - французский писатель, мастер афористической публицистики |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.