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

随机推荐

在jquery的ajax中添加自定义的header信息
转自网络 1 $.ajax({ type: "POST", url: "http://192.168.0.88/action.cgi?ActionID=WEB_Reque ...
Flags-Ural1225简单递推
Time limit: 1.0 second Memory limit: 64 MB On the Day of the Flag of Russia a shop-owner decided to ...
ZooKeeper测试笔记
1. 下载ZooKeeper.官网:http://zookeeper.apache.org 下载后解压,假定zookeeper程序目录为/home/test/zookeeper,为陈述方便此目录记为 ...
【前端】使用CSS使元素居中的几种方式
Precondition: <div class="parent"> <div class="item">居中</div> ...
cygwin安装
我安装的是cygwin2.5.2,相关下载:https://cygwin.com/setup-x86_64.exe 先安装cygwin,x86_64版本,安装时选择库(gcc-core.gcc-c++ ...
RMQ
1.概念: RMQ(Range Minimum/Maximum Query),即区间最值查询,是指这样一个问题:对于长度为n的数列A,回答若干询问RMQ(A,i,j)(i,j<=n),返回数列A ...
开发一个IONIC应用的首要操作（宏观）
1.创建工程 2.搭建路由(routes.js) 3.添加控制(controller.js) 4.加载模块(app.js)
【C语言训练】尼科彻斯定理
题目描述验证尼科彻斯定理,即:任何一个正整数的立方都可以写成一串连续奇数的和. 输入任一正整数输出该数的立方分解为一串连续奇数的和样例输入13样例输出13*13*13=2197=157+159+1 ...
-/bin/sh: ./led: not found的解决办法
环境介绍: 开发板:qq2440 交叉编译器:arm-linux-gcc 3.4.1 内核版本:2.6.13 一.针对该类问题从两个方面入手: 1.从权限出发,权限不够会出现此问题 2.从库文件出发, ...
ShareSDK 集成 Google+ 登录 400. Error:redirect_uri_mismatch 和 Error Domain=ShareSDKErrorDomain Code=204
最近在集成ShareSDK中 Google+ 登录授权时候出现了如下几个问题 1. 400. Error:redirect_uri_mismatch 出现这种情况, redirectUri应 ...

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