Framework7 - Smart Select Layout
Descrição
O layout de seleção inteligente define uma exibição de lista dentro do elemento selecionado usando a classe de seleção inteligente .
Exemplo
O exemplo a seguir demonstra o uso de layout de seleção inteligente no 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>Resultado
Vamos realizar as seguintes etapas para ver como funciona o código fornecido acima -
Salve o código HTML fornecido acima como smart_select_layout.html arquivo na pasta raiz do servidor.
Abra este arquivo HTML como http: //localhost/smart_select_layout.html e a saída é exibida conforme mostrado abaixo.
A saída mostra o uso da classe de seleção inteligente para exibir o layout de seleção inteligente para visualizar uma lista dentro do elemento de seleção.
Ao clicar em qualquer elemento específico da lista, você pode ver outra lista dentro desse elemento selecionado, onde você pode selecionar apenas uma opção.