bootstrap的portlet组件框框的应用 (点击可伸缩)

上面用是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组件框框的应用.

bootstrap的portlet组件框框的应用 (点击可伸缩)

猜你喜欢