week14 - stayjay/wp109b GitHub Wiki

下拉式菜單

例如

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>
</head>
<body>

<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  </div>
</div>

<p><strong>Note:</strong> We use href="#" for test links. In a real web site this would be URLs.</p>

</body>
</html>

結果

Dropdown Menu
Move the mouse over the button to open the dropdown menu.

Dropdown
Note: We use href="#" for test links. In a real web site this would be URLs.

提出CSS部分

CSS

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

html的部分

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="dropdown.css"/>
</head>
<body>

<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

</body>
</html>

功能和原例一樣

提出JS的部分 paje.js

const page = {}

page.home = `
<h1>這是首頁！</h1>
<a href="http://tw.youtube.com">YouTube</a>
`

page.login = `
<h1>這是登入頁！</h1>
<Button>Login</Button>
`

page.logout = `
<h1>這是登出頁！</h1>
<Button>Logout</Button>
`

page.signin = `
<h1>這是註冊頁！</h1>
<Button>Signin</Button>
`

ui.js

const ui = {}

ui.html = function (path, html) {
  document.querySelector(path).innerHTML = html
}

ui.show = function (html) {
  ui.html('#main', html)
}

jQuery入門

將 jQuery 添加到您的網頁 有幾種方法可以在您的網站上開始使用 jQuery。你可以：

從 jQuery.com 下載 jQuery 庫 包含來自 CDN 的 jQuery，例如 Google 下載 jQuery 有兩個版本的 jQuery 可供下載：

生產版本 - 這是用於您的實時網站，因為它已被縮小和壓縮 開發版本 - 這是用於測試和開發（未壓縮和可讀代碼） 兩個版本都可以從jQuery.com下載。

jQuery 庫是單個 JavaScript 文件，您可以使用 HTML<script>標記引用它（請注意，該<script>標記應位於該

部分內）： 
<head>
<script src="jquery-3.5.1.min.js"></script>
</head>

jQuery CDN

如果您不想自己下載和託管 jQuery，您可以從 CDN（內容交付網絡）中包含它。

谷歌是一個託管 jQuery 的人的例子：

谷歌 CDN：

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

使用 Google 提供的託管 jQuery 的一大優勢：

許多用戶在訪問另一個站點時已經從 Google 下載了 jQuery。因此，當他們訪問您的網站時，它將從緩存中加載，從而縮短加載時間。此外，大多數 CDN 將確保一旦用戶從中請求文件，它將從最接近他們的服務器提供服務，這也導致更快的加載時間。

jQuery 效果 -動畫

jQuery 動畫 - animate() 方法 jQueryanimate()方法用於創建自定義動畫。

句法：

$(selector).animate({params},speed,callback);

必需的 params 參數定義了要動畫化的 CSS 屬性。

可選的速度參數指定效果的持續時間。它可以採用以下值：“慢”、“快”或毫秒。

可選的回調參數是動畫完成後要執行的函數。

以下示例演示了該animate()方法的簡單使用；它將一個

元素向右移動，直到它達到 250px 的 left 屬性：

例子

$("button").click(function(){
  $("div").animate({left: '250px'});
});

默認情況下，所有 HTML 元素都有一個靜態位置，不能移動。 要操作位置，請記住首先將元素的 CSS 位置屬性設置為相對、固定或絕對！

jQuery animate() - 操作多個屬性

請注意，可以同時對多個屬性進行動畫處理：

例子

$("button").click(function(){
  $("div").animate({
    left: '250px',
    opacity: '0.5',
    height: '150px',
    width: '150px'
  });
});

是否可以使用 animate() 方法操作所有 CSS 屬性？

是的，幾乎！但是，有一件重要的事情要記住：當與 animate() 方法一起使用時，所有屬性名稱都必須是駝峰式的：您需要編寫 paddingLeft 而不是 padding-left、marginRight 而不是 margin-right，等等。

此外，核心 jQuery 庫中不包含彩色動畫。 如果您想為顏色設置動畫，則需要從 jQuery.com下載 Color Animations 插件。

jQuery animate() - 使用相對值

也可以定義相對值（該值是相對於元素的當前值）。這是通過將 += 或 -= 放在值前面來完成的：

例子

$("button").click(function(){
  $("div").animate({
    left: '250px',
    height: '+=150px',
    width: '+=150px'
  });
});

jQuery animate() - 使用預定義值

您甚至可以將屬性的動畫值指定為“ show”、“ hide”或“ toggle”：

例子

$("button").click(function(){
  $("div").animate({
    height: 'toggle'
  });
});

jQuery animate() - 使用隊列功能

默認情況下，jQuery 帶有動畫隊列功能。

這意味著，如果您依次編寫多個animate()調用，jQuery 會使用這些方法調用創建一個“內部”隊列。然後它一個一個地運行動畫調用。

因此，如果您想依次執行不同的動畫，我們可以利用隊列功能：

示例 1

$("button").click(function(){
  var div = $("div");
  div.animate({height: '300px', opacity: '0.4'}, "slow");
  div.animate({width: '300px', opacity: '0.8'}, "slow");
  div.animate({height: '100px', opacity: '0.4'}, "slow");
  div.animate({width: '100px', opacity: '0.8'}, "slow");
});

下面的例子首先將

元素向右移動，然後增加文本的字體大小：

示例 2

$("button").click(function(){
  var div = $("div");
  div.animate({left: '100px'}, "slow");
  div.animate({fontSize: '3em'}, "slow");
});

參考網址

https://www.w3schools.com/jquery/jquery_intro.asp

https://gitlab.com/ccc109/wp/-/tree/master/11-app/site

⚠️ **GitHub.com Fallback** ⚠️