`
hbczlp
  • 浏览: 26424 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

easyui layout折叠后显示标题 的增强

阅读更多
layout折叠后显示标题 请参照夏悸老大的博客

但本人在使用过程中遇到了一个问题,如果layout中的region设置了collapsible:true,即初始化时面板是折叠的,则无法正常显示title,为此在原作者的方案基础上进行了补强。

源码中的_39d(dir)改为_39d(dir,_title),传入title,
源码中4901 - 4903行
var _39c="expand"+_398.substring(0,1).toUpperCase()+_398.substring(1);
if(!_39a[_39c]){
_39a[_39c]=_39d(_398);

改为
var _39c="expand"+_398.substring(0,1).toUpperCase()+_398.substring(1);
var _title =  _39b.title?_39b.title:" "
if(!_39a[_39c]){
_39a[_39c]=_39d(_398,_title);


源码中的4931 - 4951行
function _39d(dir){
var icon;
if(dir=="east"){
icon="layout-button-left";
}else{
if(dir=="west"){
icon="layout-button-right";
}else{
if(dir=="north"){
icon="layout-button-down";
}else{
if(dir=="south"){
icon="layout-button-up";
}
}
}
}
var p=$("<div></div>").appendTo(_397);
p.panel($.extend({},$.fn.layout.paneldefaults,{cls:("layout-expand layout-expand-"+dir),title:"&nbsp;",closed:true,minWidth:0,minHeight:0,doSize:false,tools:[{iconCls:icon,handler:function(){
_3a6(_397,_398);
return false;

改为
function _39d(dir,_title){
var icon;
if(dir=="east"){
icon="layout-button-left";
}else{
if(dir=="west"){
icon="layout-button-right";
}else{
if(dir=="north"){
icon="layout-button-down";
}else{
if(dir=="south"){
icon="layout-button-up";
}
}
}
}
var p=$("<div></div>").appendTo(_397);
p.panel($.extend({},$.fn.layout.paneldefaults,{cls:("layout-expand layout-expand-"+dir),title:_title,closed:true,minWidth:0,minHeight:0,doSize:false,tools:[{iconCls:icon,handler:function(){
_3a6(_397,_398);
return false;


原扩展增加了expandPanel.panel("setTitle", "&nbsp;");恢复原状

//在layout的panle全局配置中,增加一个onCollapse处理title
$.extend($.fn.layout.paneldefaults, {
    onCollapse : function(){
        //获取layout容器
    	var layout = $(this).parents("body.layout");
	if(layout.length == 0) layout = $(this).parents("div.layout");
        //获取当前region的配置属性
        var opts = $(this).panel("options");
        //获取key
        var expandKey = "expand" + opts.region.substring(0, 1).toUpperCase() + opts.region.substring(1);
        //从layout的缓存对象中取得对应的收缩对象
        var expandPanel = layout.data("layout").panels[expandKey];
        //针对横向和竖向的不同处理方式
        if (opts.region == "west" || opts.region == "east") {
            //竖向的文字打竖,其实就是切割文字加br
        	if(opts && opts.title){
        		 var split = [];
                 for (var i = 0; i < opts.title.length; i++) {
                     split.push(opts.title.substring(i, i + 1));
                 }
                 if(expandPanel){
                      expandPanel.panel("setTitle", "&nbsp;");
                     expandPanel.panel("body").addClass("panel-title").css("text-align", "center").html(split.join("<br>"));
                 }
        	}
        } else {
        	if(expandPanel){
        		expandPanel.panel("setTitle", opts.title);
        	}
        }
    }
});


这段代码是基于easyui1.4,解决了面板初始化时collapsed无法显示title的问题,其他版本没做测试
分享到:
评论

相关推荐

    esayui layout

    "EasyUI Layout" 是 EasyUI 中的一个核心组件,用于实现页面的布局管理。下面我们将深入探讨 EasyUI Layout 的相关知识点。 1. **Layout 基本概念**: EasyUI Layout 是一种灵活的布局解决方案,它允许开发者将...

    easyui layout+tab+tree实现网站基本布局

    EasyUI的tree组件支持多种操作,如展开/折叠节点、选择节点、异步加载数据等。创建tree时,我们需要提供JSON格式的数据源,这些数据描述了树的结构。然后,在HTML中定义tree容器,并使用JavaScript初始化tree,设置...

    easyui折叠菜单写法

    ### easyui折叠菜单写法详解 #### 一、easyUI框架简介 EasyUI是一个基于jQuery的用户界面插件集合库,它提供了丰富的UI组件供开发者使用,这些组件可以帮助开发者快速构建用户界面。EasyUI简化了复杂的JavaScript...

    有关easyui-layout中的收缩层无法显示标题的解决办法

    easyui-layout中的收缩层无法显示标题的问题原因分析: 在easyui-layout中设置面板初始化为可以折叠,然后就发现标题还有图标都木有了 嗯,就是结果列表上面、一片空白,出现了问题就要去解决它,在网上查了资料...

    jQuery EasyUI 中文API—Layout(Panel)

    此外,jQuery EasyUI 还提供了一些事件处理函数,如 `onResize`、`onExpand`、`onCollapse` 等,可以监听并响应布局的动态变化,增强用户体验。 在实际开发中,我们还可以利用 Layout 的可扩展性,结合其他组件如 ...

    EasyUI tutorial 中文版 chm

    使用easyUI创建折叠面板 使用easyUI创建Tabs标签 使用easyui创建tabs组件和动态添加 使用easyUI创建一个自动播放的tabs 使用easyUI创建XP风格左侧面板 DataGrid 使用easyUI转换HTML table到datagrid ...

    easyui1.7中文api

    EasyUI 是一个基于 jQuery 的轻量级前端框架,主要用于构建用户界面。它的1.7版本中文API提供了全面的文档和示例,帮助开发者快速理解和应用EasyUI的各种组件和功能。以下是对EasyUI 1.7中文API的详细解读: 1. **...

    EasyUI1.4+zTree3.5.16完美结合框架布局

    EasyUI和zTree是两个非常流行的JavaScript库,用于构建用户界面和实现数据树形展示。在Web开发中,它们常被结合使用以提供高效的管理界面和动态的数据操作。 EasyUI是一个基于jQuery的轻量级框架,它提供了丰富的UI...

    jQuery_EasyUI中文帮助手册_jqueryeasyui_easyui_

    - **插件(Plugins)**:除了基础组件外,还有许多扩展插件,如拖放(Draggable)、可折叠(Foldable)等,可以增强组件的功能。 - **自定义主题**:通过修改 CSS 样式,或者使用在线主题生成器,你可以创建符合...

    jquery easyui 帮助文档

    jQuery EasyUI 的核心在于其组件系统,这些组件包括但不限于数据网格(datagrid)、下拉菜单(combobox)、对话框(dialog)、表单(form)、布局(layout)、菜单(menu)、面板(panel)、进度条(progressbar)、...

    jquery.easyui.min

    标题“jquery.easyui.min”暗示了这是一个经过压缩优化的jQuery EasyUI的核心库文件,名为“jquery.easyui.min.js”,它的大小被最小化,以提高网页加载速度,降低服务器负载。 EasyUI 提供的主要功能包括:布局...

    easyui1.4中文文档

    EasyUI还提供了栅格布局(grid layout)和流式布局(flow layout),方便地调整元素的位置和大小。 11. **数据绑定** EasyUI 支持数据绑定,可以将表单字段与模型数据关联,实现数据的自动同步和验证。 12. **...

    jquery-easyui-1.2.5

    &lt;div id="layout" class="easyui-layout" style="width:100%;height:400px;"&gt; &lt;!-- 添加子组件的代码 --&gt; $(function () { $('#layout').layout(); }); ``` 以上就是关于 "jquery-easyui-1.2.5" 的核心...

    EasyUI常用控件使用案例

    首先,`layout`是EasyUI的核心布局控件,它允许开发者将页面分割成多个区域,方便地组织和管理内容。`layout`提供了多种布局模式,如`north`、`south`、`east`、`west`和`center`,可以灵活调整各个区域的大小和位置...

    jquery_easyui 中文手册

    《jQuery EasyUI 中文手册》是为初学者准备的一份详尽指南,它涵盖了jQuery EasyUI框架中的核心组件和功能,旨在帮助开发者快速理解和应用这个强大的前端开发工具。jQuery EasyUI基于jQuery库,提供了一套简洁、直观...

    jquery-easyui-1.3.6+文档

    8. **布局(Layout)**:EasyUI的Layout组件用于创建复杂的页面布局,它可以划分区域并动态调整大小。 9. **表单组件**:EasyUI还包含一系列表单组件,如文本框(textbox)、复选框(checkbox)、单选按钮(radio)...

    EASYUI 页面框架

    4. **对话框(Dialog)**:EASYUI 的对话框组件可弹出独立的窗口,用于显示信息、用户输入或进行操作确认,增强了用户体验。 5. **菜单(Menu)**:EASYUI 的菜单系统可以帮助构建层次清晰的导航结构,方便用户在...

    easyui的demo的所有效果截图,并附上easyui的demo

    EasyUI 提供了多种组件,如对话框(dialog)、表单(form)、菜单(menu)、面板(panel)、布局(layout)、树形控件(tree)、表格(datagrid)、下拉选择框(combobox)等。这些组件设计简洁,且具有良好的用户...

    Jquery之easyui超全示例

    EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列丰富的组件,如对话框、表单、表格、树形结构等,帮助开发者快速构建用户界面。"Jquery之easyui超全示例"是一个全面的教程资源,包含了各种EasyUI的演示示例,...

Global site tag (gtag.js) - Google Analytics