Mui框架一快捷键+基础知识点

1.折叠面板--mAccordion

2.数字角标—mBadges

<h5>有底色</h5>

<span class="mui-badge">灰色</span>

<span class="mui-badge mui-badge-primary">蓝色</span>

<span class="mui-badge mui-badge-success">绿色</span>

<span class="mui-badge mui-badge-warning">棕色</span>

<span class="mui-badge mui-badge-danger">红色</span>

<span class="mui-badge mui-badge-purple">紫色</span>

<h5>无底色（使用父元素背景色）颜色同上</h5>

<span class="mui-badge mui-badge-inverted">1</span>

<span class="mui-badge mui-badge-primary mui-badge-inverted">2</span>

<span class="mui-badge mui-badge-success mui-badge-inverted">3</span>

<span class="mui-badge mui-badge-warning mui-badge-inverted">4</span>

<span class="mui-badge mui-badge-danger mui-badge-inverted">5</span>

<span class="mui-badge mui-badge-royal mui-badge-inverted">6</span>

3.按钮—mButton(mButton-blue/red/green/yellow/purple/)

<h5>有底色按钮：</h5>

<button class="mui-btn">默认</button>

<div class="mui-btn mui-btn-primary">蓝色</div>

<span class="mui-btn mui-btn-success">绿色</span>

<button class="mui-btn mui-btn-warning">黄色</button>

<button class="mui-btn mui-btn-danger">红色</button>

<button class="mui-btn mui-btn-royal">紫色</button>

<h5>无底色按钮（使用父元素的背景色）：</h5>

<button class="mui-btn mui-btn-outlined">默认</button>

<button class="mui-btn mui-btn-primary mui-btn-outlined">操作</button>

<button class="mui-btn mui-btn-success mui-btn-outlined">成功</button>

<button class="mui-btn mui-btn-warning mui-btn-outlined">警告</button>

<button class="mui-btn mui-btn-danger mui-btn-outlined">危险</button>

<button class="mui-btn mui-btn-royal mui-btn-outlined">高贵</button>

<h5>链接按钮：</h5>

<button class="mui-btn mui-btn-link">添加</button>

<h5>默认input标签样式：</h5>

<input type="button" value="type=button" />

<input type="reset" value="type=reset" />

<input type="submit" value="type=submit" />

<h5>默认button标签样式：</h5>

<button>按钮</button>

4.复选框—mCheckbox

<h5 class="mui-content-padded">图标左对齐</h5>

<div class="mui-card">

    <form class="mui-input-group">

        <div class="mui-input-row mui-checkbox mui-left">

            <label>Checkbox</label>

            <input name="checkbox" type="checkbox" >

        </div>

        <div class="mui-input-row mui-checkbox mui-left">

            <label>Checkbox</label>

            <input name="checkbox" type="checkbox" checked>

        </div>

    </form>

</div>

<h5 class="mui-content-padded">图标右对齐</h5>

<div class="mui-card">

    <form class="mui-input-group">

        <div class="mui-input-row mui-checkbox">

            <label>Checkbox</label>

            <input name="checkbox1" type="checkbox" >

        </div>

        <div class="mui-input-row mui-checkbox">

            <label>Checkbox</label>

            <input name="checkbox1" type="checkbox" checked>

        </div>

    </form>

</div>

5.图片轮播—mGallery(mGallery-table图文表格)

<div class="mui-slider">

    <div class="mui-slider-group">

        <div class="mui-slider-item">

            <a href="#">

                <img src="http://placehold.it/200x100">

                <p class="mui-slider-title">文字说明1</p>

            </a>

        </div>

        <div class="mui-slider-item">

            <a href="#">

                <img src="http://placehold.it/200x100">

                <p class="mui-slider-title">文字说明2</p>

            </a>

        </div>

    </div>

    <div class="mui-slider-indicator">

        <div class="mui-indicator mui-active"></div>

        <div class="mui-indicator"></div>

    </div>

</div>

<ul class="mui-table-view mui-grid-view">

    <li class="mui-table-view-cell mui-media mui-col-xs-6">

        <a href="#">

            <img class="mui-media-object" src="http://placehold.it/400x300">

            <div class="mui-media-body">文字说明1</div>

        </a>

    </li>

    <li class="mui-table-view-cell mui-media mui-col-xs-6">

        <a href="#">

            <img class="mui-media-object" src="http://placehold.it/400x300">

            <div class="mui-media-body">文字说明2</div>

        </a>

    </li>

</ul>

6.九宫格—mGrid

