layui项目搭建:href地址不变,仅切换页面部分内容

 原理:
1、a 链接不走href进行跳转,属性target设置为网页地址
2、通过click鼠标点击 动态渲染 div 内容, 自动引入iframe

实现:

1.首页搭建 

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>layui</title>
        <link rel="stylesheet" href="../js/layui/css/layui.css">
        <link rel="stylesheet" href="../css/style.css">
    </head>
    <body class="layui-layout-body">
        <div class="layui-layout layui-layout-admin">
            <div class="layui-header">
                <div class="header"></div>
            </div>


            <div class="layui-side layui-bg-black left">
                <div class="layui-side-scroll">
                    <ul class="layui-nav layui-nav-tree list-side" id="menu">
                        <!-- <li class="layui-nav-item">
                            <a target="1.html">test
                                <span class="line"></span>
                                <i class="link-name"></i>
                            </a>
                        </li> -->
                    </ul>
                    <div id="iframe">
                      <!--jquery插入html位址-->
                    </div>
                </div>
            </div>

            <div class="layui-body">
                <div style="padding: 15px;">内容主体区域</div>
            </div>
        </div>


        <script src="../js/layui/layui.js"></script>
        <script src="../js/common/header.js"></script>
        <script src="../js/common/common.js"></script>
        <script src="../js/index.js"></script>
    </body>
</html>
 
index.js
layui.use(['jquery','layer','element','form','table','laydate'], function(exports){
    var $ = layui.jquery,
        layer = layui.layer,
        element = layui.element,
        form = layui.form,
        table = layui.table,
        laydate = layui.laydate,
        header = layui.header;
        
    header.init($,0,"icon_case",element);  // 生成公共头、左侧菜单栏等

    $('.list-side li').click(function(){
        var _clickLink = $(this).find('a').attr('target');//找到链接a中的target的值
        if(_clickLink){
            var _clickLink_arr1 =  _clickLink.split("&p_shortname=");
            var _clickLink_arr2 = _clickLink_arr1[0].split("childrenli=");
            var childrenli = _clickLink_arr2[1];
            var p_shortname = _clickLink_arr1[1];
            $("li").removeClass("layui-this");
            $(".nav_pop a").removeClass("active");
            $("."+p_shortname).addClass("layui-this");
            $("."+p_shortname+" .nav_pop li").eq(childrenli).find("a").addClass("active");
            console.log(_clickLink, childrenli, p_shortname)
            $("#iframe").load(_clickLink);
        }
  });
});
header.js
var winW = window.innerWidth;
var winH = window.innerHeight;
var table_h = winH - 45 - 15*2  - 64 -10;
var pageSize = parseInt((table_h - 42 - 43 )/43);


layui.config({
    base: '../js/layui/lay/modules/' //假设这是cookie.js所在的目录(本页面的相对路径)
}).extend({ //设定模块别名
    //cookie: 'cookie'   
});

layui.define(function(exports){
    var obj = {
        ....
        init: function(){  .... }
    }

    //输出接口
    exports('header', obj);
});   

2.分页面搭建: 

注意: 分页面不要在引入layui.js, 不然会报错jq找不到等 因重复引入的问题
            分页面只需要实现主体部门的功能就可以了
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>layui</title>
        <link rel="stylesheet" href="../js/layui/css/layui.css">
        <link rel="stylesheet" href="../css/style.css">
    </head>
    <body class="layui-layout-body">
        <div class="layui-layout layui-layout-admin">
            <div class="layui-body">
                <!-- 搜索条 -->
                <form class="layui-form layui-form-search" lay-filter="formSearch">
                    <div class="layui-row layui-col-space10">
                        <div class="layui-col-md3">
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                    <input class="layui-input layui-input-search">
                                </div>
                                <button type="button" class="layui-btn" lay-submit lay-filter="search">查询</button>
                            </div>    
                        </div>
                        <div class="layui-col-md9">
                            <button type="button" class="layui-btn" id="add">创建</button>
                        </div>
                    </div>
                </form>
                <!-- 表格 -->
                <table id="table" lay-filter="table"></table>
            </div>
        </div>
        
        <script src="../js/common/common.js"></script>
        <script src="../js/xmgl_fq.js"></script>
    </body>
</html>

3.效果: 切换链接地址,仅主体内容切换; 弹窗也是全局展示;

 
 
 
 
 
  • 0
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值