jQuery EasyUI Layout - eine Grenze für das Seitenlayout erstellen
Border-Layout (Grenz Layout) bietet fünf Regionen: Osten, Westen, Norden, Süden, Zentrum. Hier sind einige gemeinsame Nutzungen:
- Nordbereich können Banner anzuzeigen Standort verwendet werden.
- Südbereich kann verwendet werden, das Urheberrecht und einige Anweisungen anzuzeigen.
- West-Bereich kann verwendet werden, um das Navigationsmenü aufzurufen.
- Ost-Bereich können einige Werbeartikel zum Anzeigen verwendet werden.
- Mittelbereich kann verwendet werden, um den Inhalt anzuzeigen.
Um das Layout (Layout) anwenden, sollten Sie ein Layout (Layout) Behälter, bestimmen und dann einige Bereiche zu definieren. Layout (Layout) mindestens einen Mittelbereich erfordern, wird die folgende ist ein Layout (Layout) Beispiel:
<Div class = "easyui-Layout" style = "width: 400px; height: 200px;"> <Div region = "westlich" split = "true" title = "Navigator" style = "width: 150px;"> <P style = "padding: 5px; margin: 0;"> Sprache auswählen: </ 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 = "Sprache" style = "padding: 5px;"> </ Div> </ Div>
Wir schaffen ein <div> Container mit einem Rand-Layout (Borderlayout), Layout (Layout) des Behälters in zwei Teile geschnitten wird, ist die linke das Navigationsmenü auf der rechten Seite ist der Hauptinhalt.
Schließlich schreiben wir ein Onclick-Ereignishandler die Daten abzurufen, 'showcontent' Funktion ist sehr einfach:
Funktion showcontent (Sprache) { . $ ( '# Inhalt') html ( "Einführung in die" + Sprache + 'Sprache'); }