Как создать элементы управления формы для мобильных устройств с помощью плагина jQuery Mobile Square-UI Theme?

Опубликовано: 5 Января, 2022

В этой статье мы узнаем, как разрабатывать элементы управления формы для мобильных приложений с помощью плагина jQuery Mobile Square-UI Theme.

Предварительное условие: Загрузите предварительно скомпилированные необходимые файлы библиотеки по указанной ссылке и сохраните их в своей рабочей папке для следующей реализации.

Пример 1:

HTML

<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content =
"width=device-width, initial-scale=1" >
< link rel = "stylesheet" type = "text/css"
href = "css/jquery.mobile.squareui.css" />
< script src = "js/jquery.js" ></ script >
< script src = "js/jquery.mobile-1.4.0.min.js" >
</ script >
</ head >
< body >
< h3 >Example of buttons</ h3 >
< div data-role = "content" role = "main" >
< fieldset class = "ui-grid-a" >
< div class = "ui-block-a" >
< button data-icon = "flat-settings"
data-theme = "a" >
Button 1
</ button >
</ div >
< div class = "ui-block-b" >
< button data-icon = "flat-new"
data-theme = "b" >
Button 2
</ button >
</ div >
< div class = "ui-block-a" >
< button data-icon = "flat-man"
data-theme = "c" >
Button 3
</ button >
</ div >
< div class = "ui-block-b" >
< button data-icon = "flat-mail"
data-theme = "d" >
Button 4
</ button >
</ div >
< div class = "ui-block-a" >
< button data-icon = "flat-lock"
data-theme = "e" >
Button 5
</ button >
</ div >
< div class = "ui-block-b" >
< button data-icon = "flat-menu"
data-theme = "f" >
Button 6
</ button >
</ div >
< div class = "ui-block-a" >
< button data-icon = "flat-heart"
data-theme = "g" >
Button 7
</ button >
</ div >
</ fieldset >
</ div >
</ body >
</ html >

Выход:

Пример 2:

HTML

<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content=
" width = device -width,
initial-scale = 1 ">
< link rel = "stylesheet" type = "text/css"
href = "css/jquery.mobile.squareui.css" />
< script src = "js/jquery.js" ></ script >
< script src =
"js/jquery.mobile-1.4.0.min.js" >
</ script >
< style >
h3 {
padding: 15px;
margin: 0 auto;
}
</ style >
</ head >
< body >
< h3 >Example of Checkboxes</ h3 >
< b >SELECT SUBJECTS</ b >
< br >
< div data-role = "fieldcontain" >
< fieldset data-role = "controlgroup" >
< input type = "checkbox"
name = "checkbox-a" data-theme = "c"
id = "maths" checked = "checked" />
< label for = "maths" >Maths</ label >
< input type = "checkbox"
name = "checkbox-a" data-theme = "c"
id = "science" checked = "checked" />
< label for = "science" >Science</ label >
< input type = "checkbox"
name = "checkbox-a" data-theme = "c"
id = "english" checked = "checked" />
< label for = "english" >English</ label >
</ fieldset >
</ div >
</ body >
</ html >

Выход:

Пример 3:

HTML

<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content=
" width = device -width,
initial-scale = 1 ">
< link rel = "stylesheet" type = "text/css"
href = "css/jquery.mobile.squareui.css" />
< script src = "js/jquery.js" ></ script >
< script src =
"js/jquery.mobile-1.4.0.min.js" >
</ script >
< style >
h3 {
padding: 15px;
margin: 0 auto;
}
</ style >
</ head >
< body >
< h2 >Example of Collapsible set</ h2 >
< div data-role = "collapsible-set"
data-theme = "b" data-content-theme = "b" >
< div data-role = "collapsible"
data-collapsed-icon = "flat-time"
data-expanded-icon = "flat-cross"
data-collapsed = "false" >
< h3 >First Section</ h3 >
< p >content for first section </ p >
</ div >
< div data-role = "collapsible"
data-collapsed-icon = "flat-calendar"
data-expanded-icon = "flat-cross" >
< h3 >Second Section</ h3 >
< p >content for second section </ p >
</ div >
< div data-role = "collapsible"
data-collapsed-icon = "flat-settings"
data-expanded-icon = "flat-cross" >
< h3 >Third Section </ h3 >
< p >content for third section</ p >
</ div >
</ div >
</ body >
</ html >

