angular的splitter案例學(xué)習(xí)

　angular的splitter案例學(xué)習(xí),都有注釋了,作為自己的備忘。

運(yùn)行下面代碼

    
    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>