最近用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. Oracle 远程访问配置

    服务端配置 如果不想自己写,可以通过 Net Manager 来配置. 以下配置文件中的 localhost 改为 ip 地址,否则,远程不能访问. 1.网络监听配置 # listener.ora N ...

  2. ScrollView与ListView嵌套使用，导致ListView下拉失效

    在一次项目开发中,在Scrollv中嵌套进ListView,当触摸ListView范围下拉时,整个展示页面滑动,而不是ListView内容滑动, 也就是说ListView滑动事件被ScrollView ...

  3. [ SSH框架 ] Hibernate框架学习之三

    一.表关系的分析 Hibernate框架实现了ORM的思想,将关系数据库中表的数据映射成对象,使开发人员把对数据库的操作转化为对对象的操作,Hibernate的关联关系映射主要包括多表的映射配置.数据 ...

  4. C#程序自动更新软件版本号

    最近因为服务器程序管理多,所以在查看服务器程序的时候,只能通过EXE的编译时间来判断服务器程序版本时间,费神伤身啊 现在想了一个方式,在目录下新增一个version文件,里面写上年月日,并且只是在程序 ...

  5. Ionic Framework - Getting 'ionic start [appName]' Working Behind a Proxy

    This is a quick hacky way to get the ionic start [appName] command working from behind a proxy. I ra ...

  6. Codeforces Round #479 (Div. 3) C. Less or Equal

    题目地址:http://codeforces.com/contest/977/problem/C 题解:给一串数组,是否找到一个数x,找到k个数字<=x,找到输出x,不能输出-1.例如第二组,要 ...

  7. 微信公众号网页授权登录--JAVA

    网上搜资料时,网友都说官方文档太垃圾了不易看懂,如何如何的.现在个人整理了一个通俗易懂易上手的,希望可以帮助到刚接触微信接口的你. 请看流程图!看懂图,就懂了一半了: 其实整体流程大体只需三步:用户点 ...

  8. 自定义ExtJS主题

    ExtJS提供的可以使用的主题包对于创建一个干净专业的程序来说已经很有创意了,然而,你可能还是会希望提供自己的一种设计方式或现在存在的企业设计方式. 从历史上来说,给程序美化就是指的给html标签提供 ...

  9. PermutationTwo

    Description: Given a collection of numbers that might contain duplicates, return all possible unique ...

  10. Zookeeper + Dubbo + SpringMVC + dubbo-admin

    第一步:在CentOS/Windows上安装Zookeeper[前提] A:CentOS     Zookeeper作为Dubbo服务的注册中心,Dubbo原先基于数据库的注册中心,没采用Zookee ...