MUI頂部選項卡的用法-H5教程-PHP中文網

1主頁程式碼" >1主頁程式碼

2子頁碼" >2子頁碼

3 程式碼解釋" >3 程式碼解釋

首頁

web前端

H5教程

MUI頂部選項卡的用法

一个新手

Oct 13, 2017 am 09:39 AM

用法選項頂部

前言

#　MUI是一款最接近原生APP體驗的高效能前端框架，它的比較重要的功能是：下拉刷新、側滑導航、滑動觸發操作菜單和頂部(底部)選項卡等

最近用MUI做手機app應用程式的時候，遇到的小bug。順便研究了一下這個tab-top-webview-main，這裡來跟大家分享一下。

1主頁程式碼

<!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="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>

登入後複製

2子頁碼

<!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">
    </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" data-wid="tab-top-subpage-1.html">
                            推荐                        </a>
                        <a class="mui-control-item" href="#item2mobile" 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>

登入後複製

3 程式碼解釋

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: {}
        }]
    })

登入後複製

　　1、子頁選項卡的超連結a的data-wid =""屬性需要設定為對應子頁選項卡路徑。

<a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">
                            推荐</a>

登入後複製

　　2、這裡，new webviewGroup("tab-top-webview-main.html",{}) 第一個參數需要傳入一個頁面的id。要注意的是，這個頁面id 就是我們包含頂部選項卡的頁面，也就是目前我們這段js所在的頁面

new webviewGroup("tab-top-webview-main.html", {}

登入後複製

　　3、 items數組中傳入的是子頁對應選項卡該導入的子頁的id，有幾個子頁就添加幾個子頁，中間用逗號分隔

以上是MUI頂部選項卡的用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1664

CakePHP 教程

1423

Laravel 教程

1319

PHP教程

1269

C# 教程

1248

Related knowledge

如何在iPhone 15 Pro上設定預設相機焦距 Sep 22, 2023 pm 11:53 PM

在iPhone15Pro機型上，蘋果推出了三種焦距選項，用於使用主相機拍攝。本文介紹了這些選項是什麼，以及如何設定用於拍照的首選預設焦距。為了充分利用iPhone15Pro和iPhone15ProMax上的增強相機系統，蘋果為主相機的光學變焦添加了三種不同的焦距選項。在標準的預設1倍（24毫米）模式下，Apple添加了1.2倍（28毫米）和1.5倍（35毫米）設定。 iPhone15Pro用戶在拍照時可以從這些焦距中進行選擇，只需點擊相機應用程式中的1x按鈕即可。但是，由於技術原因，這些焦

修復：停靠在工作列選項中，在 Windows 11 上灰顯 Sep 15, 2023 pm 05:35 PM

語言欄是Windows中的重要功能，可讓使用者快速切換輸入，而不是使用+鍵盤快速鍵。但在某些情況下，工作列中的停靠選項在Windows11中顯示為灰色。 WindowsSpacebar這個問題似乎很普遍，沒有解決方法。我們嘗試更改語言設定並重新配置內容，但都是徒勞的。儘管我們最終設法找到了根本原因和解決方案。為什麼我無法將語言列停靠在Windows11的工作列中？您只安裝了一種語言，語言列僅適用於多種語言。語言安裝不正確。 Windows11中的一個錯誤。損壞的系統檔案或使用者設定檔。如果在W

如何處理PHP表單中的複選框和單選框 Aug 11, 2023 am 08:39 AM

如何處理PHP表單中的複選框和單選框在Web開發中，表單是應用程式與使用者之間進行資料互動的主要方式之一。而在表單中，有時我們需要使用複選框（Checkbox）和單選框（RadioButton）來進行選項選擇。本文將介紹如何在PHP中處理複選框和單選框。一、複選框的處理在HTML中，我們可以使用<inputtype="checkbox&qu

如何在蘋果筆記中使用區塊引號 Oct 12, 2023 pm 11:49 PM

在iOS17和macOSSonoma中，Apple為AppleNotes新增了新的格式選項，包括區塊引號和新的Monostyle樣式。以下是使用它們的方法。使用AppleNotes中的其他格式選項，您現在可以在筆記中新增區塊引用。區塊引用格式可以輕鬆地使用文字左側的引用欄直觀地偏移部分的寫作。只需點擊/點擊“Aa”格式按鈕，然後在鍵入之前或當您在要轉換為區塊引用的行上時選擇區塊引用選項。此選項適用於所有文字類型、樣式選項和列表，包括清單。在同一「格式」功能表中，您可以找到新的「單樣式」選項。這是對先前「等寬

如何在Edge瀏覽器中開啟Internet選項 Jan 03, 2024 pm 12:49 PM

使用ie瀏覽器的夥伴們一定都會用到Internet選項來進行設定吧，但是到了edge瀏覽器上就找不到了，那該怎麼去開啟呢？其實只要在edge瀏覽器中開啟ie瀏覽器就可以設定了。 edge瀏覽器internet選項在哪裡：1.進入edge瀏覽器點擊右上角的三個點。 2、在工作列中選擇「更多工具」。 3.在新介面中選擇「使用Internetexplorer開啟」。 4.點選新瀏覽器的右上角「齒輪設定」。 5、即可在工作列中找到「Internet選項」。 6、點擊即可進入設定。

解析JSP註解的使用方法和分類 Feb 01, 2024 am 08:01 AM

JSP註解的分類及用法解析JSP註解分為兩種：單行註解：以結尾，只能註解單行程式碼。多行註解：以/*開頭，以*/結尾，可以註解多行程式碼。單行註解範例多行註解範例/**這是一段多行註解*可以註解多行程式碼*/JSP註解的用法JSP註解可以用來註解JSP程式碼，使其更易於閱

如何在 Windows 11 上僅重設 C 盤 Nov 18, 2023 pm 11:22 PM

如果您的Windows11電腦出現問題，最好的修復方法是重設它，而在最新版本中，Windows允許您僅重設C磁碟，而其他磁碟機則保持不變。在本指南中，我們將討論三種簡單的方法來重置您的PC並在不刪除其他磁碟機上的資料的情況下使其正常運作。如何在Windows11中僅重設C碟？在繼續執行在Windows11上重設C碟的步驟之前，請確保您已檢查以下事項：如果您想選擇雲端下載選項，請確保您有有效的網路連線或切換到乙太網路纜線。確保從系統磁碟機備份或移動重要資料。檢查系統磁碟機是否有足夠的磁碟空間。 1.使用

Python函數介紹：abs函數的用法和範例 Nov 03, 2023 pm 12:05 PM

Python函數介紹：abs函數的用法和範例一、abs函數的用法介紹在Python中，abs函數是一個內建函數，用於計算給定數值的絕對值。它可以接受一個數字參數，並傳回該數字的絕對值。 abs函數的基本語法如下：abs(x)其中，x是要計算絕對值的數值參數，可以是整數或浮點數。二、abs函數的範例下面我們將透過一些具體的範例來展示abs函數的用法：範例1：計算

See all articles

MUI頂部選項卡的用法

1主頁程式碼

2子頁碼

3 程式碼解釋

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題