上面用是bootstrap做成的一個經典網站一部分,看右半部分.
先分析布局,是這樣的:一個大的div,分上下兩部分.以一條灰色線區隔開來.
上面是說明性文字,和右側的特殊按鈕,如伸縮,刷新,和移除按鈕等.
下面則是真正的內容部分.
把網站的html代碼copy過來,樣式直接OK,就是點擊按鈕交互這點有問題.但是找不到相關的js代碼在哪兒...
只好,把按鈕自定義id和class,然后自己寫一個交互式的js函數啦.
實現目標:點擊向下的伸縮按鈕,下面內容部分隱藏,按鈕變成向上的;反之,則顯示,按鈕向下.
實現代碼:
html:
1 <div class="upload_div"> 2 <div class="portlet light "> 3 <div class="portlet-title"> 4 <div class="caption"> 5 <img src="../../Source/BootStrap/images/qa.png" alt="" 6 style="width: 16px; height: 16px; margin-top: -3px;"> 7 <span class="caption-subject font-dark bold uppercase">快速上傳評分表</span> 8 <!--<span class="caption-helper">monthly stats...</span>--> 9 </div> 10 <div class="tools"> 11 <!--伸縮圖標--> 12 <a href="#" class="myself_collapse" data-original-title="" title=""></a> 13 <!--<a href="#portlet-config" data-toggle="modal" class="config" data-original-title="" title=""></a> 14 <a href="" class="reload" data-original-title="" title=""></a> 15 <a href="" class="remove" data-original-title="" title=""></a>--> 16 </div> 17 </div> 18 <div class="portlet-body" style="display: block;"> 19 <form role="form" class="form-horizontal" id="importFile" method="post" accept-charset="utf-8" 20 enctype="multipart/form-data"> 21 <div class="form-group"> 22 <div class="col-md-9"> 23 <div> 24 <input id="fileInput" name="fileInput" type="file" multiple="multiple" /> 25 </div> 26 </div> 27 </div> 28 </form> 29 </div> 30 </div> 31 </div>
當然,上述的圖片等沒有的,你需要換成你自己的哦!
js代碼:
1 $(".myself_collapse").on("click", function () { 2 if ($(this).hasClass("myself_collapse")) { 3 $(this).removeClass("myself_collapse"); 4 $(this).addClass("myself_expand"); 5 // $(".upload_div .portlet-body").hide(); 6 $(".upload_div .portlet-body").fadeToggle(500); 7 } else { 8 $(this).removeClass("myself_expand"); 9 $(this).addClass("myself_collapse"); 10 $(".upload_div .portlet-body").fadeToggle(500); 11 } 12 });
順帶還添加了jQuery的淡入淡出效果,好看棒棒噠!
其中用到的CSS:
1 /*我自己適用的伸縮類,js也自己改寫 2 根據components.css改編.*/ 3 .portlet > .portlet-title > .tools > a.myself_collapse { 4 background-image: url(../../../Images/sitescore/new/portlet-collapse-icon.png); 5 width: 14px; 6 visibility: visible; 7 } 8 9 .portlet > .portlet-title > .tools > a.myself_expand { 10 background-image: url(../../../Images/sitescore/new/portlet-expand-icon.png); 11 width: 14px; 12 visibility: visible; 13 }
老樣子,所有你缺少的圖片都需要用你自己的,我的不適合你!
OK,到這一步就實現了bootstrap的portlet組件框框的應用.