两个页面实现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实现）
现在各种轮播图插件,玲琅满目,用起来也非常方便,通常只需要选择元素然后传入参数就可以了.但是,和授人以鱼不如授人以渔一样的道理,不管怎样最基本的轮播图原理还是应当掌握的.这样不仅有利于我们自己写出来满 ...
随机推荐
- 虚拟机ubuntu和windows共享文件
设置虚拟机ubuntu和windows共享文件(方便复制文件到本机) (需要安装samba) 登陆ubuntu系统后,点击左边的文件夹.右击新建个文件夹. 设置为共享 ubuntu会提示你 ...
- C# 使用 MemoryStream 将数据写入内存
转自:http://blog.csdn.net/andrew_wx/article/details/6629951 常用的MemoryStream构造函数有以下3种. 1:MemoryStream() ...
- Swing 添加Esc快捷键退出程序
JFrame demo = new JFrame(); demo.addKeyListener( new KeyListener(){ public void keyReleased(KeyEvent ...
- windows下搭建nginx服务器及实现nginx支持https配置流程
最近刚接触到了tomcat结合nginx做网站的负载均衡.之前对tomcat搭配nginx实现负载均衡也写过,在上一篇的博客中,最近遇到的问题是要在http的基础上支持https.也就是支持加密的请求 ...
- CodeForces 484B Maximum Value (数学，其实我也不知道咋分类)
B. Maximum Value time limit per test 1 second memory limit per test 256 megabytes input standard inp ...
- 二维数组是二级指针pointer to pointer!
二维数组居然是个类似于二级指针(pointer to pointer)的东西,十分震惊! #include <stdio.h> int main() { ][]={{,,,},{,,,}, ...
- LeetCode: 492 Construct the Rectangle(easy)
题目: or a web developer, it is very important to know how to design a web page's size. So, given a sp ...
- 51nod1117【贪心】
思路:哈夫曼树~~哇塞,那么有道理. 利用堆维护:每次从堆里取两个最小加起来,然后还是最小的两个,最后只剩一根总的 #include <bits/stdc++.h> using names ...
- php 数值转多少年，多少天，多少时，多少分，多少秒
function Sec2Time($time){ if(is_numeric($time)){ $value = array( "years" => 0, "da ...
- cf777D(贪心&&c_str()函数)
题目链接:http://codeforces.com/contest/777/problem/D 题意:给出n行以#开头的字符串,从原字符串尾部删除尽量少的字符串,使其为非降序排列. 思路:我们可以从 ...