<div class="mui-card">

    <ul class="mui-table-view mui-grid-view mui-grid-9">

        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">

            <a href="#">

                <span class="mui-icon mui-icon-home"></span>

                <div class="mui-media-body">Home</div>

            </a>

        </li>

        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">

            <a href="#">

                <span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span>

                <div class="mui-media-body">Email</div>

            </a>

        </li>

        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">

            <a href="#">

                <span class="mui-icon mui-icon-chatbubble"></span>

                <div class="mui-media-body">Chat</div>

            </a>

        </li>

        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">

            <a href="#">

                <span class="mui-icon mui-icon-location"></span>

                <div class="mui-media-body">Location</div>

            </a>

        </li>

        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">

            <a href="#">

                <span class="mui-icon mui-icon-search"></span>

                <div class="mui-media-body">Search</div>

            </a>

        </li>

        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">

            <a href="#">

                <span class="mui-icon mui-icon-phone"></span>

                <div class="mui-media-body">Phone</div>

            </a>

        </li>

    </ul>

</div>

7.列表—mList(mList-Media图文列表)

<div class="mui-card">

    <ul class="mui-table-view">

        <li class="mui-table-view-cell">

            <a class="mui-navigate-right">

                Item 1

            </a>

        </li>

        <li class="mui-table-view-cell">

            <a class="mui-navigate-right">

                Item 2

            </a>

        </li>

        <li class="mui-table-view-cell">

            <a class="mui-navigate-right">

                Item 3

            </a>

        </li>

    </ul>

</div>

<ul class="mui-table-view">

    <li class="mui-table-view-cell">

        <a class="mui-navigate-right">

            <img class="mui-media-object mui-pull-left" src="img/hbuilder.png">

            <div class="mui-media-body">

                主标题

                <p class='mui-ellipsis'>这里是摘要</p>

            </div>

        </a>

    </li>

    <li class="mui-table-view-cell">

        <a class="mui-navigate-right">

            <img class="mui-media-object mui-pull-left" src="img/hbuilder.png">

            <div class="mui-media-body">

                主标题

                <p class='mui-ellipsis'>这里是摘要</p>

            </div>

        </a>

    </li>

</ul>

8.分页—mPagination

<h5 class="mui-content-padded">分页(默认尺寸)</h5>

<div class="mui-content-padded">

    <ul class="mui-pagination">

        <li class="mui-previous mui-disabled">

            <a href="#">

                &laquo;

            </a>

        </li>

        <li class="mui-active">

            <a href="#">

                1

            </a>

        </li>

        <li>

            <a href="#">

                2

            </a>

        </li>

        <li>

            <a href="#">

                3

            </a>

        </li>

        <li>

            <a href="#">

                4

            </a>

        </li>

        <li>

            <a href="#">

                5

            </a>

        </li>

        <li class="mui-next">

            <a href="#">

                &raquo;

            </a>

        </li>

    </ul>

</div>

<h5 class="mui-content-padded">分页(大尺寸)</h5>

<div class="mui-content-padded">

    <ul class="mui-pagination mui-pagination-lg">

        <li class="mui-previous">

            <a href="#">

                &laquo;

            </a>

        </li>

        <li>

            <a href="#">

                1

            </a>

        </li>

        <li>

            <a href="#">

                2

            </a>

        </li>

        <li>

            <a href="#">

                3

            </a>

        </li>

        <li>

            <a href="#">

                4

            </a>

        </li>

        <li class="mui-active">

            <a href="#">

                5

            </a>

        </li>

        <li class="mui-next mui-disabled">

            <a href="#">

                &raquo;

            </a>

        </li>

    </ul>

</div>

<h5 class="mui-content-padded">分页(小尺寸)</h5>

<div class="mui-content-padded">

    <ul class="mui-pagination mui-pagination-sm">

        <li class="mui-previous">

            <a href="#">

                &laquo;

            </a>

        </li>

        <li>

            <a href="#">

                1

            </a>

        </li>

        <li>

            <a href="#">

                2

            </a>

        </li>

        <li class="mui-active">

            <a href="#">

                3

            </a>

        </li>

        <li>

            <a href="#">

                4

            </a>

        </li>

        <li>

            <a href="#">

                5

            </a>

        </li>

        <li class="mui-next">

            <a href="#">

                &raquo;

            </a>

        </li>

    </ul>

</div>

<h5 class="mui-content-padded">翻页(默认)</h5>

<div class="mui-content-padded">

    <ul class="mui-pager">

        <li>

            <a href="#">

                上一页

            </a>

        </li>

        <li>

            <a href="#">

                下一页

            </a>

        </li>

    </ul>

</div>

