jQuery EasyUI Layout - créer XP panneau de style gauche
Dans des circonstances normales, le dossier de fichiers Windows XP Explorer, le panneau (panneau) sur le côté gauche contient certaines tâches courantes. Ce tutoriel vous montre comment easyui panel (panel) plug-in pour créer XP gauche panneau.
Définir panneau (panneau)
Nous définissons un certain panneau (panneau), ces panneaux (panneau) pour afficher le nombre de tâches. Chaque panneau (panneau) doit avoir au moins dépliage bouton pliage / outil.
Code de la manière suivante:
<Style Div = "width: 200px; height: auto; background: # 7190E0; padding: 5px;"> <Div class = "easyui panneau" title = "Tâches d'image" pliable style = "true" = "width: 200px; height: auto; padding: 10px;"> Afficher un diaporama <br/> Commander des tirages en ligne <br/> Imprimer les photos </ Div> <br/> <Class = "Div easyui panneau" title = "Tâches de fichier et de dossier" pliable style = "true" = "width: 200px; height: auto; padding: 10px;"> Créez un nouveau dossier <br/> Publier ce dossier à la <br/> Web Partager ce dossier </ Div> <br/> <Div class = "easyui panneau" title = = "true" effondré style = "Autres emplacements" pliable "true" = "width: 200px; height: auto; padding: 10px;"> New York <br/> Mes images <br/> Poste de travail <br/> My Network Places </ Div> <br/> <Div class = "easyui panneau" title = "Détails" style = pliable "true" = "width: 200px; height: auto; padding: 10px;"> Mes documents <br/> Fichier dossier <br/> Date de modification: Oct.3rd 2010 </ Div> </ Div>
panneau personnalisé (panneau) d'apparition
S'il vous plaît noter que ce point de vue apparence est pas ce que nous voulons, nous devons changer le (panel) l'image et l'effondrement en-tête de fond panneau / développez bouton icône.
Il est pas difficile à faire, nous devons faire est de redéfinir certains des CSS.
.Panneau-body {
background: # f0f0f0;
}
.Panneau-tête {
background: url #fff ( 'images / panel_header_bg.gif') no-repeat haut à droite;
}
.Panneau-outil-effondrement {
background: url ( "images / arrow_up.gif ') no-repeat 0px -3px;
}
.Panneau-outil élargir {
background: url ( "images / arrow_down.gif ') no-repeat 0px -3px;
}
Ainsi, l'interface easyui utilisation utilisateur personnalisée est très simple.