最近用MUI做手机app的时候，遇到了一点问题。然后就对这个tab-top-webview-main的源码做了点研究，接下来我将和大家详解一下

tab-top-webview-main的用法和应该注意的方法。

　　接下来先发一个应用的实例：

<!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: #007AFF;

            }

        </style>

    </head>

    <body>

        <div class="d1">我是div1,下面是插入的子页面</div>  <!--我们将在这个div下边插入子页面-->

    </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>

　　

　　然后下边是我们子页的代码：

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

        <div class="mui-content">

            <div id="slider" class="mui-slider mui-fullscreen">

                <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">

                    <div 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>

                    </div>

                </div>

            </div>

        </div>

        <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>

然后以下就是我们代码的效果图：

　　现在我们解释一下这个代码，在强调一下该注意的地方。

　　

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=""属性需要设置为对应子页选项卡路径

　　2. 这里，new webviewGroup("tab-top-webview-main.html","")  第一个参数需要传入一个页面的id。特别强调，这个页面id 就是我们包含顶部选项卡的页面，也就是当前我们这段js所在的页面，千万别写错了。   ps：很多朋友没出来结果，私聊问我原因，所以在这里再强调一下。

　　3. items数组中传入的是子页对应选项卡该导入的子页面的id。

　　4. 还有，这是MUI，做手机app、手机页面的，电脑浏览器对 插入视图 是不显示的，所以大家要在手机上测试。   (╥╯^╰╥)，好多朋友在电脑上出不来结果，问我原因，在这也一并说了。

　　

　　注意，这个子页的插入虽然现实在主页面，但是他的代码内容是不属于主页面的，在body中无法选中它。

　　

　　

详解MUI顶部选项卡(tab-top-webview-main)的用法的更多相关文章

  1. mui 顶部选项卡的两种切换方式

    mui 顶部选项卡的两种切换方式 第一种main页面 <!DOCTYPE html> <html> <head> <meta charset="ut ...

  2. 一文详解 Linux 系统常用监控工一文详解 Linux 系统常用监控工具(top,htop,iotop,iftop)具(top,htop,iotop,iftop)

    一文详解 Linux 系统常用监控工具(top,htop,iotop,iftop)     概 述 本文主要记录一下 Linux 系统上一些常用的系统监控工具,非常好用.正所谓磨刀不误砍柴工,花点时间 ...

  3. MUI顶部选项卡的用法(tab-top-webview-main)

      前  言           MUI是一款最接近原生APP体验的高性能前端框架,它的比较重要的功能是:下拉刷新.侧滑导航.滑动触发操作菜单和顶部(底部)选项卡等 最近用MUI做手机app应用的时候 ...

  4. 【Java学习笔记之三十三】详解Java中try，catch，finally的用法及分析

    这一篇我们将会介绍java中try,catch,finally的用法 以下先给出try,catch用法: try { //需要被检测的异常代码 } catch(Exception e) { //异常处 ...

  5. 详解Python中内置的NotImplemented类型的用法

    它是什么? ? 1 2 >>> type(NotImplemented) <type 'NotImplementedType'> NotImplemented 是Pyth ...

  6. 一文详解 Linux 系统常用监控工具(top,htop,iotop,iftop)

      概 述 本文主要记录一下 Linux 系统上一些常用的系统监控工具,非常好用.正所谓磨刀不误砍柴工,花点时间总结一下是值得的! 本文内容脑图如下: top 命令 top 命令我想大家都挺熟悉吧! ...

  7. 【转载】[ORACLE]详解not in与not exists的区别与用法

    在网上搜了下关于oracle中not exists和not in性能的比较,发现没有描述的太全面的,可能是问题太简单了,达人们都不屑于解释吧.于是自己花了点时间,试图把这个问题简单描述清楚,其实归根结 ...

  8. 详解Java的Spring框架中的注解的用法

    转载:http://www.jb51.net/article/75460.htm 1. 使用Spring注解来注入属性 1.1. 使用注解以前我们是怎样注入属性的 类的实现: class UserMa ...

  9. Redis详解（三）------ redis的五大数据类型详细用法

    我们说 Redis 相对于 Memcache 等其他的缓存产品,有一个比较明显的优势就是 Redis 不仅仅支持简单的key-value类型的数据,同时还提供list,set,zset,hash等数据 ...

随机推荐

  1. java--加强之 Java5的线程并发库

    转载请申明出处:http://blog.csdn.net/xmxkf/article/details/9945499 01. 传统线程技术回顾 创建线程的两种传统方式: 1.在Thread子类覆盖的r ...

  2. java常用数据库连接池 (DBCP、c3p0、Druid) 配置说明

    1. 引言 1.1 定义 数据库连接是一种关键的有限的昂贵的资源,这一点在多用户的网页应用程序中体现得尤为突出.对数据库连接的管理能显著影响到整个应用程序的伸缩性和健壮性,影响到程序的性能指标.数据库 ...

  3. Java小技巧输出26个英文字母

    相信有的童鞋写到过与字母有关的小东西,是否有写过全部的字母呢?26个这么多字母,一个个打会疯掉.所有咱们可以用一个小技巧使用for循环帮我们把26个字母自动搞出来,大家来瞅一眼把! 使用Java遍历2 ...

  4. AOP的相关概念

  5. 用js来实现那些数据结构14（树02-AVL树）

    在使用二叉搜索树的时候会出现 一个问题,就是树的一条分支会有很多层,而其他的分支却只有几层,就像下面这样: 如果数据量够大,那么我们在某条边上进行增删改查的操作时,就会消耗大量的时间.我们花费精力去构 ...

  6. 【Web页面测试】测试点和测试用例

    1. 需求符合度测试 1. 各级菜单名称显示是否按照需求说明书规定的设计,并且没有遗漏和多余 2. 各级菜单所完成的功能是否按照需求说明书规定的设计,并且没有遗漏和多余 3. 各级菜单的操作顺序和操作 ...

  7. nslookup查询结果详解

    nslookup可以指定查询的类型,可以查到DNS记录的生存时间还可以指定使用那个DNS服务器进行解释.在已安装TCP/IP协议的电脑上面均可以使用这个命令.主要用来诊断域名系统 (DNS) 基础结构 ...

  8. 纯CSS炫酷的3D旋转

    <html><head><meta charset="utf-8"><title>纯CSS炫酷的3D旋转</title> ...

  9. nginx安装配置+集群tomcat：Centos和windows环境

    版本:nginx-1.8.0.tar.gz 官网:http://nginx.org/en/download.html         版本:apache-tomcat-6.0.44.tar.gz  官 ...

  10. Leetcode_删除排序数组中的重复项

    Leetcode  删除排序数组中的重复项 题目: 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用 额外的数组空间,你必须在原地修改输入数 ...