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 相关文章推荐
ASP 过滤数组重复数据函数(加强版)
May 31 Javascript
javascript获得服务器端控件的ID的实现代码
Dec 28 Javascript
实现点击列表弹出列表索引的两种方式
Mar 08 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
JavaScript中关键字 in 的使用方法详解
Oct 17 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
Nov 10 Javascript
在vue中使用v-bind:class的选项卡方法
Sep 27 Javascript
浅谈HTTP 缓存的那些事儿
Oct 17 Javascript
mui js控制开关状态、修改switch开关的值方法
Sep 03 Javascript
layui 富文本编辑器和textarea值的相互传递方法
Sep 18 Javascript
js实现登录拖拽窗口
Feb 10 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
PHP的面试题集
2006/11/19 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
PHP开发注意事项总结
2015/02/04 PHP
php中namespace use用法实例分析
2016/01/22 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
jQuery动态创建html元素的常用方法汇总
2014/09/05 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
2014/11/13 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
2016/01/23 Javascript
javaScript给元素添加多个class的简单实现
2016/07/20 Javascript
AngularJS模块详解及示例代码
2016/08/17 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
webpack+vue.js实现组件化详解
2016/10/12 Javascript
Angular 常用指令实例总结整理
2016/12/13 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
浅谈vue方法内的方法使用this的问题
2018/09/15 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
Laravel+Dingo/Api 自定义响应的实现
2019/02/17 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
Python 脚本实现淘宝准点秒杀功能
2019/11/13 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
介绍一下Java中的Class类
2015/04/10 面试题
2013年军训通讯稿
2014/02/05 职场文书
关于感恩的演讲稿200字
2014/08/26 职场文书
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏
如何用六步教会你使用python爬虫爬取数据
2022/04/06 Python