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，讓他刷新后默認顯示，圖標就會正常顯示。具體的解決方案見后續。