EasyUI 布局 – 创建 Windows XP 风格左侧面板

🌙
手机阅读
本文目录结构
axihe

EasyUI 布局 - 创建 XP 风格左侧面板

通常情况下,在 Windows XP 的资源管理器文件夹中,左侧的面板(panel)包含一些常见任务。 本教程向您展示如何通过 easyui 的面板(panel)插件来创建 XP 左侧面板。

定义一些面板(panel)

我们定义一些面板(panel),这些面板(panel)用来显示一些任务。每个面板(panel)应该至少有折叠/展开工具按钮。

代码如下所示:

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

自定义面板(panel)的外观效果

请注意,这个视图外观效果不是我们想要的,我们必须改变面板(panel)的头部背景图片和折叠/展开按钮的图标。

做到这一点并不难,我们需要做的只是重新定义一些 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;
}

由此可见,使用 easyui 定义用户界面非常简单。


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang