AmazeUI 折叠面板的实现代码


Posted in HTML / CSS onAugust 17, 2020

简介
 

Amaze UI 是一个针对 HTML 5 开发的轻量级、模块化、移动优先的跨屏前端框架,通过拆分、封装了一些常用的网页组件,比如轮播图框、文字框等等组件,让前端开发者只用复制代码便可以将这些跨屏的组件写入自己的网页中,而不需要自己在开发的过程中重写一遍。

<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>折叠面板</title>
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<link rel="icon" type="image/png" href="assets/i/favicon.png">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Amaze UI"/>
<link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileColor" content="#0e90d2">
<link rel="stylesheet" href="assets/css/amazeui.min.css">
</head>
<body style="margin: 50px;">
<!--折叠面板-->
<div class="am-panel-group" id="accordion">
  <div class="am-panel am-panel-default">
    <div class="am-panel-hd">
      <h4 class="am-panel-title" data-am-collapse="{parent: '#accordion', target: '#do-not-say-1'}">
		标题
      </h4>
    </div>
    <div id="do-not-say-1" class="am-panel-collapse am-collapse am-in">
      <div class="am-panel-bd">
		阅谁问君诵,水落清香浮
      </div>
    </div>
  </div>
  <div class="am-panel am-panel-default">
    <div class="am-panel-hd">
      <h4 class="am-panel-title" data-am-collapse="{parent: '#accordion', target: '#do-not-say-2'}">
		标题
      </h4>
    </div>
    <div id="do-not-say-2" class="am-panel-collapse am-collapse">
      <div class="am-panel-bd">
		阅谁问君诵,水落清香浮
      </div>
    </div>
  </div>
  <div class="am-panel am-panel-default">
    <div class="am-panel-hd">
      <h4 class="am-panel-title" data-am-collapse="{parent: '#accordion', target: '#do-not-say-3'}">
      	标题
      </h4>
    </div>
    <div id="do-not-say-3" class="am-panel-collapse am-collapse">
      <div class="am-panel-bd">
		阅谁问君诵,水落清香浮
      </div>
    </div>
  </div>
</div>
<!--折叠菜单-->
<button class="am-btn am-btn-primary" data-am-collapse="{target: '#collapse-nav'}">Menu <i class="am-icon-bars"></i></button>
<nav>
  <ul id="collapse-nav" class="am-nav am-collapse">
    <li><a href="">开始使用</a></li>
    <li><a href="">CSS 介绍</a></li>
    <li class="am-active"><a href="">JS 介绍</a></li>
    <li><a href="">功能定制</a></li>
  </ul>
</nav>
<!--折叠列表-->
<ul class="am-list admin-sidebar-list" id="collapase-nav-1">
  <li  class="am-panel">
    <a data-am-collapse="{parent: '#collapase-nav-1'}" href="#/"><i class="am-icon-home am-margin-left-sm"></i> 首页</a>
  </li>
  <li class="am-panel">
    <a data-am-collapse="{parent: '#collapase-nav-1', target: '#user-nav'}">
        <i class="am-icon-users am-margin-left-sm"></i> 人员管理 <i class="am-icon-angle-right am-fr am-margin-right"></i>
    </a>
    <ul class="am-list am-collapse admin-sidebar-sub" id="user-nav">
        <li><a href="#/userAdd"><i class="am-icon-user am-margin-left-sm"></i> 添加人员 </a></li>
        <li><a href="#/userList/0"><i class="am-icon-user am-margin-left-sm"></i> 人员列表 </a></li>
    </ul>
  </li>
  <li class="am-panel">
    <a data-am-collapse="{parent: '#collapase-nav-1', target: '#company-nav'}">
        <i class="am-icon-table am-margin-left-sm"></i> 单位(部门)管理 <i class="am-icon-angle-right am-fr am-margin-right"></i>
    </a>
    <ul class="am-list am-collapse admin-sidebar-sub" id="company-nav">
        <li><a href="#/companyAdd"><span class="am-icon-table am-margin-left-sm"></span> 添加单位(部门) </a></li>
        <li><a href="#/companyList/0"><span class="am-icon-table am-margin-left-sm"></span> 单位(部门)列表 </a></li>
    </ul>
  </li>
  <li class="am-panel">
    <a data-am-collapse="{parent: '#collapase-nav-1', target: '#role-nav'}">
        <i class="am-icon-table am-margin-left-sm"></i> 角色管理 <i class="am-icon-angle-right am-fr am-margin-right"></i>
    </a>
    <ul class="am-list am-collapse admin-sidebar-sub" id="role-nav">
        <li><a href="#/roleAdd"><span class="am-icon-table am-margin-left-sm"></span> 添加角色 </a></li>
        <li><a href="#/roleList/0"><span class="am-icon-table am-margin-left-sm"></span> 角色列表 </a></li>
    </ul>
  </li>
