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">&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,让他刷新后默认显示,图标就会正常显示。具体的解决方案见后续。

时间: 2024-10-11 22:18:55

H+后台主题UI框架---整理(二)的相关文章

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

这里面介绍下H+后台主题UI框架里面插件的应用,不过都是最最简单最初级的功能.主要有日历插件,input单选多选(icheck)插件,input下拉搜索(chosen)插件. 一.日历插件 有如下几种应用的形式: (一) 1.首先,需要引入laydate.js,而且,只需要引入js即可. 2.在script里面粘贴如下代码: [外部js调用]<input id="hello" class="laydate-icon"> //是在html里面的内容,也就是

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

后台开发人员不擅长前端UI界面,而小型软件公司没有专职美工岗位,开发人员只能借助开源UI框架,复用已有组件,完成用户操作界面.EasyUI是基于jQuery的UI插件集合体,可帮助开发者轻松构建网页. 官方地址:http://www.jeasyui.com/ 一.引用EasyUI 官网下载EasyUI组件jquery-easyui-1.*.*.zip,项目工程导入locale文件夹.themes文件夹.jquery.easyui.min.js.jquery.min.js文件. 二.以系统用户首页

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

根据调查得知,现在市场中的UI框架差不多40个左右,不知大家都习惯性的用哪个框架,现在市场中有几款UI框架稍微的成熟一些,也是大家比较喜欢的一种UI框架,那应该是jQuery,有部分UI框架都是根据jQuery研发出来的产品,现在也很常见了. 国产jQuery UI框架 (jUI) DWZ DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.设计目标是简单实用,快速开发,降低ajax开发成本. jQuery 部件布局

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

最简版本设计 --最简版本设计 为降低难度决定先讲解一个最简版本,阐述UI框架的核心设计理念.这里先定义三个核心功能: 1:UI窗体的自动加载功能. 2:缓存UI窗体. 3:窗体生命周期(状态)管理. UI框架设计主要目的,就是尽可能的完成一些与具体游戏功能逻辑无关的一些底层事务性的功能实现.这些功能最好是自动或者是半自动的实现,无须客户程序(调用框架的程序)过多处理与关心. 对于以上功能,笔者定义了UI框架的相关四个核心类: BaseUIForms    基础UI窗体脚本(父类,其他窗体都继承

前端UI框架整理

JQuery Jquery官网:http://jquery.com/ jQuery是一个快速,小巧,且功能丰富的JavaScript库. Jquery-1.11.3.min.js 压缩版:http://code.jquery.com/jquery-1.11.3.min.js Jquery-1.11.3.js    未压缩版:http://code.jquery.com/jquery-1.11.3.js Layer layer是一款近年来口碑极佳的web弹层组件. layer弹出层组件官网: ht

前端UI框架简单对比和选型建议

Bootstrap3.3.4的后台主题UI框架H+ v3.0 http://www.zi-han.net/developer/1031.html   (组件多而全,但收费) 拼图响应式前端框架 http://demo.pintuer.com/pintuer3/ (响应式,组件多而全) Semantic UI 和 amazeui http://www.semantic-ui.cn/ http://amazeui.org/ (响应式,跨浏览器,组件多而全,活跃性一般) x5应用快速开发 框架 htt

《开源框架那些事儿22》:UI框架设计实战

UI是User Interface的缩写,通常被认为是MVC中View的部分,作用是提供跟人机交互的可视化操作界面.MVC中Model提供内容给UI进行渲染,用户通过UI框架产生响应,一般而言会由控制层调用业务逻辑进行处理,并把处理结果以Model方式返回View,再次渲染.UI框架的大致过程就是如此,按实现方式可以分为RIA和瘦客户端方式,目前基于B/S的瘦客户端方式比较流行.UI框架套路上很简单,但是想要做好可就不容易了.目前基于MVC的框架灿若繁星,不客气的说是个软件公司就有自己的技术框架

ASP.NET MVC搭建项目后台UI框架—5、Demo演示Controller和View的交互

目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET MVC搭建项目后台UI框架—4.tab多页签支持 ASP.NET MVC搭建项目后台UI框架—5.演示Controller和View的交互 这一节,我将用一个Demo来演示在此UI框架中,控制器和视图的交互.以渠道管理为例.效果图如下: 这里我使用了基于jquery的模态窗体组件lhgdialo

ASP.NET MVC搭建项目后台UI框架—7、统计报表

ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET MVC搭建项目后台UI框架—4.tab多页签支持 ASP.NET MVC搭建项目后台UI框架—5.Demo演示Controller和View的交互 ASP.NET MVC搭建项目后台UI框架—6.客户管理(添加.修改.查询.分页) ASP.NET MVC搭建项目后台UI框架—7.统计报表 本节,我将通