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 ...

随机推荐

DataTable插件指定某列不可排序
datatable是一个jQuery扩展的表格插件.其提供了强大的表格功能. 官方地址:http://www.datatables.NET/ DataTable提供的表格样式里面,第一行都是会有排序功 ...
symfony安装笔记
下载http://symfony.com/download,这里版本是2.8 将D:\ApacheServer\php路径添加到环境变量path中,在cmd命令行中可以执行php命令打开php.in ...
java中递归的方法的实例
package com.demo.recursion; // 所谓递归,是指程序调用自身,当然,递归不会无休止地调用下去,它必然有一个出口,当满足条件时程序也就结束了,不然的话,那就是死循环了.// ...
《编写可维护的JavaScript》——JavaScript编码规范（七）
UI层的松耦合在web开发中,用户界面(UI)是由三个彼此隔离又相互作用的层定义的. HTML用来定义页面的数据和语义. CSS用来给页面添加样式,创建视觉特征. JavaScript用来给页面添加 ...
js定义对象的几种容易犯的错误
//js定义对象的几种容易犯的错误function Person() { getName = function (){ console.info(1); }; return this;}//Perso ...
linux问题
make:进入目录'/opt/FriendlyARM/tiny4412/05android/android-4.1.2'target Dex: framework trouble writing ou ...
socket(二)
作用域 1 2 3 if 1 == 1: name = 'alex' print(name) python中是没有块儿作用域的,所以python可以输出name java/c中有块级作用域, ...
Android性能分析之TraceView的使用
TraceView简介 TraceView是AndroidSDK里面自带的工具,用于对Android的应用程序以及Framework层的代码进行性能分析. TraceView是图形化的工具,最终它会产 ...
Chapter 2: 随机变量
1. 随机变量, 离散型随机变量,连续型随机变量设$\Omega$为随机试验的样本空间,$X:\Omega \rightarrow R$是定义在样本空间$\Omega$上的实值函数,则称$X$为随机 ...
[转]让窗体不显示在Alt+Tab中
public class MyForm : Form { protected override CreateParams CreateParams { get { const int WS_EX_AP ...

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框架一快捷键+基础知识点的更多相关文章