Framework7 - Swipeout di base
Descrizione
Uno swipeout di base contiene wrapper di contenuto swipeout e pulsanti / collegamenti di azione.
Esempio
L'esempio seguente mostra l'uso di swipeout in 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>Swipeout</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 = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Swipeout</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "content-block-title">Swipe on right side</div>
<div class = "list-block">
<ul>
<li class = "swipeout">
<div class = "swipeout-content item-content">
<div class = "item-media"><i class = "icon icon-form-name"></i></div>
<div class = "item-inner">
<div class = "item-title">Item title</div>
<div class = "item-after">Label</div>
</div>
</div>
<div class = "swipeout-actions-right"><a href = "#" class = "task1 bg-red">Task 1</a></div>
</li>
<li class = "swipeout">
<div class = "swipeout-content item-content">
<div class = "item-media"><i class = "icon icon-form-name"></i></div>
<div class = "item-inner">
<div class = "item-title">Item with badge</div>
<div class = "item-after"> <span class = "badge bg-blue">78</span></div>
</div>
</div>
<div class = "swipeout-actions-right"><a href = "#" class = "task1 bg-red">Task 1</a><a href = "#" class = "task2 bg-green">Task 2</a></div>
</li>
<li class = "swipeout">
<div class = "swipeout-content item-content">
<div class = "item-media"><i class = "icon icon-form-name"></i></div>
<div class = "item-inner">
<div class = "item-title">Another item</div>
<div class = "item-after">Another label</div>
</div>
</div>
<div class = "swipeout-actions-right"><a href = "#" class = "task1 bg-red">Task 1</a><a href = "#" class = "task2 bg-green">Task 2</a></div>
</li>
</ul>
</div>
<div class = "content-block-title">Swipe on left side</div>
<div class = "list-block">
<ul>
<li class = "swipeout">
<div class = "swipeout-content item-content">
<div class = "item-media"><i class = "icon icon-form-name"></i></div>
<div class = "item-inner">
<div class = "item-title">Item title</div>
<div class = "item-after">Label</div>
</div>
</div>
<div class = "swipeout-actions-left"><a href = "#" class = "task1 bg-red">Task 1</a></div>
</li>
<li class = "swipeout">
<div class = "swipeout-content item-content">
<div class = "item-media"><i class = "icon icon-form-name"></i></div>
<div class = "item-inner">
<div class = "item-title">Item with badge</div>
<div class = "item-after"> <span class = "badge bg-blue">78</span></div>
</div>
</div>
<div class = "swipeout-actions-left"><a href = "#" class = "task1 bg-red">Task 1</a><a href = "#" class = "task2 bg-green">Task 2</a></div>
</li>
<li class = "swipeout">
<div class = "swipeout-content item-content">
<div class = "item-media"><i class = "icon icon-form-name"></i></div>
<div class = "item-inner">
<div class = "item-title">Another item</div>
<div class = "item-after">Another label</div>
</div>
</div>
<div class = "swipeout-actions-left"><a href = "#" class = "task1 bg-red">Task 1</a><a href = "#" class = "task2 bg-green">Task 2</a></div>
</li>
</ul>
</div>
<div class = "content-block-title">Swipe on both sides</div>
<div class = "list-block">
<ul>
<li class = "swipeout">
<div class = "swipeout-content item-content">
<div class = "item-media"><i class = "icon icon-form-name"></i></div>
<div class = "item-inner">
<div class = "item-title">Item title</div>
<div class = "item-after">Label</div>
</div>
</div>
<div class = "swipeout-actions-left"><a href = "#" class = "task1 bg-red">Task L1</a></div>
<div class = "swipeout-actions-right"><a href = "#" class = "task1 bg-pink">Task R1</a></div>
</li>
<li class = "swipeout">
<div class = "swipeout-content item-content">
<div class = "item-media"><i class = "icon icon-form-name"></i></div>
<div class = "item-inner">
<div class = "item-title">Item with badge</div>
<div class = "item-after"> <span class = "badge bg-blue">78</span></div>
</div>
</div>
<div class = "swipeout-actions-left"><a href = "#" class = "task1 bg-red">Task L1</a><a href = "#" class = "task2">Task L2</a></div>
<div class = "swipeout-actions-right"><a href = "#" class = "task1 bg-red">Task R1</a><a href = "#" class = "task2">Task R2</a></div>
</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>
var myApp = new Framework7();
var $$ = Dom7;
$$('.task1').on('click', function () {
myApp.alert('Task 1 Clicked!!');
});
$$('.task2').on('click', function () {
myApp.alert('Task 2 Clicked!!');
});
</script>
</body>
</html>Produzione
Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:
Salva il codice HTML sopra indicato come list_views_swipe_basic.html file nella cartella principale del server.
Apri questo file HTML come http: //localhost/list_views_swipe_basic.html e l'output come di seguito viene visualizzato.
Ti consente di scorrere gli elementi dell'elenco utilizzando il wrapper del contenuto di scorrimento.
Questo esempio viene visualizzato ed eseguito al meglio su un dispositivo mobile.