<!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. 与临时对象的斗争（上）ZZ

    C++ 是一门以效率见长的语言(虽然近来越来越多的人“不齿”谈及效率,我深以为不然,在某一次的程序编写中不对效率锱铢必较并不意味意味着我们就不应该追求更多的更好的做法).总之吧,相比起其它语言,程序员 ...

  2. IDEA调试SpringMvc项目时，出错：java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener，解决办法

    具体报错信息如下图所示: 解决方法:File > Project Structure > Artifacts > 在右侧Output Layout右击项目名,选择Put into O ...

  3. SQL DML 数据操纵语句

    前言 DML(Data Manipulation Language)语句:数据操纵语句,用于添加.删除.更新和查询数据库记录,并检查数据完整性.常用的语句关键字主要包括 insert.delete.u ...

  4. html input 文本框 只能输入数字,包含输小数点.

    <input type="text" id="source_tds" name="source_tds" value="&l ...

  5. Excel公式笔记

    跨表,查找相同的数据,的其他列的值 =index(sheet2!$c$:$c$,match(sheet1!$b$,sheet2!$d$:$d$,)) 备注: =index(读哪里的数据(大范围), m ...

  6. test001

    #include <iostream> using namespace std; ][]; int main() { int num; ; ; i <= ; i++) dp[i][] ...

  7. 【NLP】MT中BLEU评分机制

    参考博客:https://blog.csdn.net/guolindonggld/article/details/56966200 原著论文:http://www.aclweb.org/antholo ...

  8. 想拥有一款钢铁侠Jarvis管家的软件吗？

    漫威的<钢铁侠>电影很好看,里面钢铁侠的管家Jarvis,可以说非常酷.既能管理日常生活,还能组装钢铁战衣.跟随托尼出生入死,形影不离. 那么现实生活中,想不想拥有这一款软件?看看下面这个 ...

  9. github 搜索

    1.明确搜索仓库标题.仓库描述.README GitHub 提供了便捷的搜索方式,可以限定只搜索仓库的标题.或者描述.README等. 以Spring Cloud 为例,一般一个仓库,大概是这样的 其 ...

  10. tensorflow使用多个gpu训练

    关于多gpu训练,tf并没有给太多的学习资料,比较官方的只有:tensorflow-models/tutorials/image/cifar10/cifar10_multi_gpu_train.py ...