zoukankan      html  css  js  c++  java
  • easyui---layout实战

    第一步:
    <div id="cc" class="easyui-layout" fit=true>
    
            <div region="north" title="North Title" split="false"
                style="height: 100px;"></div>
    
            <div region="west" split="true" title="West" style=" 300px;" >
                <div id="aa" class="easyui-accordion"
                    style=" 300px; height: 200px;" fit=true>
    
                    <div title="Title1" iconCls="icon-save"
                        style="overflow: auto; padding: 10px;">
    
                        <h3 style="color: #0099FF;">Accordion for jQuery</h3>
    
                        <p>Accordion is a part of easyui framework for jQuery. It lets
                            you define your accordion component on web page more easily.</p>
    
                    </div>
    
                    <div title="Title2" iconCls="icon-reload" selected="true"
                        style="padding: 10px;">content2</div>
    
                    <div title="Title3">content3</div>
    
                </div>
    
            </div>
    
            <div region="center" title="center title"
                style="padding: 5px; background: #eee;" href="index.jsp">
                <div id="tt" class="easyui-tabs" style=" 500px; height: 250px;">
    
                    <div title="Tab1" style="padding: 20px; display: none;">tab1</div>
    
                    <div title="Tab2" closable="true"
                        style="overflow: auto; padding: 20px; display: none;">tab2</div>
    
                    <div title="Tab3" iconCls="icon-reload" closable="true"
                        style="padding: 20px; display: none;">tab3</div>
    
                </div>
    
    
            </div>
    
        </div>
    View Code

    第二步:

    <div id="cc" class="easyui-layout" fit=true>
    
            <div region="north" title="layout实战" split="false"
                style="height: 100px;"></div>
    
            <div region="west" split="true" title="菜单" style=" 300px;" iconCls="icon-ok" >
                <div id="aa" class="easyui-accordion"
                    style=" 300px; height: 200px;" fit=true>
    
                    <div title="用户管理" style="overflow: auto; padding: 10px;">
                    </div>
    //手风琴selected ,会默认展开,
                    <div title="岗位管理" selected="true" style="padding: 10px;">content2</div>
    
                    <div title="权限管理">content3</div>
                    <div title="资源管理">content3</div>
                </div>
    
            </div>
    
            <div region="center" title="主菜单"
                style="padding: 5px; background: #eee;" >
                <div id="tt" class="easyui-tabs" style=" 500px; height: 250px;" fit=true>
    
                    
    
                </div>
    
    
            </div>
    
        </div>

    第三步:

     点击左边的菜单,中间能弹出tab页,左边的菜单对应右边的tab,如果过有了,就不能再创建新的tab页

        $("p>a[title]").click(function(){
                var src=$(this).attr("title");//获取title中的值,
                var title=$(this).text();
                if($("#tt").tabs("exists",title)){//有了,就不能再创建新的tab页
                    
                    $("#tt").tabs("select",title);//将已经创建的tab选中,不再穿件新的
                }else{
                    //动态创建tab
                    $("#tt").tabs("add",{
                        title:title,
                        content:"<iframe frameborder=0 style=100%;height:100% src="+src+"></iframe>"//内容区其实就是iframe
                        
                    })
                }
            
            })
        });
        <div id="cc" class="easyui-layout" fit=true>
    
            <div region="north" title="layout实战" split="false" style="height:100px" ></div>
    
            <div region="west" split="true" title="菜单" style=" 300px;" iconCls="icon-ok" >
                <div id="aa" class="easyui-accordion"
                    style=" 300px; height: 200px;" fit=true>
    
                    <div title="用户管理" style="overflow: auto; padding: 10px;">
                    <p><a title="jsp1/001_message.jsp" >用户列表</a></p>
                    <p><a title="jsp1/002_window.jsp" >用户新增</a></p>
                    </div>
    
                    <div title="岗位管理" selected="true" style="padding: 10px;">content2</div>
    
                    <div title="权限管理">content3</div>
                    <div title="资源管理">content3</div>
                </div>
    
            </div>
    
            <div region="center" title="主菜单"
                style="padding: 5px; background: #eee;" >
                <div id="tt" class="easyui-tabs" style=" 500px; height: 250px;" fit=true>//动态创建tab页,不是写死,点击左边菜单超链接,右边创建对应的tab
    
                </div>
    
    
            </div>
    
        </div>

  • 相关阅读:
    springMVC+ajax分页查询
    SSM ( Spring 、 SpringMVC 和 Mybatis )配置详解
    Spring整合Hibernate详细步骤
    Spring AOP 注解和xml实现 --转载
    spring笔记--使用springAPI以及自定义类 实现AOP的一个例子
    SSH框架总结(框架分析+环境搭建+实例源码下载) 《转》
    对Spring的IoC和DI最生动的解释
    [转载]jQuery.extend 函数详解
    [转载]Request、Request.Form和Request.QueryString的区别
    [转载]用纯css改变下拉列表select框的默认样式
  • 原文地址:https://www.cnblogs.com/fpcbk/p/9860178.html
Copyright © 2011-2022 走看看