两个页面实现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>
效果图如下：
两个页面实现mui轮播图与选项卡结合的更多相关文章
- vue+mui轮播图
mui的轮播图,如果图片是请求来的,直接在html中循环是不会动的. 需要请求完图片之后,在setTimeout方法里,使用slider()方法,这样才会动 而且mui的轮播图,有点坑的,需要重复最后 ...
- mui轮播图为什么设置了自动播放参数也不能自动播放呢？
最近在做项目的时候,发现Mui的轮播图遇到个问题,设置了自动播放但是怎么也不能自动播放,这是为什么呢? 原来如果动态给mui的图片轮播添加图片,又使用的ajax获取的数据,但是你ajax 还没有执行完 ...
- js各种特效轮播图，选项卡，放大镜，窗口拖拽，楼层跳转
// 透明度轮播图 // img:轮播图片 // dot:轮播点 // lbtn:左箭头 // rbtn:右箭头 // banner:轮播盒子 // active:轮播点选中效果类名 // time: ...
- mui轮播图
轮播组件是mui提供的一个核心组件,在该核心组件基础上,衍生出了图片轮播.可拖动式图文表格.可拖动式选项卡.左右滑动9宫格等组件,这些组件有较多共同点.Dom构造: <div class=&qu ...
- swiper在一个页面多个轮播图
<script> var swiper = new Swiper('.swiper-container1', { spaceBetween: 30, centeredSlides: tru ...
- 原生JS面向对象思想封装轮播图组件
原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...
- element-ui中轮播图自适应图片高度
哈哈,久违了各位.我又回来了,最近在做毕设,所以难免会遇到很多问题,需要解决很多问题,在万能的博友帮助下,终于解决了Element-ui中轮播图的图片高度问题,话不多说上代码. 那个axios的使用不 ...
- 【云开发】10分钟零基础学会做一个快递查询微信小程序，快速掌握微信小程序开发技能（轮播图、API请求）
大家好,我叫小秃僧 这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...
- 浅谈轮播图（原生JavaScript实现）
现在各种轮播图插件,玲琅满目,用起来也非常方便,通常只需要选择元素然后传入参数就可以了.但是,和授人以鱼不如授人以渔一样的道理,不管怎样最基本的轮播图原理还是应当掌握的.这样不仅有利于我们自己写出来满 ...
随机推荐
- SimpliciTI APP
SimpliciTI Sample Applications Sample Applications 介绍了4个简单的示例应用程序来演示SimpliciTI的各种特性和功能. Simple Pee ...
- AI-Info-Micron-Insight：Intelligence Accelerated™
ylbtech-AI-Info-Micron-Insight:Intelligence Accelerated™ Intelligence Accelerated™ Micron Insight 大会 ...
- python set集合的用法
python的set和其他语言类似, 是一个无序不重复元素集, 基本功能包括关系测试和消除重复元素. 集合对象还支持union(联合), intersection(交), difference(差)和 ...
- matlab形态学图像处理之strel函数
转自:http://blog.sina.com.cn/s/blog_b1cd5d330101pmwi.html strel--structuring element 运用各种形状和大小构造元素,基本语 ...
- matlab函数 bwperim
功能:查找二值图像的边缘. 用法: BW2 = bwperim(BW1) BW2 = bwperim(BW1,conn) BW2 = bwperim(BW1,conn)表示从输入图像BW1中返回只包括 ...
- CF-839A
A. Arya and Bran time limit per test 1 second memory limit per test 256 megabytes input standard inp ...
- 如何编写新的PCL类
博客转载自:http://www.pclcn.org/study/shownews.php?lang=cn&id=244 把代码转换成符合PCL思路和句法的代码,对于第一次接触该基础架构的人会 ...
- IIS7启用GZip压缩
本文转载自 http://www.cnblogs.com/kissdodog/p/6252129.html GZip压缩通常会达到70%以上的压缩率,如果是手机Web这无疑会使网站的访问速度大大增加, ...
- CF 148D D Bag of mice （概率dp）
题目链接 D. Bag of mice time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- web测试与手机测试的区别
1.web是B/S,移动端是C/S 2.系统的性能: B/S的优势是异地浏览和信息采集比较灵活性,随时随地只要能使用浏览器上网即可 但是客户端只能完成浏览,查询,数据输入等简单工作,绝大部分又服务器承 ...