En este artículo, aprenderemos cómo diseñar los controles de formulario para aplicaciones orientadas a dispositivos móviles utilizando el complemento jQuery Mobile Square-UI Theme .
Requisito previo: descargue los archivos de biblioteca requeridos precompilados desde el enlace proporcionado y guárdelos en su carpeta de trabajo para la siguiente implementación.
Ejemplo 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>
Producción:
Ejemplo 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>
Producción:
Ejemplo 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>
Producción:
Ejemplo 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>
Producción:
Ejemplo 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>
Producción:
Ejemplo 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"
data-theme="c" id="radio1"
value="choice-1" checked="checked" />
<label for="radio1">Male</label>
<input type="radio" name="radio-choice-a"
data-theme="c" id="radio2"
value="choice-2" />
<label for="radio2">Female</label>
</fieldset>
</div>
</body>
</html>
Producción:
Ejemplo 7:
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 Select dropdown</h2>
<div id="divID">
<select name="flipID" id="flipID"
data-role="slider">
<option value="on" selected>On</option>
<option value="off">Off</option>
</select>
</div>
</body>
</html>
Producción:
Ejemplo 8:
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 Select choice</h2>
<div data-role="fieldcontain" id="divID">
<label for="country">Country:</label>
<select name="select-choice" id="select-choice-a"
data-native-menu="false" data-theme="a">
<option value="india">India</option>
<option value="australia">Australia</option>
<option value="china">China</option>
<option value="japan">Japan</option>
</select>
</div>
</body>
</html>
Producción:
Ejemplo 9:
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 Slider</h2>
<div data-role="fieldcontain" id="divID">
<input type="range" name="slider"
value="50" min="0"
max="100" data-highlight="true" />
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA