iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 27
1
Modern Web

前端UI軍火庫系列 第 27

[Day 27]jQuery Knob - 酷炫的旋鈕式數字選擇器

  • 分享至 

  • xImage
  •  

jQuery Knob是一款讓我們能夠用旋鈕這種與眾不同的方式輸入數字的jQuery外掛,除了可以確保user輸入的一定是數字以外,也可以簡化user選擇/輸入數字的過程。

開始使用jQuery Knob

載入jQuery與jQuery Knob之後,首先我們先加入一個input

<input type="text" value="75" class="dial">

接著加入一個簡單的JavaScript

$('.dial').knob();

就可以看到我們加入的input變成旋鈕式的選擇器啦!要改變數值,我們可以按下數字直接編輯、用滑鼠拖曳外層的旋鈕、或是直接使用滑鼠滾輪調整,是不是很方便啊!

設定參數

jQuery Knob也有很多參數可以設定,這些參數也都有對應的data-* api,例如以下兩種方式結果是一樣的

使用data-* api

<input type="text" class="dial" data-min="-50" data-max="50">

使用JavaScript

$('.dial').knob({
    'min':-50,
    'max':50
});

動態設定數值

如果需要透過程式調整數值,光是改變text的value是不夠的,還需要去觸發trigger,讓旋鈕的部分也更新:

  $('.dial').val(27).trigger('change');

事件處理

jQuery Knob也有幾個事件可以使用,例如使用release可以在滑鼠選擇完數值後決定要做的事情,也可以透過change只要數值一變動就觸發

  $('.dial').knob({
    'release' : function (v) { /*make something*/ }
  });

有了基本的概念後,就讓我們做幾個簡單的DEMO吧

DEMO1: 時鐘

https://az787680.vo.msecnd.net/user/wellwind/2490b119-a0a3-457c-9aab-c82017c4c85e/1482813657_84104.gif

HTML

<div class="row">
  <div class="col-xs-4 text-center">
    時
  </div>
  <div class="col-xs-4 text-center">
    分
  </div>
  <div class="col-xs-4 text-center">
    秒
  </div>
  <div class="col-xs-4 text-center">
    <input type="text" id="hour" class="dial" data-min="0" data-max="11" data-width="100%" data-readOnly="true">
  </div>
  <div class="col-xs-4 text-center">
    <input type="text" id="min" class="dial" data-min="1" data-max="59" data-width="100%" data-readOnly="true">
  </div>
  <div class="col-xs-4 text-center">
    <input type="text" id="sec" class="dial" data-min="1" data-max="59" data-width="100%" data-readOnly="true">
  </div>
</div>

JavaScript

$('.dial').knob();

function setTime() {
  $('#hour').val(moment().get('hour') - 12).trigger('change');;
  $('#min').val(moment().get('minute')).trigger('change');;
  $('#sec').val(moment().get('second')).trigger('change');;
}

setInterval(function() {
  setTime();
}, 1000);

setTime();

DEMO2: 調整畫面明亮度

https://az787680.vo.msecnd.net/user/wellwind/2490b119-a0a3-457c-9aab-c82017c4c85e/1482813714_05278.gif

HTML

<div class="row">
  <div class="col-xs-12">
    調整明亮度
  </div>
  <div class="col-xs-12">
    <input type="text" id="setBrightness" data-min="0" data-max="100" value="100">
  </div>
</div>

JavaScript

function setBrightness(value) {
    var brightness = parseInt(255 * value / 100);
    var textBrightness = Math.abs(255 - brightness);
    $('body').css('background-color', `rgb(${brightness}, ${brightness}, ${brightness})`);
    $('body').css('color', `rgb(${textBrightness}, ${textBrightness}, ${textBrightness})`);
}

$('#setBrightness').knob({
  'change': function(value) {
		setBrightness(value);
  },
  'release': function(value) {
  	setBrightness(value);
  }
});

是不是很有趣啊!只要發揮點創意,jQuery Knob可以用在各種有趣的地方上!!

文章同步發表於: https://dotblogs.com.tw/wellwind/2016/12/27/front-end-jquery-knob

不正經閒聊

旋鈕好炫啊!


上一篇
[Day 26]ClockPicker - 更直覺的時間選擇器
下一篇
[Day 28]PDF.js - 前端也能輕鬆顯示PDF
系列文
前端UI軍火庫31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言