本篇文章是针对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">&yen; 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框架---整理(二)的更多相关文章

  1. H+后台主题UI框架---整理(三)

    这里面介绍下H+后台主题UI框架里面插件的应用,不过都是最最简单最初级的功能.主要有日历插件,input单选多选(icheck)插件,input下拉搜索(chosen)插件. 一.日历插件 有如下几种 ...

  2. H+后台主题UI框架---整理(一)

    本篇文章是对H+这种框架进行整理,顺便了解一下标准的代码规范的写法. 一.表单: 1).下面是一个基本表单: 现在来看这个表单的结构: 1.整个表单的外框结构是一个div,至于padding和marg ...

  3. H+后台主题UI框架---整理

    本篇文章是对H+这种框架进行整理,顺便了解一下标准的代码规范的写法. 一.表单: 1).下面是一个基本表单: 现在来看这个表单的结构: 1.整个表单的外框结构是一个div,至于padding和marg ...

  4. H+ 后台主题UI框架

    十年河东,十年河西,莫欺少年穷 学无止境,精益求精 今天得到了一个非常完美的后端管理系统框架:H+ 后台主题UI框架 H+ 后台主题UI框架 H+是一个完全响应式,基于Bootstrap3.3.6最新 ...

  5. 游戏UI框架设计(二) : 最简版本设计

    游戏UI框架设计(二) --最简版本设计 为降低难度决定先讲解一个最简版本,阐述UI框架的核心设计理念.这里先定义三个核心功能: 1:UI窗体的自动加载功能. 2:缓存UI窗体. 3:窗体生命周期(状 ...

  6. 中小后台系统UI框架--EasyUI

    后台开发人员不擅长前端UI界面,而小型软件公司没有专职美工岗位,开发人员只能借助开源UI框架,复用已有组件,完成用户操作界面.EasyUI是基于jQuery的UI插件集合体,可帮助开发者轻松构建网页. ...

  7. 基于jquery开发的UI框架整理分析

    根据调查得知,现在市场中的UI框架差不多40个左右,不知大家都习惯性的用哪个框架,现在市场中有几款UI框架稍微的成熟一些,也是大家比较喜欢的一种UI框架,那应该是jQuery,有部分UI框架都是根据j ...

  8. GitHub 上受欢迎的 Android UI Library 整理二

    通知 https://github.com/Tapadoo/Alerter ★2528 - 克服Toast和Snackbar的限制https://github.com/wenmingvs/Notify ...

  9. 前端UI框架整理

    JQuery Jquery官网:http://jquery.com/ jQuery是一个快速,小巧,且功能丰富的JavaScript库. Jquery-1.11.3.min.js 压缩版:http:/ ...

随机推荐

  1. maven依赖排除

    单依赖过滤 同依赖过滤直接处理:可以过滤一个或者多个,如果过滤多个要写多个<exclusion>. <dependency> <groupId>org.apache ...

  2. G.易彰彪的一张表

    易彰彪最近有点奇怪,一向爱打游戏他最近居然盯着一张全是大小写字母的表在看,好像在找什么东西.他说,这是他女神给他的一张表,他需要回答女神的问题——在忽略大小写(即大写字母和小写字母视为同一字母)的情况 ...

  3. (linux)初学者学linux块设备驱动

      面对不断升级的linux内核.GNU开发工具.linux环境下的各种图形库,很多linux应用程序开发人员和linux设备驱动开发人员即兴奋,又烦躁.兴奋的是新的软件软件.工具给我提供了更强大的功 ...

  4. python读取一个英文文件,并记录每个单词出现的次数,降序输出

    对文中出现的句号,逗号和感叹号做了相应的处理 sorted排序函数用法: 按照value值降序排列: sorted(dict.items(),key=lambda k:k[1],reverse=Tru ...

  5. Linux 下WAS的java版本查看

    1.查找linux的详细版本号: A.cat /proc/version B.lsb_release -a(可以查出是否为redhat开发的) C.uname -a 2.Linux的java版本 A. ...

  6. python-day-9- 进程-异步IO\

    本节内容 进程 Gevent协程 Select\Poll\Epoll异步IO与事件驱动 多进程multiprocessing multiprocessing is a package that sup ...

  7. c++实现数值的整数次方(类似pow())作用

    /* * 计算数值的整数次方.cpp * * Created on: 2018年4月13日 * Author: soyo */ #include<iostream> #include< ...

  8. 开发一个最简单的Cardboard虚拟现实应用(四)做一个Cardboard第一人称控制器

    [开源互助-原创文章,转载请说明出处]第三帖中已经创建了一个cardboard自带的demo应用,但它是不能移动的,玩家只能站在原地,通过头部转动来观察四周,除此之外,玩家并没有更多的手段与游戏场景进 ...

  9. Androidstudio中添加jar包的方法

    在Androidstudio中添加一个jar包进去,怎么添加? 以下纯个人使用Androidstudio过程中的经验积累,要是有不足,望提出建议. 方法一: 先点击Androidstudio中的Pro ...

  10. BestCoder Round #74 (div.1) 1002Shortest Path(hdoj5636)

    哈哈哈哈,我就知道这道题目再扔给我,我还是不会,就是这么菜,哈哈哈 一开始官方题解就没搞懂-然后就看了一下别人的代码,水水过就算了.今天拿到-GG: 题意: 一开始,有一张原图,有一条长度为n的链. ...