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>

时间： 2024-10-21 19:37:51

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

黑马程序员——Java I/O流基础知识点（File类）

File工具 File类就是用俩将文件或者文件夹封装对象,弥补流对象的不足--流只能操作数据,不能操作文件夹的 封装的是路径!!! 构造方法演示 1.可以将已有的未出现的文件或者文件夹封装成对象. File f1=new File("c:\\abc\\a.txt"): File f2=new File("d:\\abc","ab.txt"打印,会打印路径.:目录分隔符,为了更好地跨平台File. File类常见功能 1,创建 createNewF

C# .Net基础知识点解答

C# .Net基础知识点解答 1. 什么是.NET?什么是CLI?什么是CLR?IL是什么?JIT是什么,它是如何工作的?GC是什么,简述一下GC的工作方式? 通俗的讲,.Net是微软开发应用程序的一个平台: CLI是Common Language Infrastructure,是公共语言架构: CLR是Common Language Runtime,即公共语言运行时: IL是.Net编译器产生的中间代码,称为通用中间语言CIL(Common Intermediate Language),CIL

.NET基础知识点

.NET基础知识点   l  .Net平台  .Net FrameWork框架   l  .Net FrameWork框架提供了一个稳定的运行环境,:来保障我们.Net平台正常的运转   l  两种交互模式 C/S:要求客户的电脑上必须要安装一个客户端:qq.360.快播等..... B/S:要求客户的电脑上只需要安装一个浏览器   l  书写代码需要注意的地方: n  代码中出现的所有标点都是英文半角 shift键快速切换中文半角和英文半角 n  shift+空格切换全角/半角 n  在c#代

JavaScript 开发者经常忽略或误用的七个基础知识点

英文原文:7 JavaScript Basics Many Developers Aren't Using (Properly) JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新手开发者被各种强大的 JavaScript 框架吸引进来,但他们却忽略了框架身后浩如星海的 JavaScript 实用技巧.本文将为你呈献其中7个基础知识点. 1. 在

JAVA基础知识点总结（全集）

1.JAVA简介 1.1java体系结构:j2se,javaweb,j2ee 1.2java特点:平台无关(虚拟机),垃圾回收(使得java更加稳定) 1.3 JDK与JRE,JDK:java开发环境,JRE:java运行环境 1.4第一个java程序:HelloWorld,java的入口是main(public static void main(String[] args)) 1.5java程序的开发步骤:.java编译(javac)成.class运行(java).class文件 2.基本数据

MUI框架-01-介绍-创建项目-简单页面

MUI框架-01-介绍-准备-创建项目 从0开始快速高效学习 MUI 框架 官方文档:http://dev.dcloud.net.cn/mui/ui/ (1)MUI 介绍 MUI 是什么,解决了什么问题? MUI 官方号称最接近原生APP体验的高性能前端框架 简单的说就是webapp的以个开发框架 webapp和原生app性能及体验的差距,一直是移动app开发者放弃HTML5的首要原因. 浏览器天生的切页白屏.不忍直视的转页动画.浮动元素的抖动.无法流畅下拉刷新等问题,这些都让HTML5开发者倍

移动端 mui框架中input输入框或任何输入框聚焦后页面自动上移

一.mui框架中点击input后,安卓手机弹出自带的输入键盘时,页面自动上移 实现方法: (1)只要把input标签放在mui-content这个类里面就可以了 <div class="mui-content"> <input .../> </div> 注意:在有些情况下不适用,当把input标签放入mui-scroll中就不行了,也就是说mui-content和mui-scroll同时存在时不适用 <div class="mui-c

MUI 框架微信支付

在MUI 框架中实现了支付宝支付后,以为MUI微信支付,也没什么大问题,结果这个问题困扰了我几天,后面再同事的提醒下终于弄出来了, 问题出在,开始使用Dcloud 公有证书 怎么也付不了....,后面改成自己就OK了....希望后来者看到此博,能节约一点时间. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" co

使用mui框架后a标签无法跳转

由于最近工作项目上使用到前台mui框架,笔者在将H5转换为jsp时,遇见各种各样问题,原因归结为对mui框架不熟悉,今天就遇见一个特别奇怪的问题,界面中超链接<a>标签无法跳转,笔者试着添加点击事件,但效果依然是无法跳转,查资料发现mui搞得鬼: 我的代码主要是下边代码搞得鬼: //删除出行人  mui('body').on('tap','.business_icon_remove',function(){    var parentNode_1 = this.parentNode,