`

类似QQ的布局

阅读更多
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
   
    <title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">   
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<%@include file="jsp/common.jsp"%>

<script type="text/javascript">  
Ext.onReady(function(){
var item1 = new Ext.Panel({  
               title:'新闻管理',  
               cls:'empty',  
               items:[  
                  new Ext.Button({  
                      id:'test_according1',  
                      text:'测试管理',  
                      width:'100%',  
                      align:"center",
                      listeners:{  
                         click: function(btn, event) {  
                           //alert("sad");  
                           var n;  
                           n = contentPanel.getComponent(btn.id);  
                           if(n) {  
                               contentPanel.setActiveTab(n);  
                               return;  
                            }  
                            n = contentPanel.add({  
                              id : btn.id,  
                              title : btn.id,  
                              //html : '<iframe width=100% height=100% src=' + btn.id + ' />',  
                              html:"测试管理",
                              //autoLoad:'test2.html',  
                              closable : 'true'  
                            });  
                            contentPanel.setActiveTab(n);  
                         }  
                      }  
                  })]  
            }); 
  var item2 = new Ext.Panel({  
               title:'专题管理',  
               cls:'empty',  
               items:[  
                  new Ext.Button({  
                      id:'test_according2',  
                      text:'测试管理',  
                      width:'100%',  
                      listeners:{  
                         click: function(btn, event) {  
                           //alert("sad");  
                           var n;  
                           n = contentPanel.getComponent(btn.id);  
                           if(n) {  
                               contentPanel.setActiveTab(n);  
                               return;  
                            }  
                            n = contentPanel.add({  
                              id : btn.id,  
                              title : btn.id,  
                              html : '专题管理',  
                              //autoLoad:'test2.html',  
                              closable : 'true'  
                            });  
                            contentPanel.setActiveTab(n);  
                         }  
                      }  
                  })]  
            });
          var item3= new Ext.Panel({  
               title:'案例管理',  
               cls:'empty',  
               items:[  
                  new Ext.Button({  
                      id:'test_according3',  
                      text:'测试管理',  
                      width:'100%',  
                      listeners:{  
                         click: function(btn, event) {  
                           //alert("sad");  
                           var n;  
                           n = contentPanel.getComponent(btn.id);  
                           if(n) {  
                               contentPanel.setActiveTab(n);  
                               return;  
                            }  
                            n = contentPanel.add({  
                              id : btn.id,  
                              title : btn.id,  
                              html : '测试管理',  
                              //autoLoad:'test2.html',  
                              closable : 'true'  
                            });  
                            contentPanel.setActiveTab(n);  
                         }  
                      }  
                  })]  
            });  
        var item4 = new Ext.Panel({  
               title:'留言管理',  
               cls:'empty',  
               items:[  
                  new Ext.Button({  
                      id:'test_according4',  
                      text:'测试管理',  
                      width:'100%',  
                      listeners:{  
                         click: function(btn, event) {  
                           //alert("sad");  
                           var n;  
                           n = contentPanel.getComponent(btn.id);  
                           if(n) {  
                               contentPanel.setActiveTab(n);  
                               return;  
                            }  
                            n = contentPanel.add({  
                              id : btn.id,  
                              title : btn.id,  
                              html : '留言管理',  
                              //autoLoad:'test2.html',  
                              closable : 'true'  
                            });  
                            contentPanel.setActiveTab(n);  
                         }  
                      }  
                  })]  
            });  
   
           var item5 = new Ext.Panel({  
               title:'品牌管理',  
               cls:'empty',  
               items:[  
                  new Ext.Button({  
                      id:'test_according5',  
                      text:'测试管理',  
                      width:'100%',  
                      listeners:{  
                         click: function(btn, event) {  
                           //alert("sad");  
                           var n;  
                           n = contentPanel.getComponent(btn.id);  
                           if(n) {  
                               contentPanel.setActiveTab(n);  
                               return;  
                            }  
                            n = contentPanel.add({  
                              id : btn.id,  
                              title : btn.id,  
                              html : '品牌管理',  
                              //autoLoad:'test2.html',  
                              closable : 'true'  
                            });  
                            contentPanel.setActiveTab(n);  
                         }  
                      }  
                  })]  
            });  
           
           
           

        var item6 = new Ext.Panel({  
               title:'业务管理',  
               items:[  
                  new Ext.Button({  
                      id:'test_according6',  
                      text:'测试管理',  
                      width:'100%',  
                      listeners:{  
                         click: function(btn, event) {  
                           //alert("sad");  
                           var n;  
                           n = contentPanel.getComponent(btn.id);  
                           if(n) {  
                               contentPanel.setActiveTab(n);  
                               return;  
                            }  
                            n = contentPanel.add({  
                              id : btn.id,  
                              title : btn.id,  
                              html : '测试管理',  
                              //autoLoad:'project.jsp',  
                              closable : 'true'  
                            });  
                            contentPanel.setActiveTab(n);  
                         }  
                      }  
                  })]  
            });






    //树的根节点合同管理       
       var root1=new Ext.tree.TreeNode({ 
        id:'root1', 
        text:'合同管理', 
        draggable:false,
        //expanded:true,
       visable:false
    })
//暂时没用
var root2=new Ext.tree.TreeNode({ 
      id:'root2', 
      text:'帮助', 
      draggable:false, 
      expanded:true
  }) 
           
           
    var menuTree = new Ext.tree.TreePanel({ 
    region:'west', 
    title:'合同管理', 
    width:180, 
    minSize:150, 
    maxSize:200, 
    split:true, 
    autoScroll:true, 
    autoHeight:false, 
    collapsible:true,
     
    root: root1,
    rootVisable:false//不显示根节点 
 

});       
    //root2增加子结点
root1.appendChild(new Ext.tree.TreeNode({ 
    id:'htmlPanel1', 
    text:'客户', 
    listeners:{ 
        'click':function(node, event) { 
            event.stopEvent(); 
            //TabPanel
            var n = contentPanel.getComponent(node.id); 
            if (!n) { //判断是否已经打开该面板 
                n = contentPanel.add({ 
                    'id':node.id, 
                    'title':node.text, 
                    closable:true,  //通过html载入目标页 
                    //html:'客户信息'
                    //autoLoad:{url:"iusepm/system/customer/jsp/customerManager.jsp",scripts:true}
                    autoLoad:{url:"iusepm/system/customer/jsp/addCustomer.jsp",scripts:true}
                }); 
            } 
            //设置为活动
            contentPanel.setActiveTab(n); 
        } 
    } 
}));       
           
    
           
           
/////////左侧导航目录
var arrPanle=new Ext.Panel({
        renderTo:"hello",
        title:"系统管理gdsg",
        width:200,
        height:200,
        layout:"accordion",
        region:'west', 
        layoutConfig: {
        animate: true
        },
        items:[item1,item2,item3,item4,item5,item6,menuTree]
    });
   
//////////上侧内容/////
var northPanle=new Ext.Panel({
        title:"系统管理",
        width:50,
        height:83,
        autoLoad:{url:"images/customer/pic.html",scripts:true},
        region:'north'
    });




   //右边具体功能面板区 
var contentPanel = new Ext.TabPanel({ 
    region:'center', 
    enableTabScroll:true, 
    activeTab:0, 
    items:[{ 
        id:'homePage', 
        title:'首页', 
        autoScroll:true, 
        html:'欢迎进入首页' 
    }] 
});

//视图
new Ext.Viewport({ 
        layout:'border', //使用border布局 
        defaults:{activeItem:0}, 
        //items:[ contentPanel,northPanle,arrPanle] 
      items:[ contentPanel,arrPanle] 
    }); 
});

</script>
  </head>
   
  <body>
  <div id="hello"></div>
 
  </body>
</html>
分享到:
评论

相关推荐

    Fragment仿QQ布局

    "Fragment仿QQ布局"这个主题,主要是指如何利用Fragment来模仿QQ应用中的多面板、可滑动切换的界面设计。下面我们将深入探讨Fragment的基本概念、使用方法以及如何创建一个类似QQ的布局。 1. **Fragment基础** - ...

    类似qq表情布局展示

    在IT行业中,尤其是在移动应用和即时通讯(IM)软件开发中,"类似QQ表情布局展示"是一个常见的需求。QQ作为一款流行的即时通讯工具,其表情布局设计得既美观又易于用户交互,是许多开发者学习和借鉴的对象。下面,...

    菜单类似QQ的设置面板的侧滑菜单布局

    在Android应用开发中,创建一个类似QQ设置面板的侧滑菜单布局是常见的需求,它能够为用户提供方便快捷的导航选项,提升用户体验。这种菜单通常被称为抽屉式(Drawer)或侧栏(Sidebar)菜单,源自 Material Design ...

    模仿QQ空间 jquery 拖拽布局的源码

    拖拽布局的核心技术是HTML5的拖放(Drag and Drop)API,但在这个项目中,我们使用jQuery来封装和增强这个功能,使得在不支持HTML5拖放的浏览器中也能实现类似的效果。jQuery提供了方便的DOM操作方法,以及丰富的...

    自定义拖动布局首页,像QQ空间那样,拖动布局

    - **标题**:“自定义拖动布局首页,像QQ空间那样,拖动布局”:这表明该页面的目标是实现一种类似QQ空间的自定义拖动布局功能。用户能够通过鼠标拖动来调整页面上各元素的位置,从而实现个性化布局。 - **描述**:...

    类似qq的源代码

    "类似qq的源代码"这个项目可能是开发者或者研究者为了教学或研究目的,尝试复现或模拟QQ的一些功能而编写的C++程序。下面我们将围绕这个主题,探讨一些可能涉及的IT知识点。 1. **C++编程语言**:C++是一种强大的...

    qq登录界面布局实例

    在这个实例中,我们将探讨如何创建一个类似于QQ登录界面的布局。 首先,我们需要了解Android中的几种基本布局类型,如LinearLayout(线性布局)、RelativeLayout(相对布局)、ConstraintLayout(约束布局)等。QQ...

    Android应用源码之菜单类似QQ的设置面板的侧滑菜单布局.rar

    这个名为"Android应用源码之菜单类似QQ的设置面板的侧滑菜单布局.rar"的压缩包文件,很可能包含了实现这一功能的源代码示例,帮助开发者理解并创建与QQ设置面板相似的侧滑菜单。 首先,让我们了解一下侧滑菜单的...

    ios qq聊天布局

    通过以上技术点的实现,我们可以逐步构建出一个类似QQ的聊天布局。然而,需要注意的是,模仿并不等于复制,开发者应结合自身应用的特点,创造出更具个性化的用户体验。在实际开发过程中,不断测试和优化,才能打造出...

    类似QQ的SilverlightPopup

    "类似QQ的SilverlightPopup"项目是基于Silverlight技术实现的一个功能,它模仿了腾讯QQ软件中的右下角消息弹出框的效果。这个弹出框不仅在外观上类似于QQ,还具有渐变消失的功能,从而为用户提供更加友好和直观的...

    ios类似qq侧滑菜单的demo

    在iOS开发中,创建一个类似QQ的侧滑菜单是一种常见的需求,这通常涉及到导航控制器、自定义视图控制器以及手势识别等技术。QQ侧滑菜单的设计目的是为了提供一种优雅的方式来展示更多的功能选项或者二级菜单,而不会...

    QQ 首页 登录 布局 学习 例子

    QQ首页登录布局学习例子是一个关于如何设计和实现类似QQ应用首页登录界面的教学资源。这个例子主要聚焦于网页或应用程序的用户界面(UI)设计,特别是登录界面的布局和交互。在学习这个例子时,我们可以深入理解以下...

    Android应用源码之菜单类似QQ的设置面板的侧滑菜单布局.zip

    这个“Android应用源码之菜单类似QQ的设置面板的侧滑菜单布局”示例是针对这种功能的具体实现,旨在帮助开发者理解和学习如何在自己的应用中集成类似QQ的侧滑菜单。 首先,我们要了解的是Android中的布局系统。在...

    delphi实现类似QQ窗体伸缩效果

    在Delphi中实现类似QQ窗体的伸缩效果,涉及到窗口动态布局、皮肤处理和动画效果等技术。这里我们将深入探讨这些关键知识点,并提供实现这一功能的步骤。 1. **窗口动态布局**: - Delphi 提供了 TLayout 控件,...

    类似QQ界面的程序快捷管理软件(vb源码).rar

    【标题】:“类似QQ界面的程序快捷管理软件(vb源码).rar”是指一个使用Visual Basic(VB)编程语言开发的软件项目,其设计灵感来源于QQ即时通讯软件的界面风格,旨在提供一种便捷的程序快捷启动和管理功能。...

    类似QQ分组效果delphi实现,以QQ2011为目标

    1. **图形用户界面设计**:Delphi的VCL提供了丰富的控件库,可以创建出类似QQ的界面布局,包括分组列表、好友列表、分组编辑按钮等。开发者需要熟练掌握各种控件的属性、方法和事件,以实现交互效果。 2. **数据...

    类似QQ 界面的源码,模仿QQ界面

    因此,"类似QQ界面的源码"意味着开发者或学习者可以借此机会了解如何构建一个类似的图形用户界面(GUI),包括窗口布局、按钮设计、聊天窗口等功能。 【描述详解】 描述中提到,这个源码是模仿QQ界面设计的,这表明...

    仿QQ空间采用Div+CSS布局

    "仿QQ空间采用Div+CSS布局"中,可以推测包含的资源可能是示例代码、设计图或其他相关素材,学习者可以通过这些资料了解并实践如何运用Div+CSS技术来创建类似QQ空间的页面布局。在实践中,不仅要注意代码的编写,还要...

Global site tag (gtag.js) - Google Analytics