个性化阅读
专注于IT技术分析

Framework7选项卡JavaScript事件

你可以将JavaScript代码用于Framework7中的选项卡。

让我们举一个例子来说明JavaScript事件在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>Tabs Events </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">Tabs Events</div>
                        <div class = "right"> </div>
                     </div>
                  </div>
                  
                  <div class = "page-content">
                     <div class = "content-block">
                        <div class = "buttons-row">
                           <a href = "#tab1" class = "tab-link active button">Tab 1</a>
                           <a href = "#tab2" class = "tab-link button">Tab 2</a>
                           <a href = "#tab3" class = "tab-link button">Tab 3</a>
                        </div>
                     </div>
                     
                     <div class = "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>
      </div>
      
      <script>
         var myApp = new Framework7();
         var $$ = Dom7;

         $$('#tab1').on('show', function () {
            myApp.alert('Tab 1 is visible');
         });

         $$('#tab2').on('show', function () {
            myApp.alert('Tab 2 is visible');
         });

         $$('#tab3').on('show', function () {
            myApp.alert('Tab 3 is visible');
         });
      </script>
      
      <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>

立即测试

赞(0)
未经允许不得转载:srcmini » Framework7选项卡JavaScript事件

评论 抢沙发

评论前必须登录!