<script>
mui.init({
swipeBack:true //启用右滑关闭功能
});
window.addEventListener('toggle', function(event) {
if (event.target.id === 'M_Toggle') {
var isActive = event.detail.isActive;
var table = document.querySelector('.mui-table-view');
var card = document.querySelector('.mui-card');
if (isActive) {
card.appendChild(table);
card.style.display = '';
} else {
var content = document.querySelector('.mui-content');
content.insertBefore(table, card);
card.style.display = 'none';
}
}
});
</script>

  

mui,css3 querySelector,appendChild,style.display,insertBefore的更多相关文章

  1. 【学】CSS3基础实例1 - 用CSS3做网页中的小三角,以及transition的用法

    自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了, ...

  2. CSS属性、伪类选择器,CSS3选择器

    CSS1时IE6是部分支持,伟大的IE6!CSS2时IE6部分支持,伟大的IE6依旧是部分支持!CCS3盛行CSS4也已经提上日程的现在,IE6完全不支持.IE6你该走了,我们会永远记住你的功绩的!I ...

  3. 图片上传,直接在网页中显示(支持IE,谷歌,火狐浏览器)

    <!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...

  4. ie、firefox、chrome中关于style="display:block" 引发的页面布局错乱的解决办法

    ie.firefox.chrome中关于style="display:block" 引发的页面布局错乱的解决办法: table中tr 添加style="display:b ...

  5. 用js,css3 做的一个球

    用css3属性很容易做一个立方体,但是要做一个球体,会相对复杂些 原理是:球可以看做是由无数个圆圈构成,然后就可以用圆圈来做球, 下面的例子是我做的一个小球,由72个圆圈组成.如果把每个圆圈的背景颜色 ...

  6. js解决IE8不支持html5,css3的问题(respond.js 的使用注意)

    IE8.0及以下不支持html5,css3的解析.目前为止IE8以下的版本使用率在10%左右,网站还是有必要兼容的. 1,在你的所有css最后判断引入两个js文件. html5.js  是用来让ie8 ...

  7. 使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局,CSS3+SASS完美版)

    实现css水平垂直居中的方法有很多,在这里我简单的说下四种比较常用的方法: 1.使用CSS3中的Flex布局 对于flex,我们要了解的是它是一个display的属性,而且必须要给他的父元素设置fle ...

  8. div+css3实现漂亮的多彩标签云,鼠标移动会有动画

    div+css3实现漂亮的多彩标签云,鼠标移动会有动画 点击运行效果 <style> .dict { margin: 20px 0;clear:both ;text-align:left; ...

  9. 从零开始学 Web 之 CSS3(七)多列布局,伸缩布局

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

随机推荐

  1. CocoaPods安装及使用详情

    CocoaPods是什么? 当你开发iOS应用时,会经常使用到很多第三方开源类库,比如JSONKit,SDWebImage等等.可能某个类库又用到其他类库,所以要使用它,必须得另外下载其他类库,而其他 ...

  2. 【转】单例模式(singletion)

    单例模式(Singleton) 原地址:http://www.cnblogs.com/BoyXiao/archive/2010/05/07/1729376.html 首先来明确一个问题,那就是在某些情 ...

  3. 报文格式:xml 、定长报文、变长报文

    目前接触到的报文格式有三种:xml .定长报文.变长报文 . 此处只做简单介绍,日后应该会深入学习到三者之间如何解析,再继续更新.——2016.9.23 XML XML 被设计用来传输和存储数据. H ...

  4. 创建版本库-GIT

    什么是版本库呢?版本库又名仓库,英文名repository,你可以简单理解成一个目录,这个目录里面的所有文件都可以被Git管理起来,每个文件的修改.删除,Git都能跟踪,以便任何时刻都可以追踪历史,或 ...

  5. [windows]win10家庭版切换到管理员账户

    背景:很多时候,在安装或者运行某些程序时会需要到管理员账户运行.而在win10家庭版却没有明显的位置可以让用户简单的进行切换.因此,有了以下的方法. 方法: 1.在搜索框中输入CMD,右键以管理员方式 ...

  6. [AlwaysOn Availability Groups]AG扩展事件

    AG扩展事件 SQL Server 2012定义了一些关于AlwaysOn的扩展事件.你可以监控这些扩展事件来帮助诊断AG的根本问题.你也可以使用以下语句查看扩展事件: SELECT * FROM s ...

  7. Bw树:新硬件平台的B树(内存数据库中的b树索引)

    Bw树:新硬件平台的B树 Bw树:新硬件平台的B树 1. 概述 1.1 原子记录存储(Atomic Record Stores) 1.2 新的环境 1.3 实现 2 Bwtree的体系结构 2.1 现 ...

  8. Linux脚本学习

    1.脚本 linux下创建一个以.sh为后缀名的文件,然后更改权限为可执行,这就变成了一个脚本文件 touch test.sh chmod u+x test.sh 脚本的最简单使用方式,就是批量命令的 ...

  9. 联发科发布全球首款搭载Android TV的智能电视系统芯片MT5595

    联发科发布全球首款搭载Android TV的智能电视系统芯片MT5595 admin 资讯 01-07 1 1月7日消息,联发科宣布与Google共同开发出全世界第一个搭载Android TV操作系统 ...

  10. 系统集成方案(一).NET集成方案

    NET系统集成有自己独立的登录验证方式.比如,跟报表集成时,不需要再使用报表内置的登录界面,只需要将报表默认的参数用户名fr_username和密码fr_password发送给报表系统,触发一下报表验 ...