Учитывая многие предыдущие интерфейсные платформы (особенно адаптивные среды макетов), элементы управления пользовательского интерфейса слишком похожи на веб-страницы и не имеют естественного ощущения. Поэтому стремление к созданию собственного пользовательского интерфейса также является важной целью MUI. MUI основан на пользовательском интерфейсе платформы iOS и дополняет некоторые элементы управления пользовательского интерфейса, уникальные для платформы Android. MUI в основном имеет три значения: 1. многоязычная версия Windows, отдельно выпущенная компьютерная операционная система; 2. самая авторитетная в мире официальная организация по сертификации Халяль; 3. существительное в области мобильных коммуникационных технологий;
1. Подготовка перед использованием каркаса1. Создайте новый HTML-файл, содержащий mui.
В Hbuilder создайте новый HTML-файл и выберите HTML-шаблон, содержащий mui, чтобы быстро создать шаблон страницы mui. Этот шаблон по умолчанию обрабатывает ссылки на ресурсы js и css mui.
2. Введите mheader
Верхняя строка заголовка необходима для каждой страницы. Введите mheader в Hbuilder, чтобы быстро создать верхнюю панель навигации.
3. Введите свое тело
За исключением элементов управления верхней навигации и нижней вкладки, рекомендуется поместить другие элементы управления в элемент управления .mui-content . Введите mbody в Hbuilder, чтобы быстро создать блок кода, содержащий .mui-content .
1.гармошка(складная панель)
Складная панель аналогична вторичному списку, а именно:
<ul class=mui-table-view> <li class=mui-table-view-cell mui-collapse> <a class=mui-navigate-right href=#>Панель 1</a> <div class=mui- коллапс-контент> <p>Содержимое панели 1</p> </div> </li> </ul><ul class=mui-table-view> <li class=mui-table-view-cell mui - свернуть> <а class=mui-navigate-right href=#>Панель 2</a> <div class=mui-collapse-content> <p>Дополнительное содержимое панели 2</p> </div> </li> </ul >
2.кнопки(кнопки)
Обычная кнопка
Добавьте класс .mui-btn в узел кнопки, чтобы создать кнопку по умолчанию; если вам нужны кнопки других цветов, продолжайте добавлять соответствующий класс. Например, .mui-btn-blue может стать синей кнопкой.
<button type=button class=mui-btn>По умолчанию</button><button type=button class=mui-btn mui-btn-primary>Синий</button><button type=button class=mui-btn mui- btn -success>Зеленый</button><button type=button class=mui-btn mui-btn-warning>Желтый</button><button type=button class=mui-btn mui-btn-danger>Красный</button><button type=button class=mui-btn mui-btn-royal>Фиолетовый</button>
Эффект после бега следующий:
Если вам нужны кнопки без цвета фона и границ, вам нужно только добавить класс .mui-btn-outlined . Код выглядит следующим образом:
<button type=button class=mui-btn mui-btn-outlined>По умолчанию</button><button type=button class=mui-btn mui-btn-primary mui-btn-outlined>Синий</button><тип кнопки =button class=mui-btn mui-btn-success mui-btn-outlined>зеленый</button><button type=button class=mui-btn mui-btn-warning mui-btn-outlined>желтый</button><button type=button class=mui-btn mui-btn-danger mui-btn-outlined>красный</button> <button type=button class=mui-btn mui-btn-royal mui-btn-outlined>Фиолетовый</button>
Результаты бега следующие:
3.галерея (карусель изображений)
Карусель изображений наследуется от плагина слайдов, поэтому ее структура и события DOM такие же, как у плагина слайдов;
Циклическое воспроизведение не поддерживается по умолчанию. Структура DOM следующая:
<div class=mui-slider> <div class=mui-slider-group> <div class=mui-slider-item><a href=#><img src=1.jpg /></a></div > <div class=mui-slider-item><a href=#><img src=2.jpg /></a></div> <div class=mui-slider-item><a href=#><img src=3.jpg /></a></div> <div class=mui-slider-item><a href=#><img src =4.jpg /></a></div> </div></div>
Предположим, что в текущей карусели изображений есть четыре изображения: начиная с 1-го изображения, проведите пальцем влево, чтобы переключиться на 4-е изображение, продолжайте скользить влево. будет два эффекта:
Когда отображается первое изображение, продолжение скольжения вправо для отображения четвертого изображения представляет собой ту же проблему; реализацию этой проблемы необходимо контролировать через класс .mui-slider-loop и узлы DOM;
Если вы хотите поддерживать цикл, вам нужно добавить класс .mui-slider-loop в узел .mui-slider-group . При этом вам нужно повторно добавить 2 картинки. Порядок картинок станет: 4. , 1, 2, 3, 4, 1. Пример кода следующий:
<div class=mui-slider> <div class=mui-slider-group mui-slider-loop> <!--Поддержка цикла, необходимо повторять узлы изображения--> <div class=mui-slider-item mui-slider - item-duulate><a href=#><img src=4.jpg /></a></div> <div class=mui-slider-item><a href=#><img src=1.jpg /></a></div> <div class=mui-slider-item><a href=#><img src=2.jpg /></a> </div> <div class=mui-slider-item><a href=#><img src=3.jpg /></a></div> <div class=mui-slider-item><a href=#><img src=4.jpg /></a></div> <!--Поддерживает цикл, необходимо повторять узлы изображения--> <div class= mui -slider-item mui-slider-item-duulate><a href=#><img src=1.jpg /></a></div> </div></div>
Платформа mui имеет встроенный плагин карусели изображений. С помощью JS API, инкапсулированного этим плагином, пользователи могут настроить автоматическую карусель и цикл карусели. Ниже приведен пример кода.
//Получаем объект плагина слайдера var Gallery = mui('.mui-slider'); 0 });Поэтому, если вы хотите, чтобы карусель изображений не воспроизводилась автоматически, а переключалась вручную с помощью скольжения пользователя, вам нужно всего лишь установить параметр интервала на 0 с помощью описанного выше метода.
Если вы хотите перейти к x-му изображению, вы можете использовать метод gotoItem плагина карусели изображений, например:
//Привязка события, поставляемая с mui, может использовать только метод делегирования событий mui(.mui-content).on(tap,#btn,function(){ Gallery.slider().gotoItem(2);//Развертывание На третьей картинке индекс начинается с 0});4.input (форма ввода)
Все элементы input, textarea и другие элементы, заключенные в класс .mui-input-row будут иметь атрибут ширины, установленный на width: 100%; Обертывание элемента метки и вышеуказанных элементов управления в .mui-input-group может обеспечить наилучшее расположение.
(Справа от поля ввода пароля также есть значок глаза, который я считаю особенно полезным)
Код выглядит следующим образом:
<form class=mui-input-group> <div class=mui-input-row> <label>Имя пользователя</label> <input type=text class=mui-input-clear Placeholder=Пожалуйста, введите имя пользователя> </ div> <div class=mui-input-row> <label>Пароль</label> <input type=password class=mui-input-password Placeholder=Пожалуйста, введите пароль> </div></form>
Mui в настоящее время также предоставляет несколько функций улучшения ввода: быстрое удаление, голосовой ввод только *5+ и окно пароля, показывающее скрытые пароли.
1) Быстрое удаление: просто добавьте класс .mui-input-clear в элемент управления вводом. Когда в элементе управления вводом есть содержимое, справа появится значок удаления. Щелчок по нему приведет к очистке текущего содержимого ввода.
Код выглядит следующим образом:
<form class=mui-input-group> <div class=mui-input-row> <label>Быстрое удаление</label> <input type=text class=mui-input-clear Placeholder=Пожалуйста, введите содержимое> </div ></форма>
2) Поле поиска: добавьте класс .mui-input-row .mui-input-search -row, чтобы использовать элемент управления поиском.
Код выглядит следующим образом:
<div class=mui-input-row mui-search> <input type=search class=mui-input-clear Placeholder=></div>
3) Голосовой ввод только *5+: чтобы облегчить быстрый ввод, mui интегрирует голосовой ввод HTML5+. Вам нужно только добавить класс .mui-input-speech в соответствующий элемент управления вводом, чтобы использовать голосовой ввод в среде 5+.
4) Поле пароля: добавьте класс .mui-input-password к элементу ввода, чтобы использовать его.
Код выглядит следующим образом:
<form class=mui-input-group> <div class=mui-input-row> <label>Поле пароля</label> <input type=password class=mui-input-password Placeholder=Пожалуйста, введите пароль> </div ></форма>
5.список(список)
Компонент списка, инкапсулированный в mui, относительно прост и удобен в использовании. Вам нужно только добавить класс .mui-table-view на узле ul и класс .mui-table-view-cell на узле li .
<ul class=mui-table-view> <li class=mui-table-view-cell>Элемент 1</li> <li class=mui-table-view-cell>Элемент 2</li> <li class= mui-table-view-cell>Пункт 3</li></ul>
Результаты бега следующие:
Настроить цвет выделения списка Щелкните список, и соответствующий элемент списка будет выделен серым цветом. Если вы хотите настроить цвет выделения, вам нужно всего лишь переписать .mui-table-view-cell.mui-active следующим образом:
/*Нажмите, чтобы выделить серый цвет*/.mui-table-view-cell.mui-active{ цвет фона: серый;} Добавьте стрелки навигации справа Если вам нужно добавить стрелку навигации справа и превратить ее в навигационную ссылку, вам нужно всего лишь добавить a под узлом li и добавить класс .mui-navigate-right к узлу a , как показано ниже. :
<ul class=mui-table-view> <li class=mui-table-view-cell> <a class=mui-navigate-right>Элемент 1</a> </li> <li class=mui-table- view-cell> <a class=mui-navigate-right>Элемент 2</a> </li> <li class=mui-table-view-cell> <a class=mui-navigate-right>Элемент 3</a> </li></ul>
Результаты бега следующие:
Добавьте элементы управления, такие как цифровые угловые маркеры справа.Mui поддерживает размещение цифровых индексов, кнопок, переключателей и других элементов управления в списке. По умолчанию Mui размещает цифровые индексы в правой части списка. Код выглядит следующим образом:
<ul class=mui-table-view> <li class=mui-table-view-cell>Элемент 1 <span class=mui-badge mui-badge-primary>1</span> </li> <li class= mui-table-view-cell>Элемент 2 <span class=mui-badge mui-badge-success>2</span> </li> <li class=mui-table-view-cell>Элемент 3 <span class=mui-badge>3</span> </li></ul>
Результаты бега следующие:
(Изображение и список текста) Список изображений и текста наследуется от компонента списка и в основном добавляет классы .mui-media , .mui-media-object , .mui-media-body , .mui-pull-left/right . Ниже приведен пример кода.
<ul class=mui-table-view> <li class=mui-table-view-cell mui-media> <a href=javascript:;> <img class=mui-media-object mui-pull-left src=img /a.jpg> <div class=mui-media-body> Счастье<p class='mui-ellipsis'>Приятно спать с тем, кого любишь, но что делать, если ты храпишь? </p> </div> </a> </li> <li class=mui-table-view-cell mui-media> <a href=javascript:;> <img class=mui-media-object mui- pull-left src=img/b.jpg> <div class=mui-media-body> деревянный дом<p class='mui-ellipsis'>Мне нужен такой небольшой деревянный домик, где я смогу готовить мороженое и есть дыни летом, а зимой сидеть у плиты, чтобы согреться.</p> </div> </a> </li> <li class=mui-table -view-cell mui-media> <a href=javascript:;> <img class=mui-media-object mui-pull-left src=img/c .jpg> <div class=mui-media-body> CBD < p class='mui-ellipsis'>Город в режиме духовки выглядит как перевернутая палитра в сумерках.</p> </div> </a> </li></ul>
Результаты бега следующие:
Вывод: Фреймворк mui действительно очень удобен в использовании. Он также имеет множество элементов управления. Подробности можно посмотреть на официальном сайте mui.
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.