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

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

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

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

 

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

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

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

 

实现代码:

html:

1 
     
       2             
      
        3                 
       
         4                     
        
          5                         
          7                         
         快速上传评分表 8                         
          9                     
        
10                     
        
         11                         
         12                         
         13                         
         16                     
        
17                 
       
18                 
       
        19                     
        
         21                         
         
          22                             
          
           23 
           
            24 
            25 
           
26 
          
27                         
         
28                     
        
29                 
       
30             
      
31         
     

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

 

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