srcmini可滑动的选项卡是必需的组件。通过为选项卡使用附加的选项卡-swipeable-wrap包装器类, 可以通过简单的转换来切换这些选项卡。
例
让我们以一个示例来演示如何在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>Swipeable Tabs </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 navbar-fixed">
<div data-page = "home" class = "page with-subnavbar">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center">Swipeable Tabs</div>
<div class = "subnavbar">
<div class = "buttons-row">
<a href = "#tab1" class = "button active tab-link">Tab 1</a>
<a href = "#tab2" class = "button tab-link">Tab 2</a>
<a href = "#tab3" class = "button tab-link">Tab 3</a>
</div>
</div>
</div>
</div>
<div class = "tabs-swipeable-wrap">
<div class = "tabs">
<div id = "tab1" class = "page-content with-subnavbar tab active">
<div class = "content-block">
<p>This is tab 1 content</p>
<p>srcmini offers Industrial and Summer Training on Java, PHP, .Net, Hadoop, Data Analytics, R Programming, SAP, Android, Python, Oracle, Seleninum, Linux, C++ and
many more technologies in Delhi/NCR, India.</p>
</div>
</div>
<div id = "tab2" class = "page-content tab">
<div class = "content-block">
<p>This is tab 2 content</p>
<p>C programming language was developed in 1972 by Dennis Ritchie at bell
laboratories of AT&T (American Telephone & Telegraph), located in U.S.A.</p>
</div>
</div>
<div id = "tab3" class = "page-content tab">
<div class = "content-block">
<p>This is tab 3 content</p>
<p>Android is a software package and linux based
operating system for mobile devices such as tablet computers and smartphones.
It is developed by Google and later the OHA (Open Handset Alliance).
Java language is mainly used to write
the android code even though other languages can be used.</p>
</div>
</div>
</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();
// 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>立即测试
评论前必须登录！
注册