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

随机推荐

微信支付JsAPI
https://pay.weixin.qq.com/wiki/doc/api/download/WxpayAPI_php_v3.zip 下载获取微信支付demo压缩包打开压缩包,并将其中 Wxpay ...
课程设计 --- 黑白棋中的 AI
原文链接:https://www.dreamwings.cn/reversi/3013.html 到了考试周了佯,可是偏偏这个时候迎来了很多很多的课程设计,幸好教授把C语言的课程设计提前发出了,不然都 ...
对魔兽世界、支付宝、Linux三类软件的简单分析
软工第一次作业: 软件有很多种,如工具类软件.游戏类软件.系统类软件,它们的运行方式也各种各样,如以单机方式运行.以网站方式运行或者以APP方式运行在手机端等,请选取三种软件,分析它们各自的特点. 这 ...
Metro-Ural119递推
Time limit: 0.5 second Memory limit: 64 MB Many of SKB Kontur programmers like to get to work by Met ...
webstorm2016.2 for mac 安装
文件来自斯蒂芬周: http://www.sdifenzhou.com/?p=6941&jdfwkey=jmnzy 附上详细安装步骤:
javascript 值类型与引用类型
写的比较简单哈,只是用来记忆下 (1)值类型:undefined.null.Boolean.Number和String (2)引用类型:对象.数组.函数
3.密码pasuwado————记第一次超越Candy？
激动人心的2016.11.4模拟赛结束了更激动人心的是我得了90分,第一次超越豪哥,特立文纪念. 3.密码 [问题描述] 哪里有压迫,哪里就有反抗. moreD的宠物在法庭的帮助下终于反抗了.作为一 ...
UVA 10795 新汉诺塔问题
https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...
linux @后面的主机名如何修改
@后面的为linux系统的主机名临时修改方法:执行 hostname 主机名再执行 bash 永久修改方法:修改配置文件/etc/sysconfig/network修改参数HOSTNAME=主机名永 ...
matplotlib绘制动画
matplotlib从1.1.0版本以后就开始支持绘制动画,具体使用可以参考官方帮助文档.下面是一个很基本的例子: """ A simple example of an ...

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