jQuery EasyUI Layout - erstellen Panel XP-Stil links
Unter normalen Umständen enthält die Windows XP-Explorer Datei-Ordner, die Platte (Platte) auf der linken Seite einige gemeinsame Aufgaben. Dieses Tutorial zeigt Ihnen, wie Panel (Panel) Plugin easyui XP-Panel links zu erstellen.
Definieren Sie Panel (Panel)
Wir definieren einige Panel (Panel), diese Platten (Panel) die Anzahl der Aufgaben anzuzeigen. Jedes Panel (Panel) sollte mindestens Falten / Entfalten Werkzeugtaste haben.
-Code wie folgt:
<Div style = "width: 200px; height: auto; background: # 7190E0; padding: 5px;"> <Div class = "easyui-Panel" title = "Bildaufgaben" zusammenklappbar = "true" style = "width: 200px; height: auto; padding: 10px;"> Ansicht als Dia-Show <br/> Abzüge online bestellen <br/> drucken Sie die Bilder </ Div> <br/> <Div class = "easyui-Panel" title = "Datei- und Ordneraufgaben" zusammenklappbar = "true" style = "width: 200px; height: auto; padding: 10px;"> Machen Sie einen neuen Ordner <br/> Veröffentlichen Sie diesen Ordner im Web <br/> Diesen Ordner </ Div> <br/> <Div class = "easyui-Panel" title = "Andere Orte" zusammenklappbar = "true" kollabiert = "true" style = "width: 200px; height: auto; padding: 10px;"> New York <br/> Eigene Bilder <br/> Arbeitsplatz <br/> Netzwerkumgebung </ Div> <br/> <Div class = "easyui-Panel" title = "Details" zusammenklappbar = "true" style = "width: 200px; height: auto; padding: 10px;"> Meine Dokumente <br/> Dateiordner <br/> Letzte Änderung: Oct.3rd 2010 </ Div> </ Div>
Benutzerdefinierte Panel (Panel) des Scheins
Bitte beachten Sie, dass diese Ansicht Aussehen ist nicht das, was wir wollen, wir das Panel (Panel) Header Hintergrundbild und Zusammenbruch ändern müssen Taste / Symbol erweitern.
Es ist nicht schwer zu tun, müssen wir zu tun ist, einige der CSS neu zu definieren.
.panel-body {
background: # f0f0f0;
}
.panel-header {
Hintergrund: #fff url ( 'images / panel_header_bg.gif') no-repeat oben rechts;
}
.panel-tool-Zusammenbruch {
background: url ( 'images / arrow_up.gif') no-repeat 0px -3px;
}
.panel-Werkzeug erweitern {
background: url ( 'images / arrow_down.gif') no-repeat 0px -3px;
}
Somit ist die Verwendung easyui angepasste Benutzeroberfläche sehr einfach.