jQuery EasyUI使用教程之创建XP风格的左侧面板

最新推荐文章于 2019-08-23 15:20:00 发布

界面开发小八哥

最新推荐文章于 2019-08-23 15:20:00 发布

阅读量847

点赞数

本文介绍如何使用EasyUI插件创建类似Windows XP资源管理器的左侧面板，并提供了定义多个可折叠面板的示例代码及自定义外观的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通常情况下，在Windows XP的资源管理器文件夹中，左侧的面板包含了一些常见的任务。本教程教你如何通过easyui的面板插件来创建XP风格的左侧面板。

查看演示

定义多个面板

我们定义了多个面板来显示一些任务，每个面板至少应该有折叠/展开工具按钮。该代码如下：

 
   
        <
        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
        >
       
 
 

自定义面板的外观效果

请注意，如果这个视图的外观效果不是我们想要的，那么我们必须更改面板头部背景图片和折叠/展开按钮的图标。做到这一点并不是很难，我们应该重新定义一些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;
       
        }