<h5 class="mui-content-padded">翻页(对齐)</h5>

<div class="mui-content-padded">

    <ul class="mui-pager">

        <li class="mui-previous">

            <a href="#">

                上一页

            </a>

        </li>

        <li class="mui-next">

            <a href="#">

                下一页

            </a>

        </li>

    </ul>

</div>

<h5 class="mui-content-padded">翻页(禁用)</h5>

<div class="mui-content-padded">

    <ul class="mui-pager">

        <li class="mui-disabled">

            <span> 上一页 </span>

        </li>

        <li>

            <a href="#">

                下一页

            </a>

        </li>

    </ul>

</div>

9.滑块—mRange

<h5 style='margin-top:35px;'>label+输入框+滑块：</h5>

<div class="mui-input-row mui-input-range field-contain">

    <div style="float:left">

        <label >滑块：</label>

        <input type="text" id='field-range-input' value='60'>

    </div>

    <div style="margin-left:121px;">

        <input type="range" id='field-range' value="60" min="0" max="100" />

    </div>

</div>

<h5>label+滑块：<span id='inline-range-val'>20</span></h5>

<div class="mui-input-row mui-input-range">

    <label>滑块：</label>

    <input type="range" id='inline-range' value="20" min="0" max="100" >

</div>

<h5>整行滑块：<span id='block-range-val'>50</span></h5>

<div class="mui-input-row mui-input-range">

    <input type="range" id='block-range' value="50" min="0" max="100" >

</div>

10.开关—mSwitch

<div class="mui-content">

    <div class="mui-content-padded">

        <ul class="mui-table-view">

            <li class="mui-table-view-cell">

                <span></span>

                <div class="mui-switch mui-active">

                    <div class="mui-switch-handle"></div>

                </div>

            </li>

            <li class="mui-table-view-cell">

                <span></span>

                <div class="mui-switch">

                    <div class="mui-switch-handle"></div>

                </div>

            </li>

            <li class="mui-table-view-cell">

                <span></span>

                <div class="mui-switch mui-switch-mini mui-active ">

                    <div class="mui-switch-handle"></div>

                </div>

            </li>

            <li class="mui-table-view-cell">

                <span></span>

                <div class="mui-switch mui-switch-mini">

                    <div class="mui-switch-handle"></div>

                </div>

            </li>

            <li class="mui-table-view-cell">

                <span></span>

                <div class="mui-switch mui-switch-blue mui-active">

                    <div class="mui-switch-handle"></div>

                </div>

            </li>

            <li class="mui-table-view-cell">

                <span></span>

                <div class="mui-switch mui-switch-blue">

                    <div class="mui-switch-handle"></div>

                </div>

            </li>

            <li class="mui-table-view-cell">

                <span></span>

                <div class="mui-switch mui-switch-blue mui-switch-mini mui-active">

                    <div class="mui-switch-handle"></div>

                </div>

            </li>

            <li class="mui-table-view-cell">

                <span></span>

                <div class="mui-switch mui-switch-blue mui-switch-mini">

                    <div class="mui-switch-handle"></div>

                </div>

            </li>

        </ul>

    </div>

</div>

mui('.mui-content .mui-switch').each(function() {//循环所有toggle

    //toggle.classList.contains('mui-active') 可识别该toggle的开关状态

    this.parentNode.querySelector('span').innerText = '状态：' + (this.classList.contains('mui-active') ? 'true' : 'false');

    /**

     * toggle 事件监听

     */

    this.addEventListener('toggle', function(event) {

        //event.detail.isActive 可直接获取当前状态

        this.parentNode.querySelector('span').innerText = '状态：' + (event.detail.isActive ? 'true' : 'false');

    });

});

11.选项卡—mTab

<nav class="mui-bar mui-bar-tab">

    <a class="mui-tab-item mui-active">

        <span class="mui-icon mui-icon-home"></span>

        <span class="mui-tab-label">首页</span>

    </a>

    <a class="mui-tab-item">

        <span class="mui-icon mui-icon-phone"></span>

        <span class="mui-tab-label">电话</span>

    </a>

    <a class="mui-tab-item">

        <span class="mui-icon mui-icon-email"></span>

        <span class="mui-tab-label">邮件</span>

    </a>

    <a class="mui-tab-item">

        <span class="mui-icon mui-icon-gear"></span>

        <span class="mui-tab-label">设置</span>

    </a>

</nav>

Mui框架一快捷键+基础知识点的更多相关文章

