iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 13
2
Modern Web

前端UI軍火庫系列 第 13

[Day 13]SweetAlert - 變化萬千的Dialog library

  • 分享至 

  • xImage
  •  

在上一篇文章我們介紹了toastr.js這類用來取代alert並達到更好UX目的標notify library,接下來要介紹的是比起notify更具有互動效果的dialog library,也就是透過dialog的方式,來讓跟user的互動有加分的效果;今天我們主要要介紹的是SweetAlert這款功能強大、美觀又容易使用的dialog library。

使用SweetAlert

載入SweetAlert相關的css/js後,要使用SweetAlert非常簡單,呼叫sweetAlert()這個function在帶一個訊息進去當作參數就好了。

sweetAlert('Hello World!');

就會看到一個帶有自訂訊息的dialog啦!結果如下圖:

http://ithelp.ithome.com.tw/upload/images/20161213/20020617yE4K6LzMQU.png

另外也可以使用比較短的名稱swal()

swal('Hello World!');

加入dialog標題

其實SweetAlert的第一個參數就是標題,因此要加入dialog標題,則是第一個參數是標題、第二個參數才是內容

swal('Title...', 'Hello World!');

設定dialog類型

SweetAlert預設有四種dialog類型,分別是warningerrorsuccessinfo,可以放在第三個參數,例如一個success類型的dialog

swal('Title...', 'Hello World!', 'success');

可以看到如下圖,dialog多出成功的圖示了!

http://ithelp.ithome.com.tw/upload/images/20161213/20020617ziyZg3FLGT.png

另外還有一種類型是input,可以讓我們在dialog中輸入文字。

更多參數設定

SweetAlert有很多參數可以設定,比起放入3個字串當作參數,我們可以直接加入一個物件當作參數,讓設定更具有彈性,例如以下兩段JavaScript的結果完全一樣

// 以下兩段JavaScript結果完全一樣

swal('Title...', 'Hello World!', 'success');

swal({
  title: 'Title...',
  text: 'Hello World!',
  type: 'success'
});

若第一個參數為物件,則第二個參數代表的則是要結束dialog時的callback function。

swal({
  title: 'Title...',
  text: 'Hello World!',
  type: 'success'
}, function() {
  console.log('bye');
});

更多的參數可以到SweetAlert頁面下方觀看,有非常多彈性的選項,這邊在以上一段提到的input做一個簡單的例子。

swal({
  title: '算術題',
  text: '請問1+1等於多少?',
  type: 'input',
  inputPlaceholder: '請輸入答案',
  showCancelButton: true,
  confirmButtonText: '作答',
  cencelButton: '取消',
  closeOnConfirm: false,
  closeOnCancel: false,
}, function(answer) {
  if (!answer) {
    swal({
      title: '取消',
      text: '這麼簡單的題目,你也不回答嗎?!',
      type: 'warning'
    });
  } else {
    if (+answer === 2) {
      swal({
        title: '答對啦!',
        text: '你真是天才!',
        type: 'success'
      });
    } else {
      swal({
        title: '答錯囉!',
        text: '再想想看,很簡單的!',
        type: 'error'
      });
    }
  }
});

https://az787680.vo.msecnd.net/user/wellwind/a7544f28-fc90-4689-b301-b1bc42426211/1481608893_67708.gif

程式碼DEMO: https://jsfiddle.net/wellwind/fxh1vam6/

上面的程式碼中,我們設定了dialog的類型為input並設定預設值,還有顯示取消按鈕以及按鈕的文字內容,並且設定按鈕按下時不要立刻關閉dialog,接著在第二個callback參數中檢查輸入內容,依照是否取消及答案是否正確來決定回復的結果。可以看到SweetAlert可以設定的參數真的是不少啊!

使用themes

SweetAlert也內建提供了facebook、google及twitter的themes,只要載入相關的css檔,即可看到與社群網站類似的style。

類似資源

  • Bootbox.js:BootBox.js是一款以bootstrap的modal(也就是dialog)為基礎設計出來的library,可以讓你省去使用bootstrap modal前要加入一堆HTML程式碼的麻煩
  • Vex:Vex是一款很炫麗的dialog library,可以一次開多個dialog,彈性也很高,且檔案只有約5.5kb。
  • SweetAlert for Bootstrap:SweetAlert for Bootstrap把原來的SweetAlert加上了更符合bootstrap配色的樣式,若本來就有在使用bootstrap的話,非常適合搭配使用。
  • ngSweetAlert:SweetAlert的AngularJs版本。

不正經閒聊

連dialog設計都要面面俱到,才是前端開發人員應盡的義務阿XD


上一篇
[Day 12]toastr.js - 美化你的通知訊息
下一篇
[Day 14]Reveal.js - 用前端技術完成酷炫簡報
系列文
前端UI軍火庫31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言