HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Under normal circumstances, the Windows XP Explorer file folder, the panel (panel) on the left side contains some common tasks. This tutorial shows you how to easyui panel (panel) plugin to create XP left panel.
We define some panel (panel), these panels (panel) to display the number of tasks. Each panel (panel) should have at least folding / unfolding tool button.
Code as follows:
<Div style = "width: 200px; height: auto; background: # 7190E0; padding: 5px;"> <Div class = "easyui-panel" title = "Picture Tasks" collapsible = "true" style = "width: 200px; height: auto; padding: 10px;"> View as a slide show <br/> Order prints online <br/> Print pictures </ Div> <br/> <Div class = "easyui-panel" title = "File and Folder Tasks" collapsible = "true" style = "width: 200px; height: auto; padding: 10px;"> Make a new folder <br/> Publish this folder to the Web <br/> Share this folder </ Div> <br/> <Div class = "easyui-panel" title = "Other Places" collapsible = "true" collapsed = "true" style = "width: 200px; height: auto; padding: 10px;"> New York <br/> My Pictures <br/> My Computer <br/> My Network Places </ Div> <br/> <Div class = "easyui-panel" title = "Details" collapsible = "true" style = "width: 200px; height: auto; padding: 10px;"> My documents <br/> File folder <br/> <br/> Date modified: Oct.3rd 2010 </ Div> </ Div>
Please note that this view appearance is not what we want, we must change the panel (panel) header background image and collapse / expand button icon.
It is not difficult to do, we need to do is to redefine some of the CSS.
.panel-body { background: # f0f0f0; } .panel-header { background: #fff url ( 'images / panel_header_bg.gif') no-repeat top right; } .panel-tool-collapse { background: url ( 'images / arrow_up.gif') no-repeat 0px -3px; } .panel-tool-expand { background: url ( 'images / arrow_down.gif') no-repeat 0px -3px; }
Thus, the use easyui custom user interface is very simple.