两个页面实现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实现）
现在各种轮播图插件,玲琅满目,用起来也非常方便,通常只需要选择元素然后传入参数就可以了.但是,和授人以鱼不如授人以渔一样的道理,不管怎样最基本的轮播图原理还是应当掌握的.这样不仅有利于我们自己写出来满 ...
随机推荐
- RDA项目打包
注意APP的编译搭建: ./aps/Makefile.toolchain //ccoption path的设定 ./aps/rules.mak //统一的编译规则 MAKE -C 1.TOOLS的可执 ...
- ie下使用文本编辑器导致input文本框无法聚焦的问题原因
最近公司的一个项目遇到一个如下问题: 描述:测试发现,每当我们在发布活动的页面发布完活动后,页面跳转到我的活动,然后再次回到发布活动页面,发现所有的input文本框都不能聚焦.然后再去看看其他页面(我 ...
- 面向对象（this关键字）
package com_package2; public class Person3 { private int age; private String name; public int getAge ...
- java代码优化（1）---
代码的优化,需要考虑的维度很多.但是代码的优化并不是减少代码量,有的时候我们需要增加代码来提高代码的可读性. 1.正确标记变量 2.封装某个动作 3.注意函数的写法 4.不容易理解的东西,加注释
- SqlServer2012——多表连接查询
1.基本连接 select A.姓名,A.性别,B.班级名,B.家庭住址 From 学生信息 A,班级信息 B where A.所属班级=B.班级编号 --把A表与B表连接起来 2.内连接 --内连接 ...
- Automake使用(高级)
工程地址 automake语言国际化 最初工程目录结构 $ ls -l total 16 drwxrwxr-x. 2 fedora fedora 4096 May 10 10:38 build-aux ...
- C++经典面试算法题
转自:http://blog.csdn.net/f_r_e_e_x/article/details/50770907 //1.实现strcpy. char* MyStrCpy( char *pDest ...
- AcDbCurve of AcDbEntity
AcDb2dPolyline AcDb3dPolyline AcDbArc AcDbCircle AcDbEllipse AcDbLeader AcDbLine AcDbPolyline AcDbRa ...
- W3C标准以及规范
1.什么是DOCTYPE DOCTYPE是document type(文档类型)的简写,用来说明你用的XHTML或者HTML是什么版本.其中的DTD(例如xhtml1-transitional.dtd ...
- Tomcat 指定jdk
Windows 下 修改 tomcat根目录/bin/setclasspath.bat 文件 如下: rem Otherwise either JRE or JDK are fine set JAVA ...