jQuery EasyUI Layout - creare XP pannello stile sinistra
In circostanze normali, la cartella dei file di Windows XP Explorer, il pannello (pannello) sul lato sinistro contiene alcune operazioni comuni. Questo tutorial vi mostra come easyui pannello (pannello) plugin per creare XP a sinistra del pannello.
Definire pannello (pannello)
Definiamo qualche pannello (pannello), questi pannelli (pannello) per visualizzare il numero di attività. Ogni pannello (pannello) dovrebbe avere pulsante dello strumento almeno pieghevole / svolgimento.
Codice come segue:
<Div style = "width: 200px; height: auto; background: # 7190E0; padding: 5px;"> <Div class = "easyui-panel" title = "Picture Tasks" pieghevole = "true" style = "width: 200px; height: auto; padding: 10px;"> Visualizza come presentazione <br/> Ordina stampe <br/> on-line stampare le immagini </ Div> <br/> <Div class = "easyui-panel" title = "Operazioni file e cartella" pieghevole = "true" style = "width: 200px; height: auto; padding: 10px;"> Creare una nuova cartella di <br/> Pubblicare questa cartella per il Web <br/> Condividi questa cartella </ Div> <br/> <Div class = titolo "easyui-pannello" = "Altri siti" pieghevole = "true" collassato = "true" style = "width: 200px; height: auto; padding: 10px;"> New York <br/> My Pictures <br/> Risorse del computer <br/> Risorse di rete </ Div> <br/> <Div class = titolo "easyui-pannello" = "Dettagli" pieghevole = "true" style = "width: 200px; height: auto; padding: 10px;"> I miei documenti <br/> File delle cartelle <br/> Data di modifica: Oct.3rd 2010 </ Div> </ Div>
pannello personalizzato (panel) di apparizione
Si prega di notare che questo aspetto vista non è quello che vogliamo, dobbiamo cambiare l'immagine di intestazione sfondo del pannello (pannello) e collasso / espandere icona del pulsante.
Non è difficile da fare, abbiamo bisogno di fare è quello di ridefinire alcuni dei CSS.
.panel-body {
background: # f0f0f0;
}
.panel-header {
sfondo: url #fff ( 'images / panel_header_bg.gif') no-repeat in alto a destra;
}
.panel-tool-crollo {
fondo: url ( 'images / arrow_up.gif') no-repeat 0px -3px;
}
.panel-tool-espandere {
fondo: url ( 'images / arrow_down.gif') no-repeat 0px -3px;
}
Così, l'interfaccia utente personalizzata easyui utilizzo è molto semplice.