H+后台主题UI框架---整理(二)
本篇文章是针对H+后台主题UI框架的整理的第二部分。主要只有一个point。如下:
其代码如下:
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>数据报告</h5> <span class="label label-primary">K+</span>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="index.html#">
<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a href="index.html#">选项1</a>
</li>
<li><a href="index.html#">选项2</a>
</li>
</ul>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<div> <div class="pull-right text-right"> <span class="bar_dashboard">5,3,9,6,5,9,7,3,5,2,4,7,3,2,7,9,6,4,5,7,3,2,1,0,9,5,6,8,3,2,1</span>
<br/>
<small class="font-bold">¥ 20 054.43</small>
</div>
<h4>广东省销售数据
<br/>
<small class="m-r"><a href="graph_flot.html"> 查看所有数据</a> </small>
</h4>
</div>
</div>
</div>
正常插入代码后刷新,显示的是张开的,点击向上的箭头才会收起。
如果,大家想实现这样的效果:
那么,只需要删减些代码即可:也就是说将下述代码复制粘贴,可有上述效果。
<div class="ibox float-e-margins m-b-no">
<div class="ibox-title b-s-n">
<h5>筛选</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-down"></i> //这里是向下箭头的图标
</a>
</div>
</div>
<div class="ibox-content"> //这里面写上下滑面板里面的内容即可 这里!!这里加上class,比如说class="aaa" 在css里面写上:.aaa{display:none;}即可
<div class="row"> </div>
</div>
</div>
按上述代码写好的,刷新出来会是默认下拉的,也就是面板默认展示出来的,如果,需要刷新页面后,面板是默认压缩的,则需添加一个class,比如说class="aaa" 在css里面写上:.aaa{display:none;}即可。
但是目前做项目的时候,出现一个问题。就是在.ibox-content里面添加e-charts统计图表的时候,图标并不会正常显示,前提是刷新页面后,面板的状态是收缩回去的,也就是添加了.aaa的class。如果不添加class,让他刷新后默认显示,图标就会正常显示。具体的解决方案见后续。
H+后台主题UI框架---整理(二)的更多相关文章
- H+后台主题UI框架---整理(三)
这里面介绍下H+后台主题UI框架里面插件的应用,不过都是最最简单最初级的功能.主要有日历插件,input单选多选(icheck)插件,input下拉搜索(chosen)插件. 一.日历插件 有如下几种 ...
- H+后台主题UI框架---整理(一)
本篇文章是对H+这种框架进行整理,顺便了解一下标准的代码规范的写法. 一.表单: 1).下面是一个基本表单: 现在来看这个表单的结构: 1.整个表单的外框结构是一个div,至于padding和marg ...
- H+后台主题UI框架---整理
本篇文章是对H+这种框架进行整理,顺便了解一下标准的代码规范的写法. 一.表单: 1).下面是一个基本表单: 现在来看这个表单的结构: 1.整个表单的外框结构是一个div,至于padding和marg ...
- H+ 后台主题UI框架
十年河东,十年河西,莫欺少年穷 学无止境,精益求精 今天得到了一个非常完美的后端管理系统框架:H+ 后台主题UI框架 H+ 后台主题UI框架 H+是一个完全响应式,基于Bootstrap3.3.6最新 ...
- 游戏UI框架设计(二) : 最简版本设计
游戏UI框架设计(二) --最简版本设计 为降低难度决定先讲解一个最简版本,阐述UI框架的核心设计理念.这里先定义三个核心功能: 1:UI窗体的自动加载功能. 2:缓存UI窗体. 3:窗体生命周期(状 ...
- 中小后台系统UI框架--EasyUI
后台开发人员不擅长前端UI界面,而小型软件公司没有专职美工岗位,开发人员只能借助开源UI框架,复用已有组件,完成用户操作界面.EasyUI是基于jQuery的UI插件集合体,可帮助开发者轻松构建网页. ...
- 基于jquery开发的UI框架整理分析
根据调查得知,现在市场中的UI框架差不多40个左右,不知大家都习惯性的用哪个框架,现在市场中有几款UI框架稍微的成熟一些,也是大家比较喜欢的一种UI框架,那应该是jQuery,有部分UI框架都是根据j ...
- GitHub 上受欢迎的 Android UI Library 整理二
通知 https://github.com/Tapadoo/Alerter ★2528 - 克服Toast和Snackbar的限制https://github.com/wenmingvs/Notify ...
- 前端UI框架整理
JQuery Jquery官网:http://jquery.com/ jQuery是一个快速,小巧,且功能丰富的JavaScript库. Jquery-1.11.3.min.js 压缩版:http:/ ...
随机推荐
- (C)strcpy ,strncpy与strlcpy
1. 背景 好多人已经知道利用strncpy替代strcpy来防止缓冲区越界. 但是如果还要考虑运行效率的话,也许strlcpy是一个更好的方式. 2. strcpy strcpy 是依据 /0 作为 ...
- Silverlight中使用MVVM(4)
Silverlight中使用MVVM(1)--基础 Silverlight中使用MVVM(2)—提高 Silverlight中使用MVVM(3)—进阶 Silverlight中使用MVVM(4)—演练 ...
- Android零碎知识点,之后会一直更新的哦!
view的getCompoundDrawables()方法,调用这个方法返回的是控件的左上右下四个位置的Drawable,并且返回的类型是数据 setBounds(x,y,width,height); ...
- Spring3 Schedule Task之注解实现 (两次起动Schedule Task 的解决方案)
Spring3 Schedule Task之注解实现 (两次起步Schedule Task 的解决方案)Spring3 Schedule Task之注解实现 (两次启动Schedule Task 的解 ...
- maven实战(2)-- m2eclipse插件配置
使用eclipse进行maven项目的开发,需要安装m2eclipse插件.下面介绍该插件的配置,插件的安装在此不作介绍. 配置m2eclipse 先决条件:已安装maven,m2eclipse 以上 ...
- 分段控制器--UISegmentedControl 基本用法
http://blog.csdn.net/heng615975867/article/details/43527295 http://blog.csdn.net/gf771115/article/de ...
- 自定义UITabBarController
用的时候直接拷贝代码即可. 1.在AppDelegate设置跟控制器为:PQTabBarController #import "PQTabBarController.h" @int ...
- Snowflake算法 ID生成
Snowflake算法 ID生成 http://blog.csdn.net/w200221626/article/details/52064976 使用UUID或者GUID产生的ID没有规则 Snow ...
- LRU原理和Redis实现——一个今日头条的面试题
看了评论,发现有些地方有问题,更新了图和一些描述,希望可以更清晰一些,也欢迎关注,还会有干货文章 -------- 很久前参加过今日头条的面试,遇到一个题,目前半部分是如何实现 LRU,后半部分是 R ...
- Java中的Cloneable接口与深拷贝、浅拷贝
Cloneable接口是一个标记接口,也就是没有任何内容,定义如下: 这里分析一下这个接口的用法,clone方法是在Object种定义的,而且是protected型的,只有实现了这个接口,才可以在该类 ...