jQuery EasyUI Layout - criar deixado estilo do painel XP
Em circunstâncias normais, a pasta de arquivos do Windows XP Explorer, painel (painel) o no lado esquerdo contém algumas tarefas comuns. Este tutorial mostra como easyui painel de plugin (painel) para criar XP esquerda do painel.
Definir o painel (painel)
Nós definimos alguns painel (painel), estes painéis (painel) para exibir o número de tarefas. Cada painel (painel) deve ter botão de ferramenta, pelo menos, dobrar / desdobrar.
Código da seguinte forma:
<Div style = "width: 200px; height: auto; background: # 7190E0; padding: 5px;"> <Div class = "do painel easyui" title = "Tarefas de imagem" dobrável = "true" style = "width: 200px; height: auto; padding: 10px;"> Vista como uma apresentação de slides <br/> Encomendar impressões <br/> on-line Imprimir imagens </ Div> <br/> <Div class = "do painel easyui" title = "arquivo e pasta Tarefas" dobrável = "true" style = "width: 200px; height: auto; padding: 10px;"> Faça uma nova pasta <br/> Publicar esta pasta para o <br/> Web Partilhar esta pasta </ Div> <br/> <Div class = "do painel easyui" title = "Outros lugares" dobrável = "true" entrou em colapso = "true" style = "width: 200px; height: auto; padding: 10px;"> Nova Iorque <br/> My Pictures <br/> Meu <br/> Computer Meus locais de rede </ Div> <br/> <Div class = "do painel easyui" title = "Detalhes" dobrável = "true" style = "width: 200px; height: auto; padding: 10px;"> Meus documentos <br/> Arquivo pasta <br/> Data de modificação: Oct.3rd 2010 </ Div> </ Div>
painel personalizado (painel) da aparência
Por favor note que essa aparência visão não é o que queremos, temos de mudar a imagem do painel (painel) do fundo de cabeçalho e recolher / expandir o ícone da tecla.
Não é difícil de fazer, o que precisamos fazer é redefinir algumas das CSS.
.panel-body {
background: # f0f0f0;
}
.panel-header {
background: url #fff ( 'images / panel_header_bg.gif') no-repeat canto superior direito;
}
.panel-ferramenta de colapso {
background: url ( 'images / arrow_up.gif') no-repeat 0px -3px;
}
-.panel-Ferramenta expandir {
background: url ( 'images / arrow_down.gif') no-repeat 0px -3px;
}
Assim, a interface de usuário personalizada easyui uso é muito simples.