MUI一些有用的类,处理过的元素和方法

目录

1. 文字截断用…代替(mui-ellipsis)
2. 文字显示两行，两行显示不完用…代替(mui-ellipsis-2)
3. p元素文字灰度处理
4. 在非5+环境或非微信环境隐藏元素(mui-plus-visible、mui-wechat-visible)
5. 文本靠右(mui-text-right)
6. mui-fullscreen 让元素绝对定位覆盖全屏
7. mui-hidden 简单实现display:hidden
8. 创建遮罩层
9. 在5+环境，mui.js会自动在body上添加mui-plus类，Android环境(包括谷歌浏览器模拟环境)会添加mui-android类
10. 加载提示框

文字截断用…代替(mui-ellipsis)

.mui-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

文字显示两行，两行显示不完用…代替(mui-ellipsis-2)

.mui-ellipsis-2 {
display: -webkit-box;
overflow: hidden;
white-space: normal!important;
text-overflow: ellipsis;
word-wrap: break-word;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

p元素文字灰度处理

在非5+环境或非微信环境隐藏元素(mui-plus-visible、mui-wechat-visible)

.mui-plus-visible, .mui-wechat-visible {
    display: none !important;
}

文本靠右(mui-text-right)

.mui-text-right {
     text-align: right!important;
}

mui-fullscreen 让元素绝对定位覆盖全屏

mui-hidden 简单实现display:hidden

创建遮罩层

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

在5+环境，mui.js会自动在body上添加mui-plus类，Android环境(包括谷歌浏览器模拟环境)会添加mui-android类

加载提示框

<div class="mui-loading">
	<div class="mui-spinner"></div>
</div>