HTML5 mui框架(声明方式)(折叠面板)(数字角标)(按钮)

声明方式(HBuilder会自动生成)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
          mui.init();
    </script>
</head>
<body>
    <p>内容区</p>
</body>
</html>

accordion 折叠面板

<body>
    <ul class="mui-table-view">
        <!--折叠面板的默认选中项 mui-active-->
        <li class="mui-table-view-cell mui-collapse mui-active">
            <!--折叠面板标题内容-->
            <a class="mui-navigate-right" href="#">面板1</a>
            <!--折叠面板具体内容-->
            <div class="mui-collapse-content">
                <p>面板1子内容</p>
            </div>
        </li>
        <li class="mui-table-view-cell mui-collapse">
            <a class="mui-navigate-right" href="#">面板2</a>
            <div class="mui-collapse-content">
                <p>面板2子内容</p>
            </div>
        </li>
        <li class="mui-table-view-cell mui-collapse">
            <a class="mui-navigate-right" href="#">面板3</a>
            <div class="mui-collapse-content">
                <p>面板3子内容</p>
            </div>
        </li>
   </ul>
</body>

badges数字角标

<body>
    <!--默认灰色背景-->
    <span class="mui-badge">1</span>
    <!--蓝色-->
    <span class="mui-badge mui-badge-primary">12</span>
    <!--绿色-->
    <span class="mui-badge mui-badge-success">123</span>
    <!--橘黄色-->
    <span class="mui-badge mui-badge-warning">3</span>
    <!--红色-->
    <span class="mui-badge mui-badge-danger">45</span>
    <!--紫色-->
    <span class="mui-badge mui-badge-purple">456</span>
    <!--无色-->
    <span class="mui-badge mui-badge-inverted">1</span>
</body>

button按钮 

<body>
    <!--背景色按钮-->
    <button type="button" class="mui-btn">默认</button>
    <button type="button" class="mui-btn mui-btn-primary">蓝色</button>
    <button type="button" class="mui-btn mui-btn-success">绿色</button>
    <button type="button" class="mui-btn mui-btn-warning">黄色</button>
    <button type="button" class="mui-btn mui-btn-danger">红色</button>
    <button type="button" class="mui-btn mui-btn-royal">紫色</button>
    <!--边框色按钮-->
    <button type="button" class="mui-btn mui-btn-outlined">默认</button>
    <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">蓝色</button>
    <button type="button" class="mui-btn mui-btn-success mui-btn-outlined">绿色</button>
    <button type="button" class="mui-btn mui-btn-warning mui-btn-outlined">黄色</button>
    <button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">红色</button>
    <button type="button" class="mui-btn mui-btn-royal mui-btn-outlined">紫色</button>
</body>
时间: 2024-10-23 03:55:51

HTML5 mui框架(声明方式)(折叠面板)(数字角标)(按钮)的相关文章

MUI - actionsheet(操作表)、badge(数字角标)

原文地址:http://www.hcoder.net/tutorials/info_83.html 1.操作表 actionsheet一般从底部弹出,显示一系列可供用户选择的操作按钮: actionsheet是从popover控件基础上演变而来,实际上就是一个固定从底部弹出的popover,故DOM结构和popove类似,只是需要在含.mui-popover类的节点上增加.mui-popover-bottom..mui-popover-action类: <div id="sheet1&qu

iOS 实现角标 新消息提示红点 数字角标

镔哥今天写写实习新消息提示的小圆圈数字角标 直接上代码吧. 1:直接复杂uibarButton类 // //  UIBarButtonItem+Badge.h //  therichest // //  Created by 淘股 on 2015-05-05. //  Copyright (c) 2015 taogu Inc. All rights reserved. // #import <UIKit/UIKit.h> @interface UIBarButtonItem (Badge) @

Android 为应用添加数字角标

今天在论坛上看到了一个帖子,终于搞清了我很久以来的一个困惑,android到底能不能实现ios的角标效果,QQ是怎么实现的.看了这个帖子顿时终于解除了我的困惑. 先说一个下大概的思路: 大家都知道android系统默认是不支持角标的.但是有时候你又可以在很多系统上看到角标,这些系统包括 小米手机的miui 三星手机的TouchWiz  索尼手机; 这些手机的系统应用都可以显示数字角标.这是应为这些系统进行了定制,使用的是自己的launcher. 所以在这些系统上的实现思路就是使用这些手机的私有a

Android Icon数字角标(BadgeNumber)的实现方式

http://blog.csdn.net/janice0529/article/details/44344169 Android系统 小米,三星,索尼手机发送桌面快键提醒数字图标,在Android系统中,众所周知不支持BadgeNumber,虽然第三方控件BadgeView可以实现应用内的数字提醒,但对于系统的图标,特别是app的logo图标很难实现数字标志,即使是绘图的方式不断修改,但这种方式天生弊端,实用性很差.但幸运的是,某些ROM厂商提供了私有的API,但也带来了难度,API的不同意意味

ios uibutton加数字角标

http://www.jianshu.com/p/0c7fae1cadac 第一种:https://github.com/mikeMTOL/UIBarButtonItem-Badge第二种:https://github.com/cwRichardKim/RKNotificationHub JSBadgeView  可以设置在任何view的很多位置,很好用 按钮右上角加个数字红点JSBadgeView *badgeView = [[JSBadgeView alloc]initWithParentV

IOS开发 应用程序图标数字角标

其实实现这个功能很简单,只要调用UIApplication即可. 用法用例:[UIApplication sharedApplication].applicationIconBadgeNumber=33; 当用户打开应用程或者退出应用程序之前把这个值归0就OK了. [UIApplication sharedApplication].applicationIconBadgeNumber=0;

【MUI框架】学习笔记整理 Day 1

MUI 框架之 [原生UI] (1)accordion(折叠面板) 由二级列表演化而来 1 <ul class="mui-table-view"> 2 <li class="mui-table-view-cell mui-collapse"> 3 <a class="mui-navigate-right" href="#"></a> 4 <div class="m

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">绿色</s

MUI框架的缩写输入

html 上面--代表最小触发字符 下面--代表非必要完整触发字符 组件 触发字符 mDoctype(mui-dom结构) mdo ctype mBody(主体) mbo dy mScroll(区域滚动容器) msc roll mrefreshContainer(刷新容器) mre fresh mHeader(标题栏) mhe ader mHeader(带返回箭头的标题栏) mhe aderwithBack mCheckbox(复选框) mch eckbox mCheckbox(复选框居左) m