jQuery EasyUI Układ - tworzenie Style XP lewym panelu
W normalnych okolicznościach, folder plików Windows XP Explorer, panel (panel) po lewej stronie zawiera kilka wspólnych zadań. Ten poradnik pokazuje, jak easyui panelu wtyczki (panel), aby utworzyć XP lewym panelu.
Definiowanie panel (panel)
Definiujemy jakiś panel (panel), te panele (panel), aby wyświetlić liczbę zadań. Każdy panel (panel) powinien mieć przynajmniej przycisk składany / rozkładanie narzędzia.
Kod w następujący sposób:
<Div style = "width: 200px; height: auto; background: # 7190E0; padding: 5px;"> <Class = "easyui panelu" title = "Zadania obrazów" div składane = "true" style = "width: 200px; height: auto; padding: 10px;"> Wyświetl jako pokaz slajdów <br/> Zamawianie odbitek <br/> Internecie Drukowanie zdjęć </ Div> <br/> <Div class = "easyui panelu" title = "Zadania plików i folderów" składane = "true" style = "width: 200px; height: auto; padding: 10px;"> Utwórz nowy folder <br/> Opublikuj ten folder do <br/> WWW Udostępnij ten folder </ Div> <br/> <Div class = "easyui panelu" title = "Inna" składane = "true" zawalił = "true" style = "width: 200px; height: auto; padding: 10px;"> Nowy Jork <br/> My Pictures <br/> Mój komputer <br/> Moje miejsca sieciowe </ Div> <br/> <Div class = "easyui panelu" title = "Szczegóły" składane = "true" style = "width: 200px; height: auto; padding: 10px;"> Moje dokumenty <br/> File Folder <br/> Data modyfikacji: Oct.3rd 2010 </ Div> </ Div>
Panel Użytkownika (panel) wyglądu
Proszę zauważyć, że pogląd ten wygląd jest nie to, co chcemy, musimy zmienić panel (panel) nagłówek obraz tła i upadek / rozwinąć przycisk ikony.
To nie jest trudne do zrobienia, musimy zrobić to ponownie zdefiniować niektóre z CSS.
.panel-body {
background: # f0f0f0;
}
.panel-header {
background: url #fff ( 'images / panel_header_bg.gif ") no-repeat w prawym górnym rogu;
}
.panel-tool-collapse {
background: url ( 'images / arrow_up.gif ") no-repeat 0px -3px;
}
.panel-tool-poszerzyć {
background: url ( 'images / arrow_down.gif ") no-repeat 0px -3px;
}
Zatem easyui niestandardowy interfejs użytkownika użycie jest bardzo proste.