<!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>

    <script src="js/mui.min.js"></script>

    <link href="css/mui.min.css" rel="stylesheet"/>

    <script type="text/javascript" charset="utf-8">

          mui.init();

    </script>

</head>

<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">hello</h1>

</header>

<div class="mui-content">

    <!--卡片视图-->

    <div class="mui-card" style="margin: 10px;">

        <div class="mui-card-content" style="line-height: 0px;">

            <img src="imgs/banner1.png" width="100%;">

        </div>

        <div class="mui-card-footer">

            <div class="mui-media-body" >

                小M

                <p>发布于2016-06-30 15：30</p>

            </div>

        </div>

    </div>

    <!--遮罩蒙版-->

    <button type="button" onClick="show_zhezhao()">显示遮罩层</button>

</div>

</body>

<script type="text/javascript">

    function show_zhezhao(){

        var mask = mui.createMask(callback);//callback为用户点击蒙版时自动执行的回调；

        mask.show();//显示遮罩

    }

    function callback(){

        mui.toast('您取消了操作');

    }

</script>

</html>

mui 卡片视图 遮罩蒙版的更多相关文章

  1. mui卡片视图的制作

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

  2. css遮罩蒙版效果 分栏效果

    mask遮罩蒙版效果 来看一下效果图: 这是两张原图: 遮罩层图像 注意,白色区域为透明状态   要展示的图像 使用mask之后产生的效果图   首先来解释一下遮罩.蒙版.和PS中的蒙版.Flash中 ...

  3. UWP 卡片视图 Card View

    上一篇 提到了 UWP 轨道视图Orbit View,这次就说一下卡片视图,毕竟两个差不多. 卡片视图,效果如其名,卡片一样,左右滑动,当然能翻牌最好了. 嗯,我这个可以的额(⊙﹏⊙)... 看下效果 ...

  4. 【Android】10.4 卡片视图

    分类:C#.Android.VS2015: 创建日期:2016-02-19 一.简介 Android 从5.0开始包含了一个全新的卡片视图小部件,这个新的小部件默认就像一张带有圆角和轻微阴影的白色卡片 ...

  5. 特殊形状图片之遮罩蒙版CSS3-Mask效果

    前不久做了一个项目,需要一个小效果,就是获取用户头像以心形的形状展现在页面上,开始小五想的实现方式是canvas画图或CSS3的clip(剪切),发现都不理想,和设计稿里的图形美观度相差太大,而且实现 ...

  6. Cocos2d-x教程第(11)讲－利用遮罩(蒙版)CCLayerColor制作新手引导界面(上)

    欢迎转载,转载时请注明原文出处:http://blog.csdn.net/u012945598/article/details/17280019 源码下载地址:http://download.csdn ...

  7. 使用swipecard实现卡片视图左右滑动监听以及点击监听

     前言: 大家好,今天给大家介绍安卓一种特别实用有很酷炫的组件swipecard,当然这并不是安卓爸爸创造的,这是国内的一个我认为是大牛的一个人随便写着玩儿搞出来了,我看了他的代码介绍已经很清晰了,但 ...

  8. CSS3 mask 遮罩蒙版效果

    mask demo效果演示:http://dtdxrk.github.io/game/css3-demo/mask.html mask 的属性: -webkit-mask-image:url | gr ...

  9. 【MUI框架】学习笔记整理 Day 1

    MUI 框架之 [原生UI] (1)accordion(折叠面板) 由二级列表演化而来 <ul class="mui-table-view"> 2 <li cla ...

随机推荐

  1. Centos7中ss命令安装

    一.简述 一般Centos会自带ss这个命令,如果没带,则需要安装. 二.安装命令 yum install iproute

  2. assert BOOST_ASSERT的坑

    下面这行代码 BOOST_ASSERT(SUCCEEDED(m_pd3dDevice->CreateBuffer(&frame_ptr->m_const_buffers[i].m_ ...

  3. np.memmap读取大文件

    Numpy中的ndarray是一种新形式的Python内建类型.因此,它可以在需要时被继承.ndarray形成了许多有用类的基础. np.memmap就是其中一种,它是内存映射文件.本质上就是使用C语 ...

  4. Linux内核剖析（五）Linux内核的构建过程

    参考 一次实验引发的故事 – kernel build system探索—vmlinux是如何炼成的– kernel makefile 深度探索Linux操作系统:系统构建和原理解析.pdf 问题 在 ...

  5. Effective Java 第三版—— 86. 非常谨慎地实现SERIALIZABLE接口

    Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...

  6. CentOS5.5上安装Python2.7及ez_setup和pip包

    CentOS5.5上安装Python2.7及ez_setup和pip包 下载 首先从Python官方下载源代码包下载 编译安装 这里将python安装到/opt/python27文件夹下 tar xv ...

  7. 每天学习一个Linux命令-目录

    在工作中总会零零散散使用到各种Linux命令,从今天开始详细的学习一下linux常用命令,坚持每天一个命令,学习的主要参考资料为: 1.竹子-博客(https://www.cnblogs.com/pe ...

  8. 基于HTML5 Tab选项卡动画切换特效

    基于HTML5 Tab选项卡动画切换特效.这是一款基于HTML5+CSS3实现的带有动画切换效果的Tab选项卡插件cbpFWTabs.效果图如下: 在线预览   源码下载 实现的代码. html代码: ...

  9. HTTP 03 HTTP 报文

    客户端的HTTP报文, 叫做请求报文 服务器端的叫做 响应报文. HTTP 报文本身是由多行 (用 CR+LF 作换行符) 数据构成的字符串文本. HTTP 报文大致分为报文首部 和 报文主体 两部分 ...

  10. 使用JavaScript验证用户输入的是否为正整数

    在项目开发中,需要使用JavaScript验证用户输入的是否为正整数. 方法一: var type="^[0-9]*[1-9][0-9]*$"; var r=new RegExp( ...