Yijen's blog

關於部落格
繪圖 | 食記 | Web前端技術 | HTML | CSS | JavaScript 研究
  • 324196

    累積人氣

  • 60

    今日人氣

    0

    訂閱人氣

讓你的 alert 視窗變美麗 — 超棒的 Js Plugin - SweetAlert 介紹

當然在開始玩耍之前,先來複習比對一下兩者的差異,看看原本的有多醜!

Before

After

套用SweetAlert之後的UI,不單單只是變美而已,還有一些動畫來讓彈出訊息這件事不再那麼令人反感,而且可讀性更高!

How to use it? 如何使用?

和一般正常的 JavaScript 一樣,會有一支 .js 檔案,然後外觀部分有另外一支 .css 檔案,將二支檔案抓下來之後,放入你的專案、網頁、Blog裡面。

試玩區

HTML

	Warning!

JavaScript

	$('.js-sweetAlert').click(function(){
		sweetAlert("Oops!", "你犯了個錯", "error");
	});

這裡有一個按鈕,按下它看看吧! Warning!

接著試一下正向提醒的類型…

	$('.js-sweetAlert').click(function(){
		sweetAlert("Congrats", "你做到了!", "success"); // 第3個參數換了
	});

咦?這裡又有一個按鈕,按下它看看吧! Try me!

結語

這個 plugin 完成度非常地高,除了上列簡易用法 sweetAlert 以外,也可以用 swal 函式來做更多客製化的訊息設計。最厲害的是,SweetAlert 作者不只完成了這支美麗的 Plugin,連官方文件跟展示用法都以很高明的方法呈現,所以小弟就不再寫些廢話啦!有興趣想玩玩的人可以前往 SweetAlert Project Page 去朝聖囉。

Source: http://t4t5.github.io/sweetalert/

相簿設定
標籤設定
相簿狀態