</ul>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="assets/ie8/jquery.min.js"></script>
<script src="assets/ie8/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
</body>
</html>

AmazeUI 折叠面板的实现代码

总结

到此这篇关于AmazeUI 折叠面板的实现代码的文章就介绍到这了,更多相关AmazeUI 折叠面板内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
May 07 HTML / CSS
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
Jun 11 HTML / CSS
一款利用纯css3实现的360度翻转按钮的实例教程
Nov 05 HTML / CSS
CSS3制作苹果风格键盘特效
Feb 26 HTML / CSS
CSS3的calc()做响应模式布局的实现方法
Sep 06 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
Jun 17 HTML / CSS
简单聊聊H5的pushState与replaceState的用法
Apr 03 HTML / CSS
HTML5中实现拖放效果无须借助javascript
Dec 26 HTML / CSS
HTML5标签使用方法详解
Nov 27 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
Jun 01 HTML / CSS
Canvas 帧动画吃苹果小游戏
Aug 05 HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
Apr 29 HTML / CSS
AmazeUI框架搭建的方法步骤(图文)
Aug 17 #HTML / CSS
AmazeUI 面板的实现示例
Aug 17 #HTML / CSS
AmazeUI 列表的实现示例
Aug 17 #HTML / CSS
详解如何使用rem或viewport进行移动端适配
Aug 14 #HTML / CSS
AmazeUI 导航条的实现示例
Aug 14 #HTML / CSS
AmazeUI导航的示例代码
Aug 14 #HTML / CSS
AmazeUI 输入框组的示例代码
Aug 14 #HTML / CSS
You might like
学习使用PHP数组
2006/10/09 PHP
PHP XML备份Mysql数据库
2009/05/27 PHP
jQuery 源码分析笔记
2011/05/25 PHP
php 团购折扣计算公式
2011/11/24 PHP
PHP二维数组矩形转置实例
2016/07/20 PHP
PHP钩子实现方法解析
2019/05/21 PHP
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
2014/01/13 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
使用JS 插件qrcode.js生成二维码功能
2017/02/20 Javascript
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
微信小程序配置服务器提示验证token失败的解决方法
2019/04/03 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
2020/05/09 Javascript
[43:24]VG vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python下的subprocess模块的入门指引
2015/04/16 Python
Windows下PyMongo下载及安装教程
2015/04/27 Python
python中装饰器级连的使用方法示例
2017/09/29 Python
python matplotlib画图实例代码分享
2017/12/27 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
python psutil模块使用方法解析
2019/08/01 Python
详解python 中in 的 用法
2019/12/12 Python
家居设计专业个人自荐信范文
2013/11/26 职场文书
文员岗位职责范本
2014/03/08 职场文书
《第一朵杏花》教学反思
2014/04/16 职场文书
激励口号大全
2014/06/17 职场文书
写给老婆的保证书
2015/02/27 职场文书
首席执行官观后感
2015/06/03 职场文书
施工安全协议书
2016/03/22 职场文书
使用react-virtualized实现图片动态高度长列表的问题
2021/05/28 Javascript
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle