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

 

上面用是bootstrap做成的一个经典网站一部分,看右半部分.

先分析布局,是这样的:一个大的div,分上下两部分.以一条灰色线区隔开来.

上面是说明性文字,和右侧的特殊按钮,如伸缩,刷新,和移除按钮等.

下面则是真正的内容部分.

 

把网站的html代码copy过来,样式直接OK,就是点击按钮交互这点有问题.但是找不到相关的js代码在哪儿...

只好,把按钮自定义id和class,然后自己写一个交互式的js函数啦.

实现目标:点击向下的伸缩按钮,下面内容部分隐藏,按钮变成向上的;反之,则显示,按钮向下.

 

实现代码:

html:

<div class="upload_div">
            <div class="portlet light ">
                <div class="portlet-title">
                    <div class="caption">
                        <img src="../../Source/BootStrap/images/qa.png" alt=""
                            style="width: 16px; height: 16px; margin-top: -3px;">
                        <span class="caption-subject font-dark bold uppercase">快速上传评分表</span>
                        <!--<span class="caption-helper">monthly stats...</span>-->
                    </div>
                    <div class="tools">
                        <!--伸缩图标-->
                        <a href="#" class="myself_collapse" data-original-title="" title=""></a>
                        <!--<a href="#portlet-config" data-toggle="modal" class="config" data-original-title="" title=""></a>
                        <a href="" class="reload" data-original-title="" title=""></a>
                        <a href="" class="remove" data-original-title="" title=""></a>-->
                    </div>
                </div>
                <div class="portlet-body" style="display: block;">
                    <form role="form" class="form-horizontal" id="importFile" method="post" accept-charset="utf-8"
                        enctype="multipart/form-data">
                        <div class="form-group">
                            <div class="col-md-9">
                                <div>
                                    <input id="fileInput" name="fileInput" type="file" multiple="multiple" />
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

当然,上述的图片等没有的,你需要换成你自己的哦!

 

js代码:

$(".myself_collapse").on("click", function () {
            if ($(this).hasClass("myself_collapse")) {
                $(this).removeClass("myself_collapse");
                $(this).addClass("myself_expand");
                // $(".upload_div .portlet-body").hide();
                $(".upload_div .portlet-body").fadeToggle(500);
            } else {
                $(this).removeClass("myself_expand");
                $(this).addClass("myself_collapse");
                $(".upload_div .portlet-body").fadeToggle(500);
            }
        });

顺带还添加了jQuery的淡入淡出效果,好看棒棒哒!

 

其中用到的CSS:

/*我自己适用的伸缩类,js也自己改写
根据components.css改编.*/
.portlet > .portlet-title > .tools > a.myself_collapse {
    background-image: url(../../../Images/sitescore/new/portlet-collapse-icon.png);
    width: 14px;
    visibility: visible;
}

.portlet > .portlet-title > .tools > a.myself_expand {
    background-image: url(../../../Images/sitescore/new/portlet-expand-icon.png);
    width: 14px;
    visibility: visible;
}

老样子,所有你缺少的图片都需要用你自己的,我的不适合你!

 

OK,到这一步就实现了bootstrap的portlet组件框框的应用.