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 相关文章推荐
CSS3 渐变(Gradients)之CSS3 径向渐变
Jul 08 HTML / CSS
深入解读CSS3中transform变换模型的渲染
May 27 HTML / CSS
CSS3 简单又实用的5个属性
Mar 04 HTML / CSS
利用css3制作3D样式按钮实现代码
Mar 18 HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
Apr 04 HTML / CSS
Css3圆角边框制作代码
Nov 18 HTML / CSS
css3旋转木马_动力节点Java学院整理
Jul 12 HTML / CSS
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
Jan 06 HTML / CSS
使用canvas绘制贝塞尔曲线
Dec 17 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
Nov 16 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
Nov 22 HTML / CSS
详解如何在登录过期后跳出Ifram框架
Sep 10 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 mssql 分页SQL语句优化 持续影响
2009/04/26 PHP
PHP 文章中的远程图片采集到本地的代码
2009/07/30 PHP
PHP用mysql数据库存储session的代码
2010/03/05 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
以文件形式缓存php变量的方法
2015/06/26 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
php删除数组中重复元素的方法
2015/12/22 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
几个有趣的Javascript Hack
2010/07/24 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
2014/09/06 Javascript
动态加载jQuery的方法
2015/06/16 Javascript
Boostrap实现的登录界面实例代码
2016/10/09 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
2017/08/23 Javascript
Angular 5.0 来了! 有这些大变化
2017/11/15 Javascript
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
vue如何引入sass全局变量
2018/06/28 Javascript
详解微信小程序图片地扯转base64解决方案
2019/08/18 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
[02:36]DOTA2英雄基础教程 一击致命幻影刺客
2013/12/06 DOTA
python类的方法属性与方法属性的动态绑定代码详解
2017/12/27 Python
Python实现k-means算法
2018/02/23 Python
python3的print()函数的用法图文讲解
2019/07/16 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
奢华时尚的创新平台:Baltini
2020/10/03 全球购物
大四学生毕业自荐信
2013/11/07 职场文书
二年级数学教学反思
2014/01/21 职场文书
2014年百日安全生产活动总结
2014/05/04 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
2015世界地球日活动总结
2015/02/09 职场文书
出国留学导师推荐信
2015/03/26 职场文书
你真的会用Mysql的explain吗
2022/03/31 MySQL
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs