layout di jQuery EasyUI - creare un bordo per il layout di pagina
layout di confine (layout di confine) offre cinque regioni: est, ovest, nord, sud, centro. Qui ci sono alcuni usi comuni:
- zona a nord può essere utilizzato per visualizzare sito banner.
- zona a sud può essere utilizzato per visualizzare diritti d'autore e alcune istruzioni.
- zona ad ovest può essere utilizzato per visualizzare il menu di navigazione.
- zona ad est può essere utilizzato per visualizzare alcuni articoli promozionali.
- zona centrale può essere utilizzato per visualizzare il contenuto principale.
Per applicare il layout (layout), è necessario determinare un contenitore di layout (layout), e quindi definire alcune aree. Layout (layout) deve richiedere almeno una regione centrale, il seguente è un layout (layout) Esempio:
<Div class = stile "easyui-layout" = "width: 400px; height: 200px;"> <Regione Div = "ovest" split = "true" title = stile "Navigator" = "width: 150px;"> <P style = "padding: 5px; margin: 0;"> Scegliete la lingua: </ p> <Ul> <Li> <a href="javascript:void(0)" onclick="showcontent('java')"> Java </a> </ li> <Li> <a href="javascript:void(0)" onclick="showcontent('cshape')"> C # </a> </ li> <Li> <a href="javascript:void(0)" onclick="showcontent('vb')"> VB </a> </ li> <Li> <a href="javascript:void(0)" onclick="showcontent('erlang')"> Erlang </a> </ li> </ Ul> </ Div> <Div id = "content" region = "center" title = stile "lingua" = "padding: 5px;"> </ Div> </ Div>
Creiamo un <div> contenitore con un layout di bordo (layout di confine), il layout (layout) del contenitore è tagliato in due parti, la sinistra è il menu di navigazione a destra è il contenuto principale.
Infine, scriviamo un gestore di eventi onclick per recuperare i dati, la funzione 'showcontent' è molto semplice:
Funzione showcontent (lingua) { . $ ( '# Content') html ( 'Introduzione' + lingua + 'linguaggio'); }