layui點擊左側(cè)導(dǎo)航欄,實現(xiàn)不刷新整個頁面,只刷新局部的方法
其實這篇文章是給自己看的,以后忘記怎么做回來還能看一下
點擊左側(cè)菜單欄只刷新局部,局部就用iframe。
首先先建layout頁,建左側(cè)菜單欄,然后下面的@RenderBody()
<div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左側(cè)導(dǎo)航區(qū)域(可配合layui已有的垂直導(dǎo)航) --> <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用于點擊跳轉(zhuǎn),上面的@RenderSection("scripts", required: false)和下面的#demoAdmin都在另一個頁面中,也就是放iframe的頁面
<script> //JavaScript代碼區(qū)域 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(); }); //設(shè)置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點擊左側(cè)導(dǎo)航欄,實現(xiàn)不刷新整個頁面,只刷新局部的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
js 創(chuàng)建對象 經(jīng)典模式全面了解
下面小編就為大家?guī)硪黄猨s 創(chuàng)建對象 經(jīng)典模式全面了解。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08js實現(xiàn)單層數(shù)組轉(zhuǎn)多層樹
這篇文章主要介紹了js實現(xiàn)單層數(shù)組轉(zhuǎn)多層樹方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06解決layui-table單元格設(shè)置為百分比在ie8下不能自適應(yīng)的問題
今天小編就為大家分享一篇解決layui-table單元格設(shè)置為百分比在ie8下不能自適應(yīng)的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09迅速了解一下ES10中Object.fromEntries的用法使用
這篇文章主要介紹了迅速了解一下ES10中Object.fromEntries的用法使用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-03-03