<!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. tensorflow tfdbg 调试手段

    https://blog.csdn.net/gubenpeiyuan/article/details/82710163 TensorFlow 调试程序 tfdbg 是 TensorFlow 的专用调试 ...

  2. SQL Server里如何处理死锁

    在今天的文章里,我想谈下SQL Server里如何处理死锁.当2个查询彼此等待时会发生死锁,没有一个查询可以继续它们的操作.首先我想给你大致讲下SQL Server如何处理死锁.最后我会展示下SQL ...

  3. 基于R语言的ARIMA模型

    A IMA模型是一种著名的时间序列预测方法,主要是指将非平稳时间序列转化为平稳时间序列,然后将因变量仅对它的滞后值以及随机误差项的现值和滞后值进行回归所建立的模型.ARIMA模型根据原序列是否平稳以及 ...

  4. slackware在vagrant中使用

    slackware以简洁干净的系统闻名于世,如果你想学习了解linux,那么slackware是一个很好的选择,其他linux不是不好,他们都太复杂了,复杂的你不知道从哪里开始. 所以,还是slack ...

  5. [HDFS Manual] CH3 HDFS Commands Guide

    HDFS Commands Guide HDFS Commands Guide 3.1概述 3.2 用户命令 3.2.1 classpath 3.2.2 dfs 3.2.3 envvars 3.2.4 ...

  6. Hadoop相关基础知识

    因为个人对这块的知识也不熟悉,所以大多内容来源于网络. 1.      Hadoop项目框架 2.      Hadoop Hadoop是一个由Apache基金会所开发的分布式系统基础架构. 用户可以 ...

  7. SLAM的前世今生

    SLAM技术已经蓬勃发展起来,这里综述性地介绍下SLAM的主体知识.SLAM的主体技术不多,难点在于细节.来源是:技术分享.ppt 前世 人类惆怅近千年的问题不是:我是谁,我要做什么,我要去哪里!而是 ...

  8. centos7 yum安装ffmpeg，以及ffmpeg的简单用法

    yum install ffmpeg: 安装EPEL Release,因为安装需要使用其他的repo源,所以需要EPEL支持: yum install -y epel-release #如果出现缺少C ...

  9. MySQL 千万 级数据量根据（索引）优化 查询 速度

    一.索引的作用 索引通俗来讲就相当于书的目录,当我们根据条件查询的时候,没有索引,便需要全表扫描,数据量少还可以,一旦数据量超过百万甚至千万,一条查询sql执行往往需要几十秒甚至更多,5秒以上就已经让 ...

  10. 自己手写一个queuelink

    代码如下: <?php class QueueLink { private $first_key=0;//最前面的那个元素的键 private $first_value=0;//最前面的那个元素 ...