up
down
Close
架站盒子
Web Development Box
 

jQuery 模擬開關效果的按鈕

│ 684 Views │ jQuery
jQuery 模擬開關效果的按鈕
jQuery 模擬開關效果的按鈕

相信許多人都看過像開關一樣的按鈕,看起來好像很難製作,但實際上想要讓按鈕具有類似開關按鈕的效果只需要製作兩種 class 樣式,再使用 jQuery 去切換 class 即可。

HTML

<button class="btn">
  <div class="ball" onclick="slide()"></div>
</button>

首先先做一個button,並給它一個 class,接著要在裡面做一顆小球,因此需要再給它一個元素,一樣給它一個 class,並再給它一個onclick的指令,這意思是當點擊時要它什麼,而裡面的slide()就是要觸發 jQuery 去執行動作,這個slide()可以自訂名稱,但後面的()不可省略。

接下來要設計按鈕的樣式,需要按之前跟按下之後的兩種樣式。

CSS

.btn {
  width: 6rem;
  height: 2.5rem;
  margin:.1rem;
  padding: .1rem;
  background: #555;
  border: 2px solid #ccc;
  border-radius: 2rem;
  transition: .3s;
  box-shadow: inset 1px 1px 5px #333, .1rem .2rem .5rem #999;
}
.ball {
  width: 2rem;
  height: 2rem;
  background: #777;
  border: inset .1rem rgba(153, 153, 153, 0.43);
  border-radius: 50%;
  box-sizing: border-box;
  cursor: pointer;
  transition: .3s;
  box-shadow: 1px 1px 5px #000;
}
.on.btn {
  background: #777;
}
.on .ball {
  background: #999;
  outset .1rem rgba(153, 153, 153, 0.43)
  box-shadow: -1px 1px 5px #000;
  margin-left: calc(100% - 2rem);
}

看起來很長,但總共就四種 class,分別是按鈕btn、小球ball,以及按下後的按鈕btn跟小球ball

比較要注意的是最後兩個class寫法,分別是.on.btn.on .ball,前者沒有空格,後者有空格,這兩種寫法是有差別的,.on.btn代表同時具有.on.btn兩個 class,則是指在.on中的.ball

等等我們會讓 jQuery 去新增與移除 class .on,因此 button 元素在按按鈕之前的class 是btn,按下按鈕之後則會是btn on,可以按右鍵的「檢查」看 HTML 的變化。

漸變效果

CSS樣式可依照個人喜好去調整,這裡特別加上了transition: .3s,這意思是漸變效果,.3s 是 0.3 秒的意思,這樣開關會有移過去的感覺,而不是瞬間跑到右邊。

jQuery

function slide() {
  $('button').toggleClass('on');
}

這個 function 會執行slide()的動作,動作內容則寫在{}裏面,$('button')是指button這個元素,如果要指定為id則寫$('#id_name'),指定class則是$('.class_name')

toggleClass意思是切換 class,後面我們指定切換的 class 名稱為on,這樣當執行動作時,如果沒有on就新增on,如果有on則移除on,這樣就完成「開關」模擬了。

實際操作

直接看實際例子比較快:

See the Pen Untitled by kumo (@kumo-tw) on CodePen.

我還有做背景顏色的切換,這樣更有開關的感覺,道理也一樣,就是在指定的元素中(例如body)新增on即可。

以上就是模擬開關的小技巧,希望有幫到各位。

延伸閱讀

本文是否對您有幫助?