noty – jQuery通知插件全面解析
來源:易賢網(wǎng) 閱讀:2445 次 日期:2016-06-27 14:04:30
溫馨提示:易賢網(wǎng)小編為您整理了“noty – jQuery通知插件全面解析”,方便廣大網(wǎng)友查閱!

下面小編就為大家?guī)硪黄猲oty – jQuery通知插件全面解析。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。

noty是一個jQuery的通知(信息提示)插件,靈活輕便,是一個非常棒的用于替代傳統(tǒng)提示對話框的插件。

當(dāng)前最新版本為2.1.0: 從 https://github.com/needim/noty 可以獲取最新源代碼。

布局樣式

支持的提示樣式,每種樣式都有預(yù)定義好的css樣式:

•alert: 默認(rèn)的提示樣式

•success: 成功

•error: 錯誤

•warning: 警告

•information: 信息

支持的布局位置:

•top: 頂部,長條狀

•topLeft/topCenter/topRight: 頂部的左/中/右位置, 短條狀

•center/centerLeft/centerRight: 正中/中左/中右, 短條狀

•bottomLeft/bottomCenter/bottomRight: 底部左/中/右位置, 短條狀

•bottom: 底部,長條狀

除上以上布局方式之外,還有一種用于自定義布局的inline方式,需要引入layouts/inline.js

安裝腳本

從https://github.com/needim/noty 下載最新源碼,然后引入相應(yīng)腳本文件:

<!--jQuery文件-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<!--noty主文件-->

<script type="text/javascript" src="js/noty/jquery.noty.js"></script>

<!--noty提示信息位置的文件, 需要哪些位置就引入對應(yīng)的腳本,這里為center,可以添加多個布局文件-->

<script type="text/javascript" src="js/noty/layouts/center.js"></script>

<!--noty主題樣式文件,-->

<script type="text/javascript" src="js/noty/themes/default.js"></script>

如果你使用的是jQuery 1.6以下版本, 那么還需要引入promise.js文件。

使用方法

一般情況下,直接使用noty(options)全局函數(shù)來創(chuàng)建提示信息即可:

noty({text: "noty - jQuery 通知插件 - 腳本之家 -http://jb51.net/jesu/", layout: "center", timeout: 5000})以上代碼將創(chuàng)建一個在屏幕中間顯示的提示信息,并在5秒后自動關(guān)閉。

注意:如果沒有對應(yīng)布局的js文件將不會被正常呈現(xiàn)。

默認(rèn)選項

noty有以下可供設(shè)置的選項:

$.noty.defaults = {

  layout: 'top', // 默認(rèn)布局

  theme: 'defaultTheme', // 默認(rèn)主題

  type: 'alert', // 默認(rèn)類型

  text: '', //默認(rèn)文本

  dismissQueue: true, // 是否添加到隊列

  template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>', // 消息默認(rèn)模板

  animation: { //默認(rèn)的顯示及關(guān)閉動畫

    open: {height: 'toggle'},

    close: {height: 'toggle'},

    easing: 'swing',

    speed: 500 // opening & closing animation speed

  },

  timeout: false, // 自動關(guān)閉時間,默認(rèn)不會自動關(guān)閉

  force: false, // 添加到隊列開始處

  modal: false, // 遮罩

  maxVisible: 5, // 一個隊列的消息最大可見數(shù)量, 即一個隊列中同一時間最多顯示的數(shù)量

  closeWith: ['click'], // ['click', 'button', 'hover'] 關(guān)閉的事件,默認(rèn)點擊消息關(guān)閉

  callback: { // 回調(diào)函數(shù)

    onShow: function() {}, // 顯示之前

    afterShow: function() {}, // 顯示之后

    onClose: function() {}, // 關(guān)閉之前

    afterClose: function() {} // 關(guān)閉之后

  },

  buttons: false // 按鈕,用于在彈出的消息框中顯示按鈕

};

自定義容器

通過noty(options)函數(shù)創(chuàng)建的提示信息默認(rèn)被添加到body上, noty支持在自定義容器中顯示提示的方式:

$('.custom_container').noty({text: "noty - jQuery 通知插件 - 腳本之家- http://www.jb51.net/jesu/"}); 

按鈕及確認(rèn)對話框

可以像這樣設(shè)置提示信息上的按鈕:

noty({

 text: '你要繼續(xù)嗎?',

 buttons: [

  {addClass: 'btn btn-primary', text: '確定', onClick: function($noty) {

    // this = button element 也就是當(dāng)前的按鈕

    // $noty = $noty element 也就是當(dāng)前這個提示信息對象

    $noty.close();

    noty({text: '你點擊了確定按鈕', type: 'success'});

   }

  },

  {addClass: 'btn btn-danger', text: '取消', onClick: function($noty) {

    $noty.close();

    noty({text: '你點擊了取消按鈕', type: 'error'});

   }

  }

 ]

});

官方DEMO中的確認(rèn)提示對話框也是這么創(chuàng)建的。

API

主要有以下api可用:

•$.noty.get(id): 通過id獲取noty對象, 一般用不到

•$.noty.close(id): 關(guān)閉一個noty提示

•$.noty.clearQueue(): 清空隊列中的noty

•$.noty.closeAll(): 關(guān)閉所有noty提示

•$.noty.setText(id, text): 更新noty提示信息的文本內(nèi)容

•$.noty.setType(id, type): 更新noty提示信息的類型

一般情況下通過實例變量來訪問它的屬性/方法:

var n = noty({text: "noty - jQuery 通知插件 - 腳本之家 - http://www.jb51.net/jesu/"});

n.setText("囧月 - lwme.cnblogs.com"); // 更新內(nèi)容

n.setTimeout(10000); // 設(shè)置超時時間

n.setType("error"); // 更新提示類型

n.close();

// 此外, noty還有幾個屬性用于查看它的狀態(tài)

n.closed // 是否已關(guān)閉

n.showing // 是否正在顯示

n.shown // 是否已顯示

而$.noty空間最常用的就是clearQueue()和closeAll()方法了,其他幾個方法一般不被使用,主要是因為noty的id是隨機生成的。

除了文檔里公開的,noty還有一些沒在文檔里公開的屬性:

•$.noty.queue 消息隊列, Array

•$.noty.layouts 可以獲取當(dāng)前加載的布局, Object

•$.noty.themes 獲取可用的主題, Object

•$.noty.store 獲取當(dāng)前顯示在頁面中的noty對象,然后可以通過api進行操作, Array

•$.noty.returns 獲取noty(options)函數(shù)返回的值, 默認(rèn)為object返回noty對象,可以改成其他值返回noty對象的id

此外,noty還提供了方法用來替代window.alert函數(shù):

•$.noty.consumeAlert 替代window.alert

•$.noty.stopConsumeAlert 取消替代

noty整體設(shè)置比較簡單,沒有過多的參數(shù)設(shè)置,使用起來也很方便,特別是默認(rèn)不用按鈕來讓用戶點確定這點特別值得稱贊,體驗相當(dāng)不錯。

以上這篇noty – jQuery通知插件全面解析就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考

更多信息請查看網(wǎng)絡(luò)編程
易賢網(wǎng)手機網(wǎng)站地址:noty – jQuery通知插件全面解析
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)!

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號
云南網(wǎng)警備案專用圖標(biāo)
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號:hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報警專用圖標(biāo)