两个页面实现mui轮播图与选项卡结合
index.html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="css/iconfont.css"/>
<script src="js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
</script>
</head>
<style>
.mui-card .mui-control-content {
padding: 10px;
}
.mui-control-content {
height: 150px;
}
</style>
<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">测试</h1>
</header>
<div class="mui-content">
<div style="padding: 10px 10px;">
<div id="segmentedControl" class="mui-segmented-control">
<a class="mui-control-item mui-active" href="#item1">已办公文</a>
<a class="mui-control-item" href="#item2" id="it">全部公文</a>
</div>
</div>
<div>
<div class="mui-slider" id="item1">
<div class="mui-slider-group mui-slider-loop">
<!--支持循环，需要重复图片节点-->
<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="img/3.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="img/1.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="img/2.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="img/3.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="img/1.jpg" /></a></div>
<!--支持循环，需要重复图片节点-->
<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="1.jpg" /></a></div>
</div>
</div>
</div>
<script type="text/javascript">
mui.init();
var it=document.getElementById('it');
it.addEventListener('tap',function(){
mui.openWindow({url: 'index2.html', id:'index2.html'});
})
</script>
</html>
index2.html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="css/iconfont.css"/>
<script src="js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
</script>
</head>
<style>
.mui-card .mui-control-content {
padding: 10px;
}
.mui-control-content {
height: 150px;
}
</style>
<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">测试</h1>
</header>
<div class="mui-content">
<div style="padding: 10px 10px;">
<div id="segmentedControl" class="mui-segmented-control">
<a class="mui-control-item " href="#item1" id="it">已办公文</a>
<a class="mui-control-item mui-active" href="#item2" >全部公文</a>
</div>
</div>
<div>
<div id="item2" class="mui-control-content mui-active">
<div id="scroll" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
第一个选项卡子项-1
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-2
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-3
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
mui.init();
var it=document.getElementById('it');
it.addEventListener('tap',function(){
mui.openWindow({url: 'index.html', id:'index.html'});
})
</script>
</html>
效果图如下：
最新文章
- 微信支付开发demo
- java for循环冒泡排序
- hw 要的是螺丝钉
- R语言学习笔记 之 可视化地研究参议员相似性
- iOS上的jQuery.on()冒泡事件绑定 以及 iOS绝对定位元素中的输入框
- 关于sql row_number,rank,dense_rank，ntile函数
- Java——类比较器
- 数据挖掘-关联规则分析[ZZ]
- 四个流行的Java连接池之Proxool篇
- My Eclipse Security Alert
- MyBatis 的Mapper中有小于号的处理
- java.lang.StringBuilder和java.lang.StringBuffer (JDK1.8)
- 第一章 Linux系统概述
- 数据库性能优化之SQL语句优化（上）
- Leetcode_116_Populating Next Right Pointers in Each Node
- 兼容小程序的canvas画图组件jmGraph
- Java基础（Java补码）
- CentOS7安装HDP集群
- js顺序播放列表中的音乐
- 数据库oracle 目录结构
热门文章
- POJ2186(有向图缩点)
- AI-Info-Micron-Insight：Micron 美光的技术帮助 CERN 解开宇宙奥秘
- 11. 几点基于Web日志的Webshell检测思路
- Automake使用(初级)
- QMYSQL driver not loaded 的原理和解决办法
- python unittest模块
- codeforces1081G Mergesort Strikes Back【期望dp+脑洞】
- 下拉刷新，上拉加载功能--dropload.js的使用
- IDEAL基于maven创建spark程序
- 【面试】迄今为止把同步/异步/阻塞/非阻塞/BIO/NIO/AIO讲的这么清楚的好文章（快快珍藏）