保存到桌面加入收藏设为首页
EasyUI
当前位置:首页 > Web技术 > EasyUI

easyui创建XP的左侧面板风格

时间:2013-07-26 01:58:26   作者:梦幻小纯哥   来源:永硕E盘装饰网   阅读:840   评论:0
内容摘要:st1\:*{behavior:url(#ieooui)}CreateXPstyleleftpaneleasyui创建XP的左侧面板风格Normally,ExplorerfoldersinWindowsXPhasleftpanelth...


Create XP style left panel

easyui创建XP的左侧面板风格

 

Normally, Explorer folders in Windows XP has left panel that contains common tasks. This tutorial show you how to create the XP left panel with panel plugin of easyui.

通常, Windows XP中,资源文件夹的左侧有个面板, 包含常见的任务。本教程向e展示使用easyui插件如何创建XP左侧面板。

 

 

效果如下:

easyui创建XP的左侧面板风格

 

Define several panels

定义多个面板

 

We defines several panels to show some tasks, each panel should has only collapse/expand tool button.

我们定义了几个面板来显示一些任务, 每个面板应该有可折叠的工具按钮。用于打开和折叠下面的div

 

The code looks just like this:

代码看起来就像这样:

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

 

 

Custom appearance effect of panel

自定义面板的外观样式

 

Notice that the view appearance effect is not what we want, we must change the header background image of panel and the collapse/expand button icon.

注意,面板的外观效果不是我们想要的, 我们必须改变面板的标题背景图像的和折叠按钮的图标。

 

It's not difficult to do this, What we should do is to redefine some CSS.

做到这一点并不是很难, 我们应该做的是重新定义一些CSS样式。

<style>

 

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

}

 

</style>

 


panel_header_bg.gif

easyui创建XP的左侧面板风格

arrow_up.gif

easyui创建XP的左侧面板风格 

arrow_down.gif

easyui创建XP的左侧面板风格


As you can see, it's very easy while using easyui to define user-interface.

正如您可以看到的, 它很容易在使用easyui定义用户界面。



标签:创建  左侧  侧面  面板  风格  
上一篇:没有了
下一篇:easyui给datagrid添加分页pagination
相关文章
相关评论