.NET基础知识点
.NET基础知识点 l .Net平台 .Net FrameWork框架 l .Net FrameWork框架提供了一个稳定的运行环境,:来保障我们.Net平台正常的运转 l 两种交 ...
JavaScript 开发者经常忽略或误用的七个基础知识点(转)
JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新 ...
JavaScript 开发者经常忽略或误用的七个基础知识点
JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新 ...
JavaScript开发者常忽略或误用的七个基础知识点
JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新 ...
(转)JavaScript 开发者经常忽略或误用的七个基础知识点
英文原文:7 JavaScript Basics Many Developers Aren't Using (Properly) JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和 ...
跨平台移动端APP开发---简单高效的MUI框架
MUI是dcloud(数字天堂)公司旗下的一款跨平台开发移动APP的框架产品,在学习MUI框架之前,最先接触了Hbuilder代码编辑器,它带给我的第一感觉是快,这是HBuilder的最大优势,通过完 ...
MUI框架开发HTML5手机APP(一)--搭建第一个手机APP
前言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用HTML5开发手机APP,而随着手机硬件设备配置的不断提升,各种开发框架的不断优化,也使着H5开发的 ...
TypeScript 基础知识点整理
一.TypeScript的特点 1.支持ES6规范 2.强大的IDE支持(集成开发环境) 允许为变量指定类型,减少你在开发阶段犯错误的几率. 语法提示,在IDE编写代码时,它会根据你所处的上下文把你能 ...
MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换
概述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblo ...

随机推荐

[OSG]OpenSceneGraph FAQ 以及OSG资源
1.地球背面的一个点,计算它在屏幕上的坐标,能得到吗? 不是被挡住了吗? 答:计算一个空间点的屏幕坐标,使用osgAPEx::GetScreenPosition函数.当空间点处于相机视空间内(不管它是 ...
快速增加sql数据
declare @i int begin insert into dbo.w10test(Name) select Name from dbo.w10test end;
SQLServer控制用户访问权限表
连接地址:http://www.cnblogs.com/yxyht/archive/2013/03/22/2975880.html 一.需求在管理数据库过程中,我们经常需要控制某个用户访问数据库的权 ...
2D空间中判断一点是否在三角形内
要注意如果是XY坐标轴的2D空间,要取差乘分量z而不是y. 实现原理是,将三角形ABC三个边(AB,BC,CA)分别与比较点判断差乘,如果这3个差乘结果表示的方向一致,说明就在三角形内. 效果: 代码 ...
Centos7永久修改主机名
最近在编写centos6.x的启动脚本,考虑到以后系统会升到7.x,故想让脚本兼容7.x,还是有一些和6版本不一样的地址,修改主机名比较常用,特此记录一下 1.命令行修改: hostnamectl s ...
SunRay4(新蕾4) 定时自动关机方案, Linux后台自动任务crontab实践
目录: 需求和思路分析具体实现步骤理解Crontab Crontab具体参数详细说明最近碰到一个想要实现定时自动关机的功能,关机的指令无非就是: shutdown -h time 调用openw ...
Radmin Server-3.5 完美绿色破解版（x32 x64通用）第三版 + 单文件制作方法
Radmin Server v3.5 汉化破解绿色版(x32 x64通用) 第三版下载链接: https://pan.baidu.com/s/1qYVcSQo 2016年7月8日更新第三版1.修复在 ...
景区3D指纹验证系统解决方案
旅游业已成为全球经济中发展势头最强劲和规模最大的产业之一.旅游业在城市经济发展中的产业地位.经济作用逐步增强,旅游业对城市经济的拉动性.社会就业的带动力.以及对文化与环境的促进作用日益显现.指纹门票为 ...
Hbase的配置和安装
Hbase的配置和安装 1. 解压hbase.配置HBASE_HOME tar -zxvf hbase-1.2.4.tar.gz 2. 修改$HBASE_HOME/conf/hbase-env.sh文 ...
[转]抓取安卓APP内接口的方法--Charles
http://blog.csdn.net/yyh352091626/article/details/52759294

Mui框架一 快捷键+基础知识点

1.折叠面板--mAccordion

2.数字角标—mBadges

3.按钮—mButton(mButton-blue/red/green/yellow/purple/)

4.复选框—mCheckbox

5.图片轮播—mGallery(mGallery-table图文表格)

6.九宫格—mGrid

7.列表—mList(mList-Media图文列表)

8.分页—mPagination

9.滑块—mRange

10.开关—mSwitch

11.选项卡—mTab

Mui框架一 快捷键+基础知识点的更多相关文章

随机推荐

热门专题

Mui框架一快捷键+基础知识点

Mui框架一快捷键+基础知识点的更多相关文章