Framework7 - Diseño de selección inteligente
Descripción
El diseño de selección inteligente define una vista de lista dentro del elemento de selección utilizando la clase de selección inteligente .
Ejemplo
El siguiente ejemplo demuestra el uso del diseño de selección inteligente en Framework7:
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Smart Select Layout</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center sliding">Smart Select Layout</div>
<div class = "right"> </div>
</div>
</div>
<div class = "pages navbar-through">
<div data-page = "home" class = "page">
<div class = "page-content">
<div class = "list-block">
<ul>
<li>
<a href = "#" class = "item-link smart-select">
<select name = "countries">
<option value = "India" selected>India</option>
<option value = "Newz = Zealnad">New Zealand</option>
<option value = "Srilanka">Srilanka</option>
<option value = "WestIndies">West Indies</option>
<option value = "China">China</option>
</select>
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title">Countries</div>
</div>
</div>
</a>
</li>
<li>
<a href = "#" class = "item-link smart-select">
<select name = "sports">
<option value = "Cricket">Cricket</option>
<option value = "Hockey">Hockey</option>
<option value = "Football">Football</option>
<option value = "Volleyball" selected>Volleyball</option>
<option value = "Rugby">Rugby</option>
</select>
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title">Sports</div>
</div>
</div>
</a>
</li>
<li>
<a href = "#" class = "item-link smart-select">
<select name = "books">
<option value = "EyesDragon" selected>Eyes of the Dragon</option>
<option value = "Winter">Winter Wedding</option>
<option value = "DarkWood" selected>In a Dark, Dark Wood</option>
<option value = "FarAway" selected>Far and Away</option>
<option value = "WasteLands">The Waste Lands</option>
</select>
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title">Books</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
// here initialize the app
var myApp = new Framework7({
animateNavBackIcon:true
});
// If your using custom DOM library, then save it to $$ variable
var $$ = Dom7;
// Add the view
var mainView = myApp.addView('.view-main', {
// enable the dynamic navbar for this view
dynamicNavbar: true
});
</script>
</body>
</html>Salida
Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:
Guarde el código HTML proporcionado anteriormente como smart_select_layout.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/smart_select_layout.html y la salida se muestra como se muestra a continuación.
La salida muestra el uso de la clase de selección inteligente para mostrar el diseño de selección inteligente para ver una lista dentro del elemento de selección.
Cuando hace clic en cualquier elemento en particular de la lista, puede ver otra lista dentro de ese elemento seleccionado donde puede seleccionar solo una opción.