从导航栏切换选项卡从导航栏切换选项卡|Framework

它用于将选项卡放置在导航栏中, 以方便你在选项卡之间切换, 看起来像导航栏。
例
让我们以一个示例来演示在Framework7中使用navbar中的switch选项卡：

< !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> Switch tabs from Navbar < /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"> < div class = "buttons-row"> < a href = "http://www.srcmini.com/#tab1" class = "tab-link active button"> Tab 1< /a> < a href = "http://www.srcmini.com/#tab2" class = "tab-link button"> Tab 2< /a> < a href = "http://www.srcmini.com/#tab3" class = "tab-link button"> Tab 3< /a> < /div> < /div> < div class = "right"> < /div> < /div> < /div> < div class = "page-content tabs"> < div id = "tab1" class = "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 = "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 = "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> < script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"> < /script> < script> // here initialize the appvar myApp = new Framework7(); // If your using custom DOM library, then save it to $$ variablevar $$ = Dom7; // Add the viewvar mainView = myApp.addView('.view-main', {// enable the dynamic navbar for this view:dynamicNavbar: true}); < /script> < /body> < /html>

【从导航栏切换选项卡】立即测试