<!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. 微信小程序WebSocket报错：Error during WebSocket handshake: Sent non-empty 'Sec-WebSocket-Protocol' header but no response was received

    Error during WebSocket handshake: Sent non-empty 'Sec-WebSocket-Protocol' header but no response was ...

  2. Keras/Tensorflow选择GPU/CPU运行

    首先,导入os,再按照PCI_BUS_ID顺序,从0开始排列GPU, import os os.environ["CUDA_DEVICE_ORDER"] = "PCI_B ...

  3. C#缓存absoluteExpiration、slidingExpiration两个参数的疑惑

    看了很多资料终于搞明白cache中absoluteExpiration,slidingExpiration这两个参数的含义. absoluteExpiration:用于设置绝对过期时间,它表示只要时间 ...

  4. DMA（直接存储器存取）

    DMA(Direct Memory Access) DMA(Direct Memory Access)即直接存储器存取,是一种快速传送数据的机制. 工作原理 DMA是指外部设备不通过CPU而直接与系统 ...

  5. bzoj1030【JSOI2007】文本生成器

    1030: [JSOI2007]文本生成器 Time Limit: 1 Sec  Memory Limit: 162 MB Submit: 2891  Solved: 1193 [Submit][St ...

  6. 【20170506】贝业新兄弟IT总监李济宏：第三方家居物流的IT架构探索

    5月6日,物流人的节日,这一天,全国的物流人汇聚中国上海嘉定,以“新时代.新物流”为主题的2017中国货运产业大会暨货运企业家高峰论坛如期召开,同时,首届嘉年华活动隆重开启,八大主题分享活动,精彩进行 ...

  7. docker save提示no space left on device错误

    使用df -h看了看,硬盘的确是够用的,于是排除了是硬盘容量的问题. 再细看错误提示: 目录是/var/lib/docker/tmp/docker-export-xxxx/xxxxx,猜测是docke ...

  8. linux下以‘-’开头的文件名

    linux下以‘-’开头的文件名,cp.mv.rm.ls等对他都是无效的: [root@ha131 ~]# ll -plat.py ls:无效选项 -- . 请尝试执行"ls --help& ...

  9. 产品设计利器--axure

    1.axute的使用方法: 2.普通线框图的使用: 3.高保真原型图: 4.交互思维. Axure RP8 是美国Axure Software Solution公司的旗舰产品,是一个快速的原型工具,主 ...

  10. linux下python3调用c代码或者python3调用c++代码

    前几篇的blog都是为了这个实验做基础,先说 原因是python调用数据库150w条数据22s,然后处理数据,其实就2个简单的for循环,65s 需求: 1. python调用c++函数 2. c++ ...