finestra jQuery EasyUI - il layout della finestra
componente layout può essere incorporato nella finestra (finestra) in. Siamo in grado di creare una finestra di layout complesso, non hanno nemmeno bisogno di scrivere alcun codice js. framework jQuery-easyui per aiutarci a fare il rendering in background e regolare le dimensioni.
Come esempio, si crea una finestra (finestra), che consiste di due parti, una a fianco di un posto a destra. Nella finestra di sinistra (finestra) creiamo un menù ad albero (albero), nella finestra di destra (finestra) Creiamo un contenitore schede.
<Div class = titolo "easyui-finestra" = = icona di stile "icon-help" "Finestra Layout" = "width: 500px; height: 250px; padding: 5px; sfondo: #fafafa;"> <Div class = "easyui-layout di" fit = "true"> <Regione Div = "ovest" split = "true" style = "width: 120px;"> <Ul class = "easyui-albero"> <LI> <Span> Libreria </ span> <Ul> <Li> <span> easyui </ span> </ li> <Li> <span> Musica </ span> </ li> <Li> <span> foto </ span> </ li> <Li> <span> database </ span> </ li> </ Ul> </ Li> </ Ul> </ Div> <Regione Div = "center" border = border "false" = "false"> <Div class = "easyui-tabs" fit = "true"> <Div title = "Home" style = "padding: 10px;"> jQuery easyui quadro aiuterà a costruire la tua pagina web facilmente. </ Div> <div title = "Contatti"> Nessun dati di contatto. </ Div> </ Div> </ Div> <Regione Div = "sud" border = "false" style = "text-align: right; height: 30px; line-height: 30px;"> <a class="easyui-linkbutton" icon="icon-ok" href="javascript:void(0)"> Ok </a> <a class="easyui-linkbutton" icon="icon-cancel" href="javascript:void(0)"> Annulla </a> </ Div> </ Div> </ Div>
Guardare il codice di cui sopra, usiamo solo i tag HTML, verrà visualizzata una finestra di layout complesso (finestra). Questo è il quadro jquery-easyui, semplice e potente.