<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. 【Swift】TTTAttributedLabel使用小记

    前言 TTTAttributedLabel继承自UILabel,很方便基于现有代码进行修改,Star超过4K+,今天用了一下作点笔记. 声明  欢迎转载,但请保留文章原始出处:)  博客园:http: ...

  2. CSS3-05 样式 4

    前言 关于 CSS 的介绍,基本上告一段落了.在该博客中将介绍如何通过 CSS 去设置一个 HTML 元素,显示在 Web 页面的位置. 定位 概述 定义元素位置的基准,即:该元素与 HTML 文档流 ...

  3. PHP设计模式 迭代器模式

    迭代器模式,在不需要了解内部实现的前提下,遍历一个聚合对象的内部元素.相比于传统的编程模式,迭代器模式可以隐藏遍历元素所需要的操作. AllHacl.php <?php namespace Ba ...

  4. Guest Speaker on 2015 WinHEC Shenzhen 秋季大会

    继今年3月份的WinHEC春季大会,秋季大会于11月10日-11日深圳如期举行.此次大会的主题是Windows 10 IoT和Microsoft Azure,云和端的无缝连接是微软物联网解决方案的典型 ...

  5. 使用 Fiddler 上传微信公众账号 自定义菜单

    0.你必须有微信公众账号的服务号.成为开发者之后.... 1.得到你的 appid (xxxxxxoooo)和 secret (oooooooxxxxxxx) 2.用这个链接得到你的 access_t ...

  6. IntelliJ IDEA 配置运行程序

    IntelliJ IDEA 对于Javaer开发来说还是很nice的,就是第一次用可能配置项有点生疏,这里就记录一下IntelliJ IDEA 配置运行程序. 1. 点击Edit Config... ...

  7. FineReport中如何进行Informix数据库连接

    报表开发工具Finereport中,对于Informix数据库,定义数据连接处进行如下配置: 数据库:Others 驱动器:com.informix.jdbc.IfxDriver URL: jdbc: ...

  8. PHP_Bibel阅读笔记(二)——脸黑的一天(?一年)

    一早上起来把50包开了,一张橙卡...就问还有谁...........本命年啊,我去买红内裤还不行么.... 实时更新,老哥的号的30包什么都没有....不过中午又开了5包,皇帝,好评啊!!! 五.代 ...

  9. 数据库_MYSQL

     数据库简介 数据库分类:关系型数据库.非关系型数据库 常用的关系型数据库有:orcale .mysql .sql server等等 常用的非关系型数据库有: Memcached.redis.mong ...

  10. Struts2 contentType属性列表

    Struts2 contentType属性列表 博客分类: Struts 2   'ez' => 'application/andrew-inset', 'hqx' => 'applica ...