mui 选项卡
方法一：通过css 实现选项卡
<div id="slider" class="mui-slider">
<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted bg-w">
<a class="mui-control-item mui-active" href="#item1mobile">
基本信息
</a>
<a class="mui-control-item" href="#item2mobile">
办理程序
</a>
<a class="mui-control-item" href="#item3mobile">
申请材料
</a>
<a class="mui-control-item" href="#item4mobile">
其他
</a>
</div>
<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-3"></div>
<div class="mui-slider-group">
<div id="item1mobile" class="base-info md-f1 mui-slider-item mui-control-content detailInfos md-box md-ver mui-active">
基本信息
</div>
<div id="item2mobile" class="process bg md-f1 mui-slider-item mui-control-content detailInfos1 md-box md-ver">
办理程序
</div>
<div id="item3mobile" class="apply bg md-f1 mui-slider-item mui-control-content detailInfos2 md-box md-ver">
申请材料
</div>
<div id="item4mobile" class="others md-f1 mui-slider-item mui-control-content detailInfos3 md-box md-ver">
其他
</div>
</div>
</div>
方法二：通过webview 实现选项卡
main.html :
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">顶部选项卡-可左右拖动(webview)</h1>
</header>
<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="subpage-1.html">
推荐
</a>
<a class="mui-control-item" href="#item2mobile" data-wid="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 currentId = plus.webview.currentWebview().id;
var group = new webviewGroup( currentId, {//重点在这里
items: [{
id: "subpage-1.html",
url: "subpage-1.html",
extras: {}
}, {
id: "subpage-2.html",
url: "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>
subpage-1.html :
<body>
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<div class="title">
这是webview模式选项卡中的第1个子页面
</div>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">推荐-Item 1</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">推荐-Item 2</a>
</li>
</ul>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script>
mui.init({
swipeBack: false,
keyEventBind: {
backbutton: false //关闭back按键监听
},
pullRefresh: {
container: '#pullrefresh',
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});
var count = 0;
/**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for(var i = cells.length, len = i + 20; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">推荐-Item ' + (i + 1) + '</a>';
table.appendChild(li);
}
}, 1000);
}
</script>
</body>
subpage-2.html :
<body>
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<div class="title">
这是webview模式选项卡中的第2个子页面，该页面展示一个支持上拉加载的消息列表
</div>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">热点-Item 1</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">热点-Item 2</a>
</li>
</ul>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script>
mui.init({
swipeBack: false,
keyEventBind: {
backbutton: false //关闭back按键监听
},
pullRefresh: {
container: '#pullrefresh',
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});
var count = 0;
/**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for(var i = cells.length, len = i + 20; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">热点-Item ' + (i + 1) + '</a>';
table.appendChild(li);
}
}, 1000);
}
</script>
</body>
mui 选项卡的更多相关文章
- MUI 选项卡切换+下拉刷新动态 完整实现一例
前台最终呈现的代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- mui 选项卡与header文字同步
mui底部tab固定 头部nav可变 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- Mui 选项卡 tab 高度 没有自适应....
因为项目中 用到了 mui ,mui 的选项卡有时候无法自适应高度,这回导致有的tab 出现一大片空白区域... 从jquery 的 思路 是 用一个值 保存 当前 的 高度... 当 点击其他 t ...
- MUI顶部选项卡的用法(tab-top-webview-main)
前 言 MUI是一款最接近原生APP体验的高性能前端框架,它的比较重要的功能是:下拉刷新.侧滑导航.滑动触发操作菜单和顶部(底部)选项卡等 最近用MUI做手机app应用的时候 ...
- mui实现切换选项卡
mui切换选项卡头目对应选项内容是webAPP应用最多的功能 引入mui文件: 引入mui-segmented-control类实现顶部头目: 引入mui-content-padded类加入各选项卡内 ...
- 详解MUI顶部选项卡(tab-top-webview-main)的用法
最近用MUI做手机app的时候,遇到了一点问题.然后就对这个tab-top-webview-main的源码做了点研究,接下来我将和大家详解一下 tab-top-webview-main的用法和应该注意 ...
- mui底部选项卡切换实现
MUI提供了两种webview和div模式,来实现底部选项卡切换 效果相同,div是在同一个页面实现所有切换块的页面,根据id导航,而webview是由多个页面组成,形成页面之间的来回跳转
- MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换
概 述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblo ...
- MUI框架-12-使用原生底部选项卡（凸出图标案例）
MUI框架-12-使用原生底部选项卡(凸出图标案例) 今天,用 mui 做 app 时,遇到了可能各位都遇到过的头疼问题:底部中间图标凸起,如下图: 最后有源代码 [提示]:有人问我在 HBuilde ...
随机推荐
- dms程序调试
Q:程序编译通过后,出现tomcat 端口被占用问题 参考 http://www.cnblogs.com/HoverM/p/3872163.html 先使用netstat -ano|findstr ...
- （九）expect批量公钥推送
(1)expect实现ssh非交互登录 注意:注释不能出现这脚本里面 spawn表示开启一个会话 \r:表示回车,exp_continue :表示没有出现这样,继续往下执行 interact :停留在 ...
- STL模板整理 pair
pair pair是一种模板类型,其中包含两个数据值,两个数据的类型可以不同.如果一个函数有两个返回值的话,如果是相同类型,就可以用数组返回,如果是不同类型,就可以自己写个struct ,但为了方便就 ...
- SPFA解决单源最短路径
SPFA(Shortest Path Faster Algorithm): 一:基本算法 在求解单源最短路径的时候,最经典的是 Dijkstra 算法,但是这个算法对于含有负权的图就无能为力了,而 B ...
- (寒假开黑gym)2017-2018 ACM-ICPC German Collegiate Programming Contest (GCPC 2017)
layout: post title: (寒假开黑gym)2017-2018 ACM-ICPC German Collegiate Programming Contest (GCPC 2017) au ...
- POJ1300Door Man（欧拉回路）
Door Man Time Limit: 1000MS Memory Limi ...
- 利用 ildasm 修改被编译后DLL文件
在开发中遇到这样一个场景,需要修改一个dll文件(.NET程序集)中某些地方的类型名称,但没有源代码,只能修改IL代码. 操作步骤如下: 1. 运行ildasm ildasm是由微软提供的.NET程序 ...
- 【博弈论】【SG函数】bzoj3404 [Usaco2009 Open]Cow Digit Game又见数字游戏
#include<cstring> #include<cstdio> #include<algorithm> #include<set> using n ...
- 【字符串哈希】【BKDRhash】【Rabin-Karp算法】模板
#include<cstdio> #include<iostream> #include<cstring> #include<string> #incl ...
- 8.2（java学习笔记）反射
一.基础知识 对象是表示或封装一些数据,一个类被加载后JVM会创建一个对应该类的Class对象, 类的整个结构信息会被放在对应的对象中,通过这个对象我们可以获取改类的全部信息, 而这些操作称为反射. ...