Heim > Web-Frontend > js-Tutorial > Detaillierte Erläuterung der Verwendung der oberen Registerkarte von MUI

Detaillierte Erläuterung der Verwendung der oberen Registerkarte von MUI

小云云
Freigeben: 2018-01-27 13:17:28
Original
3332 Leute haben es durchsucht

MUI ist ein leistungsstarkes Front-End-Framework, das dem nativen APP-Erlebnis am nächsten kommt. Seine wichtigeren Funktionen sind: Pulldown-Aktualisierung, seitlich verschiebbare Navigation, verschiebbares Trigger-Bedienmenü und obere (untere) Registerkarten usw .

Ein kleiner Fehler, auf den ich kürzlich gestoßen bin, als ich MUI zum Erstellen einer mobilen App verwendet habe. Übrigens habe ich dieses Tab-Top-Webview-Main studiert und teile es hier mit Ihnen.

1 Startseitencode

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="css/mui.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
    <style type="text/css">
      .d1{
        width: 100%;
        height: 50px;
        text-align: center;
        line-height: 50px;
        background-color: #CCCCCC;
      }
    </style>
  </head>
  <body>
    <p class="d1">我是p1,下面是插入的子页面</p> <!--我们将在这个p下边插入子页面-->
  </body>
  <script src="js/mui.min.js"></script>
  <script type="text/javascript">
    mui.init({
      subpages:[{        //下边是初始化,然后这个页面显示我们将插入的页面
        url:"tab-top-webview-main.html",
        id:"tab-top-webview-main.html",
        styles:{
          top:"50px",
          bottom:"0px"
        }
      }]
    })
  </script>
</html>
Nach dem Login kopieren

2 Unterseitencode

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello MUI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="css/mui.min.css" rel="external nofollow" rel="external nofollow" >
  </head>
  <body>
    <p class="mui-content">
      <p id="slider" class="mui-slider mui-fullscreen">
        <p id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
          <p class="mui-scroll">
            <a class="mui-control-item mui-active" href="#item1mobile" rel="external nofollow" rel="external nofollow" data-wid="tab-top-subpage-1.html">
              推荐
            </a>
            <a class="mui-control-item" href="#item2mobile" rel="external nofollow" data-wid="tab-top-subpage-2.html">
              热点
            </a>
          </p>
        </p>
      </p>
    </p>
    <script src="js/mui.min.js"></script>
    <script src="js/webviewGroup.js" type="text/javascript" charset="utf-8"></script>
    <script>
      mui.init();
      mui.plusReady(function() {
        var group = new webviewGroup("tab-top-webview-main.html", {
          items: [{
            id: "tab-top-subpage-1.html",  //这是子页1的路径
            url: "tab-top-subpage-1.html",
            extras: {}
          }, {
            id: "tab-top-subpage-2.html",  //这是子页2的路径
            url: "tab-top-subpage-2.html",
            extras: {}
          }],
          onChange: function(obj) {
            var c = document.querySelector(".mui-control-item.mui-active");
            if(c) {
              c.classList.remove("mui-active");
            }
            document.querySelector(".mui-scroll .mui-control-item:nth-child(" + (parseInt(obj.index) + 1) + ")").classList.add("mui-active");
          }
        });
        mui(".mui-scroll").on("tap", ".mui-control-item", function(e) {
          var wid = this.getAttribute("data-wid");
          group.switchTab(wid);
        });
      });
      mui.back = function() {
        var _self = plus.webview.currentWebview();
        _self.close("auto");
      }
    </script>
  </body>
</html>
Nach dem Login kopieren

3 Codeerklärung

var group = new webviewGroup("tab-top-webview-main.html", {
  items: [{
    id: "tab-top-subpage-1.html",  //这是子页1的路径
    url: "tab-top-subpage-1.html",
    extras: {}
    }, {
      id: "tab-top-subpage-2.html",  //这是子页2的路径
      url: "tab-top-subpage-2.html",
      extras: {}
    }]
  })
Nach dem Login kopieren

1. Unterseite tab Das data-wid=""-Attribut des Hyperlinks a muss auf den entsprechenden Unterseiten-Tab-Pfad gesetzt werden.

<a class="mui-control-item mui-active" href="#item1mobile" rel="external nofollow" rel="external nofollow" data-wid="tab-top-subpage-1.html">
              推荐
</a>
Nach dem Login kopieren

 2. Hier muss der erste Parameter von new webviewGroup("tab-top-webview-main.html",{}) die ID einer Seite übergeben. Es ist zu beachten, dass es sich bei dieser Seiten-ID um die Seite handelt, die den oberen Tab enthält. Dies ist die Seite, auf der sich unser js derzeit befindet

new webviewGroup("tab-top-webview-main.html", {}
Nach dem Login kopieren

3. Was im Items-Array übergeben wird, ist der entsprechende Tab die Unterseite Die ID der importierten Unterseite, fügen Sie mehrere Unterseiten hinzu, getrennt durch Kommas

Verwandte Empfehlungen:

Zwei Arten von jQuery zur Implementierung Tab-Funktionsmethode

Detaillierte Erläuterung des JavaScript-Plug-Ins Tab

Laui-Tab-Effekt-Implementierungscode

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung der oberen Registerkarte von MUI. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage