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 相关文章推荐
HTML5 用动画的表现形式装载图像
Mar 08 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
Feb 06 HTML / CSS
基于 HTML5 WebGL 实现的垃圾分类系统
Oct 08 HTML / CSS
Html5 实现微信分享及自定义内容的流程
Aug 20 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
Jul 04 HTML / CSS
探索HTML5本地存储功能运用技巧
Mar 02 HTML / CSS
Html5百叶窗效果的示例代码
Dec 11 HTML / CSS
canvas进阶之如何画出平滑的曲线
Oct 15 HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
Nov 01 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
Apr 09 HTML / CSS
html5 外链式实现加减乘除的代码
Sep 04 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
Dedecms常用函数解析
2008/02/01 PHP
php格式化日期实例分析
2014/11/12 PHP
php绘制一条弧线的方法
2015/01/24 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
2015/12/18 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
麦鸡的TAB切换功能结合了javascript和css
2007/12/17 Javascript
js 处理URL实用技巧
2010/11/23 Javascript
基于jQuery的获取标签名的代码
2012/07/16 Javascript
js获取客户端外网ip的简单实例
2013/11/21 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
JS实现仿FLASH效果的竖排导航代码
2015/09/15 Javascript
整理Javascript事件响应学习笔记
2015/12/02 Javascript
js+html5操作sqlite数据库的方法
2016/02/02 Javascript
js两种拼接字符串的简单方法(必看)
2016/09/02 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
2016/09/26 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
详解Node.js access_token的获取、存储及更新
2017/06/20 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
vue.js删除列表中的一行
2018/06/30 Javascript
vue实现文件上传功能
2018/08/13 Javascript
JavaScript实现多态和继承的封装操作示例
2018/08/20 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
2019/07/04 Javascript
详解python的几种标准输出重定向方式
2016/08/15 Python
python实现字符串和字典的转换
2018/09/29 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
python 提取key 为中文的json 串方法
2018/12/31 Python
Python线程threading模块用法详解
2020/02/26 Python
应届生服装设计自我评价
2013/09/20 职场文书
传播学毕业生求职信
2013/10/11 职场文书
幼儿园中班下学期评语
2014/04/18 职场文书
教师聘用意向书
2015/05/11 职场文书
golang中实现给gif、png、jpeg图片添加文字水印
2021/04/26 Golang
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server
Python获取字典中某个key的value
2022/04/13 Python
mysql函数之截取字符串的实现
2022/08/14 MySQL