aaa

0004f84f · yuenblue · c0bc9ad6 · 0004f84f · 0004f84f · 0004f84f
5 changed file
--- a/Bootstrap-v5/Components/Offcanvas.css
+++ b/Bootstrap-v5/Components/Offcanvas.css
+@charset "utf-8";
+/* CSS Document */
+#offcanvasExample {
+  position: static;
+  visibility: visible;
+  transform: none;
+	transform:none;
+	border: 0;
+}
+#aaa {
+  /*
+  position: fixed;
+  bottom: 0;
+  z-index: var(--bs-offcanvas-zindex);
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  color: var(--bs-offcanvas-color);
+  visibility: hidden;
+  background-color: var(--bs-offcanvas-bg);
+  background-clip: padding-box;
+  outline: 0;
+  transition: var(--bs-offcanvas-transition);
+  top: 0;
+  left: 0;
+  width: var(--bs-offcanvas-width);
+  border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+  transform: translateX(-100%);
+*/
+}
+@media screen and (max-width:765px) {
+  #offcanvasExample {
+    position: fixed;
+    visibility: hidden;
+/*    transform: translateX(100%);*/
+  }
+  .offcanvas.show {
+    visibility: visible !important;
+  }
+}
\ No newline at end of file
--- a/Bootstrap-v5/Components/Offcanvas.html
+++ b/Bootstrap-v5/Components/Offcanvas.html
@@ -4,7 +4,12 @@
 <meta charset="utf-8">
 <title>Offcanvas</title>
 <link href="../../node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css">
+<link href="Offcanvas.css" rel="stylesheet" type="text/css">
 <script type="text/javascript" src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+<script type="text/javascript" src="../../node_modules/jquery/dist/jquery.js"></script>
+
+	<script type="text/javascript" src="../../demoadmin/layout/layout-mobile.js"></script>
+
 </head>

 <body>
@@ -14,12 +19,17 @@
 <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Button with data-bs-target
 </button>
+<a id="toggle-offcanvas">offcanvas</a>

-<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
+<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
+	<p>这是布局 P 标签的内容</p>
+<!--
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
+-->
+<!--
  <div class="offcanvas-body">
    <div>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
@@ -35,6 +45,8 @@
      </ul>
    </div>
  </div>
+-->
 </div>
+<div id="aaa" class="">此处显示  id "aaa" 的内容</div>
 </body>
 </html>
--- a/demoadmin/layout/layout-mobile.js
+++ b/demoadmin/layout/layout-mobile.js
+// JavaScript Document
+$(function () {
+  const bsOffcanvas = new bootstrap.Offcanvas('#offcanvasExample')
+  
+  var btn = $("#toggle-offcanvas")
+  var aaa = document.getElementById("aaa")
+//  aaa.addEventListener("hidden.bs.offcanvas",function(e){
+//	   $("#aaa").removeClass("offcanvas")
+//	   $("#aaa").removeClass("offcanvas-start")
+//  })
+  btn.on("click", function (e) {
+//    bsOffcanvas.toggle()
+//	  $("#offcanvasExample").addClass("show")
+	  
+	  $("#aaa").addClass("offcanvas offcanvas-start")
+	  new bootstrap.Offcanvas('#aaa').show()
+  })
+})
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,11 @@
      "version": "5.3.2",
      "resolved": "https://registry.npmmirror.com/bootstrap/-/bootstrap-5.3.2.tgz",
      "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g=="
+    },
+    "jquery": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmmirror.com/jquery/-/jquery-3.7.1.tgz",
+      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="
    }
  }
 }
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
  "author": "",
  "license": "ISC",
  "dependencies": {
-    "bootstrap": "^5.3.2"
+    "bootstrap": "^5.3.2",
+    "jquery": "^3.7.1"
  }
 }