<!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. Canvas 和 SVG 的不同

    Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...

  2. CentOS7.2网络配置

    修改hostname vi /etc/hosts 127.0.0.1 localhost localhost.localdomain localhost4 localhost4.localdomain ...

  3. CentOS 7 安装 Oracle 11.2.0.4

    一.安装环境 CentOS Linux release 7.2.1511 (Core) Oracle Database 11g Release 2 (11.2.0.4) 二.安装前准备 2.1 修改主 ...

  4. 【nginx&php】后台权限认证方式

    一.最常用的方法(代码中限制) 1.如何限制IP function get_new_ip(){ if(getenv('HTTP_CLIENT_IP')) { $onlineip = getenv('H ...

  5. MySQL技术内幕读书笔记（三）——文件

    目录 文件 参数文件 日志文件 套接字文件 pid文件 表结构定义文件 INNODB存储引擎文件 文件 ​ 有以下类型文件 参数文件:告诉MYSQL实例启动时在哪里找到数据库文件,并且制定某些初始化参 ...

  6. MySql 建表、添加字段、修改字段、添加索引SQL语句写法及SQL索引

    ---------添加索引方法--------- .添加PRIMARY KEY(主键索引) mysql>ALTER TABLE `table_name` ADD PRIMARY KEY ( `c ...

  7. Scala 隐式（implicit）详解

    文章正文 通过隐式转换,程序员可以在编写Scala程序时故意漏掉一些信息,让编译器去尝试在编译期间自动推导出这些信息来,这种特性可以极大的减少代码量,忽略那些冗长,过于细节的代码. 1.Spark 中 ...

  8. win下查找端口占用进程并定位到具体程序

    很多时候,我们会在服务器上运行多个java程序,但是在任务管理器里看到的都是一样的图标,想要找到我们想要的那个进程咋办呢? 列出所有端口进程 C:\Users\desp>netstat -ano ...

  9. /linux-command-line-bash-shortcut-keys/

    https://www.howtogeek.com/howto/ubuntu/keyboard-shortcuts-for-bash-command-shell-for-ubuntu-debian-s ...

  10. 通过JS页面唤醒app（安卓+ios）

    var browser = { versions: function () { var u = navigator.userAgent, app = navigator.appVersion; ret ...