码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-07-24 13:34:05      阅读:479      评论:0      收藏:0      [点我收藏+]

标签:

声明方式(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>

 

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

标签:

原文地址:http://www.cnblogs.com/lovling/p/5700581.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!