简单easyui layout三块布局

布局样式布局样子

引入easyui+jquery+css代码

<script type="text/javascript"
    src="../js/jquery.min.js"></script>
<script type="text/javascript"
    src="../js/jquery.easyui.min.js"></script>
<script type="text/javascript"
    src="../js/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css"
    href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
    href="../themes/icon.css">
<style type="text/css">
    .content {
        padding: 10px 10px 10px 10px;
    }
</style>
<script type="text/javascript">

布局前台代码

<body class="easyui-layout">
    <div data-options="region:'north',split:true"
            style="height:100px;">
            <center style="margin-top: 40px;">
                <h3>sccc后台</h3>
            </center>
    </div>
    <div data-options="region:'west',title:'菜单',split:true" style="width:180px;">
        <ul id="menu" class="easyui-tree" style="margin-top: 10px;margin-left: 5px;">
            <li><span id="sms">短信群发</span></li>
            <li><span id="massagemanage">短信模板管理</span></li>
         </ul>
    </div>
    <div data-options="region:'center',title:''">
        <div id="tabs" class="easyui-tabs">
            <div title="首页" style="padding:20px;">

            </div>
        </div>
    </div>

</body>

jquery点击节点,打开tabs实现

<script type="text/javascript">

$(function(){
    //异步树发送ajax请求,获取菜单数据
    $("#menu").tree({

        onClick: function(node){
            //点击叶子结点,如果对应tab已经存在,则选中这个tab;如果对应tab不存在,新开tab
            //判断点击叶子结点
            if($('#menu').tree('isLeaf', node.target)){
                    var tabs = $('#tabs');
                    //根据点击叶子节点的文本信息得到tab
                    var tab = tabs.tabs('getTab',node.text);
                    //初始设置为短信模板管理页面
                    var href='listMassage.html';
                    //若选择节点为短信群发,则修改页面
                    if(node.text=='短信群发'){
                        href='listMassageRecording.html';
                    }

                    if(tab){
                        //tab页已经打开,则选中这个tab
                        tabs.tabs('select',node.text);
                    }else{
                        //对应tab不存在,新开tab
                        tabs.tabs('add',{
                            title:node.text,
                            href:href,
                            closable:true,
                        });
                    }
            }
        }

    });

});


</script>
在Vue.js中创建一个类似于EasyUI Layout的自适应布局页面,你可以使用Element Plus这样的基于Vue的组件库,它提供了响应式的设计和灵活的栅格系统。以下是基本步骤: 1. **安装依赖**: 首先,你需要安装`element-plus`和`vue-router`,如果还没有安装的话: ``` npm install element-plus vue-router ``` 2. **引入并配置**: 在你的`main.js`或`setup()`文件中导入并配置Element Plus: ```javascript import { createApp } from 'vue'; import ElementPlus from 'element-plus'; import App from './App.vue'; // 引入国际化 import lang from 'element-plus/lib/locale/lang/en-US'; // 设置语言 ElementPlus.use(ElementPlus.I18n, { locale: lang, messages: { en-US }, }); const app = createApp(App); app.use(ElementPlus); // 其他路由配置... app.mount('#app'); ``` 3. **创建Layout组件**: 创建一个名为`Layout.vue`的组件,模拟EasyUI的两栏布局: ```html <template> <div class="layout"> <el-col :span="{ xs: 24, sm: 8, md: 6, lg: 4, xl: 3 }" class="left-col"> <!-- 左侧内容 --> <router-view name="left"></router-view> </el-col> <el-col :span="{ xs: 0, sm: 16, md: 18, lg: 20, xl: 19 }" class="right-col"> <!-- 右侧内容 --> <router-view name="right"></router-view> </el-col> </div> </template> <script> export default { name: "Layout", }; </script> ``` 4. **在App.vue中使用Layout**: 将`Layout`组件作为根组件,并使用`<router-view>`标签分隔左右两侧的内容: ```html <template> <Layout> <router-view></router-view> <!-- 这里会动态渲染匹配的子组件 --> </Layout> </template> ``` 5. **路由配置**: 使用Vue Router设置路由规则,确保它们映射到正确的`Layout`组件下的子视图。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值