<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. android studio 和idea 导入library工程

    idea 导入library方法 把工程Import成module后,具体的操作看图: 同样的,打开Project structure,点开你要作为library的module,然后点击android ...

  2. 软件工程--界面UI 的原型设计

    经过今天的讨论, 我们组初步给出了设计方案. 安装了一晚上的 mockupBuilder 终于绘制了几份界面的原型图, 这里需要吐槽下 mockupBuilder, 这个软件很好用, 不过网页版和单机 ...

  3. break、continue、return

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  4. 探索RegisterAllAreas

    在MVC中注册Area时,我们一般会在相应的区域下定义一个继承与AreaRegistration的类,代码如下: public class AdminAreaRegistration : AreaRe ...

  5. MongoDB学习笔记~以匿名对象做为查询参数,方便查询子对象

    回到目录 对于MongoDB的封装还在继续,对于不断追求简单的编程还在继续,对于喜欢代码的那么感觉,还在继续... 当你的mongo数据表里有子对象时,尤其是列表对象时,使用官方的驱动很是不爽,要记得 ...

  6. 记录一次MongoDB3.0.6版本wiredtiger与MMAPv1引擎的写入耗时对比

    一.MongoDB3.0.x的版本特性(相对于MongoDB2.6及以下): 增加了wiredtiger引擎: 开源的存储引擎: 支持多核CPU.充分利用内存/芯片级别缓存(注:10月14日刚刚发布的 ...

  7. x01.os.19: linux 0.0

    linux 0.0 是一个丢失的版本,但赵炯老师又在 linux 0.11 的基础上,使它起死回生.www.oldlinux.org 有大量资源可供下载,值得一看. 1.要编译运行,首先需安装:sud ...

  8. RabbitMQ服务安装配置

    RabbitMQ是流行的开源消息队列系统,是AMQP(Advanced Message Queuing Protocol高级消息队列协议)的标准实现,用erlang语言开发.RabbitMQ据说具有良 ...

  9. 关于linux中的时间 时区问题

    本文部分来源于:  http://hi.baidu.com/peruke/blog/item/b8de06ec6a04583b27979132.html 系统是fedora: glibc实现了从RTC ...

  10. Leetcode: sliding window maximum

    August 7, 2015 周日玩这个算法, 看到Javascript Array模拟Deque, 非常喜欢, 想用C#数组也模拟; 看有什么新的经历. 试了四五种方法, 花时间研究C# Sorte ...