首页 > 其他 > 详细

angular的splitter案例学习

时间:2017-04-05 00:03:52      阅读:241      评论:0      收藏:0      [点我收藏+]

 angular的splitter案例学习,都有注释了,作为自己的备忘。

运行下面代码

技术分享

    
    Angular pane splitter example
   
  
    
        Pane 1
        
            
                Pane 2
                Pane 3


.split-panes 
{
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
position: absolute;
}


.split-panes > .split-handler 
{
background: transparent;
position: absolute;
z-index: 999;
}


/* Horizontal */


.split-panes.horizontal > .split-handler
{
width: 4px;
top: 0px; 
left: 50%;
bottom: 0px;
cursor: ew-resize;
}


.split-panes.horizontal > .split-pane1,
.split-panes.horizontal > .split-pane2
{
position: absolute;
height: 100%;
}


.split-panes.horizontal > .split-pane1
{
width: 50%; 
}


.split-panes.horizontal > .split-pane2
{
left: 50%;
right: 0px;
border-left: 1px solid #aaa;
}



/* Vertical */


.split-panes.vertical > .split-handler
{
height: 4px;
top: 50%; 
left: 0px;
right: 0px;
cursor: ns-resize;
}


.split-panes.vertical > .split-pane1,
.split-panes.vertical > .split-pane2
{
position: absolute;
width: 100%;
}


.split-panes.vertical > .split-pane1
{
height: 50%; 
}


.split-panes.vertical > .split-pane2
{
top: 50%;
bottom: 0px;
border-top: 1px solid #aaa;
}


</style>
</html>

技术分享

 


angular的splitter案例学习

原文:http://zhangtaoze.blog.51cto.com/12776936/1912855

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!