普通更新

1 year ago · 878da67170
parent 0bc5252708
commit 878da67170
3 changed files with 50 additions and 1 deletions
--- a/BlazorStudy.BootstrapLatest/wwwroot/Demo.html
+++ b/BlazorStudy.BootstrapLatest/wwwroot/Demo.html
@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="zh-cn">
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>动态加载公共内容</title>
+    <link rel="icon" type="image/png" href="favicon.png" />
+    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="css/app.css" />
+    <link rel="stylesheet" href="css/index.css" />
+</head>
+
+<body>
+    <div class="container d-flex justify-content-between">
+        <div class="me-3 left-menu" id="left-menu-box">
+
+        </div>
+        <div class="flex-grow-1">
+            <div class="card content-card">
+                <div class="card-footer">
+                    <strong>组件学习</strong>
+                </div>
+                <div class="card-body">
+                    主内容区
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="jquery/jquery-3.6.4.min.js"></script>
+    <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
+    <script src="js/app.js"></script>
+    <script>
+        $(function ()
+        {  
+            $(".container:first").before($("<div class='container'></div>").load("/Shared/Header.html"));
+            $(".container:last").after($("<div class='container'></div>").load("/Shared/Footer.html"));
+            $("#left-menu-box").load("Shared/LeftMenu.html");
+        });
+    </script>
+</body>
+
+</html>
--- a/BlazorStudy.BootstrapLatest/wwwroot/Index.html
+++ b/BlazorStudy.BootstrapLatest/wwwroot/Index.html
@ -37,7 +37,7 @@
                <div class="list-group list-group-flush border-bottom-0">
                    <a href="#menu_tab_layout" class="list-group-item list-group-item-action active" data-bs-toggle="collapse" role="button">布局学习</a>
                </div>
-                <div class="list-group list-group-flush collapse show" id="menu_tab_layout" data-bs-parent="#left-menu-box">
+                <div class="list-group list-group-flush collapse" id="menu_tab_layout" data-bs-parent="#left-menu-box">
                    <a href="#" class="list-group-item list-group-item-action list-group-item-primary">断点</a>
                    <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">容器</a>
                    <a href="#" class="list-group-item list-group-item-action list-group-item-success">网格(Grid)</a>
--- a/BlazorStudy.BootstrapLatest/wwwroot/Index2.html
+++ b/BlazorStudy.BootstrapLatest/wwwroot/Index2.html
@ -41,6 +41,11 @@
    <script>
        $(function ()
        {
+            /* 说明：$("selecter").after("元素") 的返回对象，不包含after的元素。
+                var a = $(".container:first").after("<div id='12345'>xxx</div>");
+
+                //a中不包含 <div id='12345'>xxx</div>
+            */
            $(".container:first").load("/Shared/Header.html");
            $("#left-menu-box").load("Shared/LeftMenu.html");
            $(".container:last").load("/Shared/Footer.html");