`
dsotbs936
  • 浏览: 38037 次
  • 性别: Icon_minigender_1
  • 来自: 浙江
文章分类
社区版块
存档分类
最新评论

ExtJS实际可折叠伸缩的菜单面板

阅读更多


HTML:
   <ul id="knowledgemenu " class="x-hidden mymenu" (这里的class用来隐藏面板内容的)>
      <li><a id="knowledge"  class="menubar ">知识导航</a></li>
      <li><a id="bbs"    class="menubar">公告</a></li>
      <li><a id="question"    class="menubar">待解决问题</a></li>
      <li><a id="sloved"    class="menubar">已解决问题</a></li>
      <li><a id="knownw"   class="menubar">知识贡献</a></li>
      <li><a id="tagslist"    class="menubar">Tags</a></li>
    </ul>
    <ul id="libmenu " class="x-hidden mymenu">
      <li><a id="knownlist"  class="menubar ">文章库</a></li>
      <li><a id="booklist"  class="menubar">图书库</a></li>
      <li><a id="A1"  class="menubar">软件库</a></li>
    </ul>
CSS:

.menubar {
 border-bottom: 1px solid #AACCF6;
 color: #222222;
 cursor: pointer;
 display: block;
 height: 20px;
 width: 50px;
 line-height: 17px;
 outline-color: -moz-use-text-color;
 outline-style: none;
 outline-width: 0;
 padding: 3px;
 text-align: center;
 text-decoration: none;
 white-space: nowrap;
}

.menubar:hover {     //鼠标悬停上时触发
 background: #EBF3FD url(../item-over.gif) repeat-x scroll left bottom;
 text-decoration: none;
}


JS:
    var knowledgemenu = new Ext.Panel({
                 title: '翰维知道',
                 contentEl:'knowledgemenu',  //DOM标签ID    (contentEL可以换成html)
                 border:false,
                    iconCls:'nav'
                });
    var libmenu = new Ext.Panel({
                 title: '专题',
                 contentEl:'libmenu',
                 border:false,
                    iconCls:'nav'
                });
    var westPanel=new Ext.Panel({
                    region:'west',
                    el:'west',
                    title:'功能菜单',
                    collapsible: true ,    //本窗口伸缩
                    //collapseMode:'mini',
                    split:true,
                    width: 175,
                    minSize: 175,
                    maxSize: 175,
                    margins:{left: 10, top: 0, right: 0, bottom: 0},
                    layout:'accordion',   //子窗口为折叠
                    layoutConfig:{
                        animate:true
                       // fill :false
                    },
                    items:[knowledgemenu, libmenu]
    }); 

 

http://www.blogjava.net/algz/articles/278217.html

分享到:
评论

相关推荐

    EXTJS4 菜单栏

    EXTJS4的菜单栏设计灵活,可自定义程度高,支持多级菜单、图标、分隔符等元素,为开发者提供了丰富的API和配置选项。 菜单栏在EXTJS4中的实现主要基于`Ext.menu.Menu`类。这个类提供了一个容器,可以容纳多个菜单项...

    Extjs动态加载菜单

    动态加载菜单是ExtJS中的一个关键特性,它允许在用户交互过程中动态地创建、修改和加载菜单项,提供了更灵活的用户界面设计。在“Extjs动态加载菜单”这个主题中,我们将深入探讨这一功能的实现方式以及相关技术。 ...

    Extjs折叠布局中添加树

    在ExtJS中,折叠布局(Accordion Layout)是一种特殊的布局方式,它将所有子组件(Panels)垂直堆叠,并且在任何时刻只允许一个面板展开显示其内容,其他面板则保持折叠状态。`layout: 'accordion'` 就是用来设置...

    extjs实现动态树加载菜单

    动态树加载菜单是 ExtJS 中一种常见且实用的功能,它允许用户在需要时按需加载树节点,从而提高应用性能,减少初次加载时的数据量。 动态树加载,也称为懒加载或按需加载,是指在用户滚动、展开节点或执行其他操作...

    extjs4 导航菜单实例

    在ExtJS中,导航菜单通常通过`Ext.menu.Menu`类来实现,这是一个可弹出的菜单,可以包含多个子菜单项。创建导航菜单时,我们需要定义菜单项(menu items),每个菜单项可以是简单的链接、复选框、分割线或包含子菜单...

    Extjs经典的教程之面板布局

    Extjs经典教程,关于面板布局的学习资料,图文并茂,值得一看

    ExtJS5树形菜单

    在ExtJS5中,树形菜单(Tree Menu)是一种常见的UI组件,它允许用户以层次结构的方式展示数据,非常适合用于目录浏览、文件系统导航或者复杂的组织结构展示。在本篇文章中,我们将深入探讨ExtJS5树形菜单的使用方法...

    extjs desktop相关 动态生成开始菜单 多级菜单的快捷方式

    标题中的“ExtJS Desktop相关 动态生成开始菜单 多级菜单的快捷方式”涉及到的是一个使用ExtJS框架实现的桌面应用模拟系统,它能够创建类似Windows操作系统的开始菜单,并支持多级菜单结构来快速访问应用程序或功能...

    extjs4.0 实现了主页面框架 动态菜单 例子 表单 ajax

    extjs4.0 实现了主页面框架(主框架使用Ext.Viewport,banner使用Ext.panel.Panel,通过toolbar来放置按钮),包括左侧动态菜单实现(采用Ext.tree.Panel)动态从数据库加载数据来显示菜单(后台代码也在了通过json...

    Extjs面板和布局

    ### Extjs面板和布局知识点详解 #### 一、Extjs中的面板(Panel) 在Extjs中,**面板(Panel)**扮演着极其重要的角色,它不仅作为其他组件的容器,而且还是实现页面布局的关键手段之一。面板类似于Delphi、Visual...

    extjs点击右侧面板生成tab

    extjs点击右侧面板生成tab,面板是ul+li的

    extjs4.2 desktop 拓展

    总结来说,ExtJS 4.2 Desktop 拓展是一个集成了多种桌面特性并优化了基础框架的解决方案,它提供了图标换行、窗口拖动、多级开始菜单等功能,使得开发复杂的Web应用变得更加简单和直观。通过下载提供的LinBDesk4.2...

    Extjs 下拉菜单实现拼音输入进行检索

    Extjs 下拉菜单实现拼音输入进行检索

    EXTJS---完整数据库代码,全网唯一,非常适合EXTJS搭建框架,包含动态树,菜单等

    EXTJS的动态树(TreePanel)组件允许开发者创建可交互的树形结构,这些结构可以动态地加载数据。树节点可以包含子节点,可以展开或折叠,支持拖放操作,非常适合用来展示层次化的信息,如目录结构、组织架构等。动态...

    ExtJs菜单导航功能,不在用左边功能树

    例如,小屏幕设备可以折叠菜单,大屏幕设备则可以展开全部菜单。 6. **事件处理**:在菜单导航中,事件处理是关键。通过监听`click`、`beforeclick`等事件,可以实现对用户操作的响应,进行权限控制、数据加载等...

    Extjs 无限树菜单 后台拼接json

    在IT行业中,ExtJS是一个广泛使用的JavaScript框架,用于构建富客户端Web应用程序。它提供了一整套组件库,包括数据绑定、布局管理...通过这样的方式,我们可以构建出动态、可扩展且高效的树形菜单,适应各种业务需求。

    extjs 折叠布局

    ext js简单的折叠布局 自己总结的 根据项目的需要可以使用

    sencha touch accordion(折叠) 布局

    在Sencha Touch中,`Accordion`布局是一种特殊的布局方式,主要用于展示一系列可折叠的面板,每个面板只显示一个内容区域,用户点击一个面板时,其他面板会自动收起。这种布局方式常用于信息展示、菜单导航等场景,...

    Extjs实现下拉菜单效果

    在本篇文章中,我们将详细了解如何使用ExtJS框架实现具有下拉树功能的下拉菜单效果。ExtJS是一个成熟的JavaScript框架,用于创建交互式的Web应用程序,提供了一整套丰富的用户界面组件,其下拉树组件是其众多组件之...

    使用ExtJs构建树形菜单功能

    本文将详细介绍如何使用ExtJs构建树形菜单,并通过实际示例来演示具体步骤。 #### 二、创建基础树形菜单 在ExtJs中,树形菜单主要通过`Ext.tree.TreePanel`类来实现。该类继承自`Panel`面板,提供了许多特性和方法...

Global site tag (gtag.js) - Google Analytics