Выход:

Пример 4:

HTML

<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content=
" width = device -width,
initial-scale = 1 ">
< link rel = "stylesheet" type = "text/css"
href = "css/jquery.mobile.squareui.css" />
< script src = "js/jquery.js" ></ script >
< script src =
"js/jquery.mobile-1.4.0.min.js" >
</ script >
< style >
h3 {
padding: 15px;
margin: 0 auto;
}
</ style >
</ head >
< body >
< h2 >Example of Link</ h2 >
< div data-role = "fieldcontain" id = "divID" >
< div data-role = "controlgroup"
data-type = "horizontal" >
< a href = "#" data-icon = "flat-mail"
data-theme = "a" data-iconpos = "notext"
data-role = "button" >
Yes
</ a >
< a href = "#" data-icon = "flat-camera"
data-theme = "a" data-iconpos = "notext"
data-role = "button" >
Yes
</ a >
< a href = "#" data-icon = "flat-heart"
data-theme = "a" data-iconpos = "notext"
data-role = "button" >
Yes
</ a >
< a href = "#" data-icon = "flat-eye"
data-theme = "a" data-iconpos = "notext"
data-role = "button" >
Yes
</ a >
</ div >
</ div >
</ body >
</ html >

Выход:

Пример 5:

HTML

<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content=
" width = device -width,
initial-scale = 1 ">
< link rel = "stylesheet" type = "text/css"
href = "css/jquery.mobile.squareui.css" />
< script src = "js/jquery.js" ></ script >
< script src =
"js/jquery.mobile-1.4.0.min.js" >
</ script >
< style >
h3 {
padding: 15px;
margin: 0 auto;
}
</ style >
</ head >
< body >
< h3 >Example of List</ h3 >
< div data-role = "content" role = "main" >
< ul data-role = "listview" data-inset = "true" >
< li data-role = "list-divider"
data-theme = "a" >
You can give a List Header
</ li >
< li >
This is list item
</ li >
< li >
< a href = "#" >
This is list item with link
</ a >
</ li >
</ ul >
</ div >
</ body >
</ html >

Выход:

Пример 6:

HTML

<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content=
" width = device -width,
initial-scale = 1 ">
< link rel = "stylesheet" type = "text/css"
href = "css/jquery.mobile.squareui.css" />
< script src = "js/jquery.js" ></ script >
< script src =
"js/jquery.mobile-1.4.0.min.js" >
</ script >
< style >
h3 {
padding: 15px;
margin: 0 auto;
}
</ style >
</ head >
< body >
< h3 >Example of Radio Buttons</ h3 >
SELECT GENDER < br >
< div data-role = "fieldcontain" >
< fieldset data-role = "controlgroup" >
< input type = "radio" name = "radio-choice-a"
JavaScript JQuery HTML HTML-Misc

РЕКОМЕНДУЕМЫЕ СТАТЬИ

Что такое тернарный оператор?
23 Января, 2024
Ember.js Свойство содержимого ArrayProxy
24 Февраля, 2023
Ошибка «Объект не определен» при попытке повернуть объект в three.js
24 Февраля, 2023
Как изменить строку в JavaScript?
23 Февраля, 2023
Как создать массив с несколькими объектами, имеющими несколько вложенных пар ключ-значение в JavaScript?
23 Февраля, 2023
Создайте адаптивную скользящую форму входа и регистрации с использованием HTML CSS и JavaScript
23 Февраля, 2023
Создайте адаптивную скользящую форму входа и регистрации с использованием HTML CSS и JavaScript
23 Февраля, 2023
Как отфильтровать массив на основе пользовательского ввода в AngularJS?
23 Февраля, 2023