layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法


Posted in Javascript onSeptember 25, 2019

其实这篇文章是给自己看的,以后忘记怎么做回来还能看一下

点击左侧菜单栏只刷新局部,局部就用iframe。

首先先建layout页,建左侧菜单栏,然后下面的@RenderBody()

<div class="layui-side layui-bg-black">
   <div class="layui-side-scroll">
     <!-- 左侧导航区域(可配合layui已有的垂直导航) -->
     <ul class="layui-nav layui-nav-tree" lay-filter="test">
 
       <li class="layui-nav-item layui-nav-itemed Card">
         <a class="" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >名片审核</a>
       </li>
 
       <li class="layui-nav-item Project">
         <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >项目审核</a>
       </li>
 
       <li class="layui-nav-item Funds"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >需求审核</a></li>
     </ul>
   </div>
</div>
<div class="layui-body">
  @RenderBody()
  @RenderSection("scripts", required: false)
</div>

然后在最后写上js用于点击跳转,上面的@RenderSection("scripts", required: false)和下面的#demoAdmin都在另一个页面中,也就是放iframe的页面

<script>
    //JavaScript代码区域
    layui.use('element', function () {
      var $ = layui.jquery
        , element = layui.element;     
    });
    $(".Card").click(function () {
      $("#demoAdmin").attr("src", "/Admin/CardManagement")
    });
    $(".Project").click(function () {
      $("#demoAdmin").attr("src", "/Admin/ProjectManagement")
    });
    $(".Funds").click(function () {
      $("#demoAdmin").attr("src", "/Admin/FundsManagement")
    });
  </script>

新建HomeController,新建Index页面

@{
  Layout = null;
  Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}
 
<iframe src="/Admin/CardManagement" frameborder="0" id="demoAdmin" style="width: 100%; height: 100%;"></iframe>
 
 
@section scripts{
  <script>
  reHeight();
  $(window).resize(function () {
    reHeight();
  });
  //设置iframe高度
  function reHeight() {
  var bodyHeight = $(window).height();
  bodyHeight = bodyHeight - 107;
  if (bodyHeight<400) {
    bodyHeight = 400;
  }
  $("#demoAdmin").height(bodyHeight);
  }
  </script>

引用一下上面的layout。

其他页面引用Layout = "~/Areas/Admin/Views/Shared/_LayoutPage.cshtml";

我把css和js引用都放在了另一个layout里,所以我需要引用一下,否则页面会乱。

以上这篇layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
js实现仿Discuz文本框弹出层效果
Aug 13 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
Jan 27 Javascript
概述VUE2.0不可忽视的很多变化
Sep 25 Javascript
JavaScript日期对象(Date)基本用法示例
Jan 18 Javascript
vue自定义指令directive实例详解
Jan 17 Javascript
javascript性能优化之分时函数的介绍
Mar 28 Javascript
浅谈webpack+react多页面开发终极架构
Nov 11 Javascript
Vue-router 报错NavigationDuplicated的解决方法
Mar 31 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 28 Javascript
JS猜数字游戏实例讲解
Jun 30 Javascript
vue+axios实现post文件下载
Sep 25 #Javascript
vue + axios get下载文件功能
Sep 25 #Javascript
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 #Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 #jQuery
axios实现文件上传并获取进度
Mar 25 #Javascript
Layer+Echarts构建弹出层折线图的方法
Sep 25 #Javascript
axios实现简单文件上传功能
Sep 25 #Javascript
You might like
windows7下安装php的imagick和imagemagick扩展教程
2014/07/04 PHP
PHP房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
js下用eval生成JSON对象
2010/09/17 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
js实现checkbox全选、不选与反选的方法
2015/02/09 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
jqueryMobile使用示例分享
2016/01/12 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
2016/10/17 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
详解nodejs模板引擎制作
2017/06/14 NodeJs
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
Vue中axios拦截器如何单独配置token
2019/12/27 Javascript
JS实现前端动态分页码代码实例
2020/06/02 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
详解Python的Django框架中的模版继承
2015/07/16 Python
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
python实现聊天小程序
2018/03/13 Python
python实现在pandas.DataFrame添加一行
2018/04/04 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
2013/01/30 HTML / CSS
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
兰芝美国网上商城:购买LANEIGE睡眠面膜等
2017/06/30 全球购物
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
俄罗斯在线手表和珠宝商店:AllTime
2019/09/28 全球购物
课外科技活动总结
2014/08/27 职场文书
邹越感恩父母演讲稿
2014/08/28 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
任命通知范文
2015/04/21 职场文书
如何理解PHP核心特性命名空间
2021/05/28 PHP