1. Casa
  2. jQuery EasyUI Layout - creare XP pannello stile sinistra

Il miglior tutorial jQuery EasyUI Layout - creare XP pannello stile sinistra Nel 2024, in questo tutorial puoi imparare Scarica esempi jQuery EasyUI,

jQuery EasyUI Layout - creare XP pannello stile sinistra

In circostanze normali, la cartella dei file di Windows XP Explorer, il pannello (pannello) sul lato sinistro contiene alcune operazioni comuni. Questo tutorial vi mostra come easyui pannello (pannello) plugin per creare XP a sinistra del pannello.

Definire pannello (pannello)

Definiamo qualche pannello (pannello), questi pannelli (pannello) per visualizzare il numero di attività. Ogni pannello (pannello) dovrebbe avere pulsante dello strumento almeno pieghevole / svolgimento.

Codice come segue: 

	<Div style = "width: 200px; height: auto; background: # 7190E0; padding: 5px;">
		<Div class = "easyui-panel" title = "Picture Tasks" pieghevole = "true" style = "width: 200px; height: auto; padding: 10px;">
			Visualizza come presentazione <br/>
			Ordina stampe <br/> on-line
			stampare le immagini
		</ Div>
		<br/>
		<Div class = "easyui-panel" title = "Operazioni file e cartella" pieghevole = "true" style = "width: 200px; height: auto; padding: 10px;">
			Creare una nuova cartella di <br/>
			Pubblicare questa cartella per il Web <br/>
			Condividi questa cartella
		</ Div>
		<br/>
		<Div class = titolo "easyui-pannello" = "Altri siti" pieghevole = "true" collassato = "true" style = "width: 200px; height: auto; padding: 10px;">
			New York <br/>
			My Pictures <br/>
			Risorse del computer <br/>
			Risorse di rete
		</ Div>
		<br/>
		<Div class = titolo "easyui-pannello" = "Dettagli" pieghevole = "true" style = "width: 200px; height: auto; padding: 10px;">
			I miei documenti <br/>
			File delle cartelle <br/>
			Data di modifica: Oct.3rd 2010
		</ Div>
	</ Div>

pannello personalizzato (panel) di apparizione

Si prega di notare che questo aspetto vista non è quello che vogliamo, dobbiamo cambiare l'immagine di intestazione sfondo del pannello (pannello) e collasso / espandere icona del pulsante.

Non è difficile da fare, abbiamo bisogno di fare è quello di ridefinire alcuni dei CSS. 

	.panel-body {
		background: # f0f0f0;
	}
	.panel-header {
		sfondo: url #fff ( 'images / panel_header_bg.gif') no-repeat in alto a destra;
	}
	.panel-tool-crollo {
		fondo: url ( 'images / arrow_up.gif') no-repeat 0px -3px;
	}
	.panel-tool-espandere {
		fondo: url ( 'images / arrow_down.gif') no-repeat 0px -3px;
	}

Così, l'interfaccia utente personalizzata easyui utilizzo è molto semplice.

Scarica esempi jQuery EasyUI

jeasyui-layout-xp.zip

Tutorial caldi

Contattaci

jQuery EasyUI Layout - creare XP pannello stile sinistra
10/30