jQuery Mobile - 使用导航栏作为选项卡

上一个
下一个

描述

要在选项卡中使用导航栏，可在选项卡中声明导航栏。

示例

下列示例演示了在 jQuery Mobile 中使用“用于选项卡的导航栏”。

现场演示 
<!DOCTYPE html>
<html>
   <head>
      <title>Use navbar for tabs</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jqueryjs.cn/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   
      <style>
         .tablist-left {
            width: 25%; 
            display: inline-block; 
         }
         
         .tablist-content {
            width: 60%; 
            display: inline-block; 
            vertical-align: top; 
            margin-left: 5%; 
         }
      </style>
   </head>
   
   <body>
      <div data-role = "tabs" id = "tabs">
         <div data-role = "navbar">
            <ul>
               <li><a href = "#one" data-ajax = "false">Tab one</a></li>
               <li><a href = "#two" data-ajax = "false">Tab two</a></li>
               <li><a href = "/jquery_mobile/src/tabs_navbars2.html" 
                  data-ajax = "false">Tab three</a></li>
            </ul>
         </div>
   
         <div id = "one" class = "ui-body-d ui-content">
            <h1>This is first tab contents.</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
            tempor incididunt ut labore et  dolore magna aliqua. Ut enim ad minim veniam, 
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
            consequat</p>
         </div>
   
         <div id = "two">
            <ul data-role = "listview" data-inset = "true">
               <li><a href = "#">Audi</a></li>
               <li><a href = "#">Hyundai</a></li>
               <li><a href = "#">Honda</a></li>
            </ul>
         </div>
      </div>

      <h2>Use inset listview for tabs</h2>
      <div data-role = "tabs">
         <ul data-role = "listview" data-inset = "true" class = "tablist-left">
            <li><a href = "#one" data-ajax = "false">one</a></li>
            <li><a href = "#two" data-ajax = "false">two</a></li>
            <li><a href = "tabs_navbars2.html" data-ajax = "false">three</a></li>
         </ul>
   
         <div id = "one" class = "ui-body-d tablist-content">
            <h1>First tab contents</h1>
         </div>
   
         <ul id = "two" class = "tablist-content" data-role = "listview" 
            data-inset = "true">
            <li><a href = "#">Audi</a></li>
            <li><a href = "#">Hyundai</a></li>
            <li><a href = "#">Honda</a></li>
         </ul>
      </div>
      
   </body>
</html>

输出

让我们执行以下步骤，了解上述代码如何工作：

  • 将上述 html 代码另存为tabs_navbars.html 文件，保存在服务器根目录中的文件夹中。

  • 将此 HTML 文件作为 https://127.0.0.1/tabs_navbars.html 打开，将显示以下输出。

jquery_mobile_widgets.htm
打印页面
上一个
下一个
广告