1. Home
  2. jQuery EasyUI Układ - tworzenie Style XP lewym panelu

Najlepszy samouczek jQuery EasyUI Układ - tworzenie Style XP lewym panelu W 2024 r. W tym samouczku możesz dowiedzieć się Pobierz przykłady jQuery EasyUI,

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.

Pobierz przykłady jQuery EasyUI

jeasyui-layout-xp.zip

Hot Tutorials

Contact US

jQuery EasyUI Układ - tworzenie Style XP lewym panelu
10/30