Create a multi-page web app side menu link

bysemicon -
1

 สร้างการสลับหน้าในเว็บแอปแบบหลายหน้า



1. ไฟล์ index.html นำสคริปต์ด้านล่างไปวางก่อน tag </body>

<script>
      /** ====== Start Switch Page ===== */
        const homePage = () => {
          event.preventDefault()
          document.querySelector("#homepage").style.display = "block"
          document.querySelector("#app").innerHTML = ""
        }

        const switchPage = (page) => {
          event.preventDefault()
          google.script.run.withSuccessHandler(AfterSwitchPage).include(page)
        }

        const AfterSwitchPage = (res) => {
          document.querySelector("#homepage").style.display = "none"
          document.querySelector("#app").innerHTML = res
        }
      /** ====== End Switch Page ===== */
    </script>

2. เมนูลิงก์ของแต่ละหน้าเพิ่มฟังก์ชั่น onclick="switchPage('ชื่อไฟล์ของหน้าที่จะลิงก์')"

    เช่น onclick="switchPage('p1')"

3. ที่ลิงก์ หน้าแรก (HOME) เพิ่มฟังก์ชั่น onclick="homePage()"

4. เพิ่มฟังก์ชั่น include ใน code.gs

/** The function returns an HTML service HtmlOutput object **/
function doGet() {
  return HtmlService.createTemplateFromFile("index").evaluate()
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
  .setTitle('My Project')
}

/** Include Files **/
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent()
}

ตัวอย่าง

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body class="bg-primary bg-opacity-25">
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" href="#" onclick="homePage()">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#"  onclick="switchPage('p1')">Link1</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#"  onclick="switchPage('p2')">Link2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#" onclick="switchPage('p3')">Link3</a>
            </li>
          </ul>
          <form class="d-flex" role="search">
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success" type="submit">Search</button>
          </form>
        </div>
      </div>
    </nav>
    <div class="container">

      <div id="homepage">
        <h1>Hello, world!</h1>
      </div>

      <div id="app" class="none"></div>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
      /** ====== Start Switch Page ===== */
        const homePage = () => {
          event.preventDefault()
          document.querySelector("#homepage").style.display = "block"
          document.querySelector("#app").innerHTML = ""
        }

        const switchPage = (page) => {
          event.preventDefault()
          google.script.run.withSuccessHandler(AfterSwitchPage).include(page)
        }

        const AfterSwitchPage = (res) => {
          document.querySelector("#homepage").style.display = "none"
          document.querySelector("#app").innerHTML = res
        }
      /** ====== End Switch Page ===== */
    </script>
  </body>
</html>


p1.html, 

<h1>Page 1 </h1>

p2.html

<h1>Page 2 </h1>

p3.html

<h1>Page 3 </h1>


DOWLOAD       DEMO



Tags:

1 ความคิดเห็น

แสดงความคิดเห็น
ใหม่กว่า เก่ากว่า