首頁

msgPlay 是一個 jQuery 的 plugin，像遊戲對話框一樣逐字播放（顯示）頁面上的內容。
專案放在 msgplay - Google Code msgplay - GitHub；若有問題或意見，可聯繫 [email protected]

Demo

這是使用 $("p#demo").msgPlay() 產生的效果，您認為適合做遊戲對話框嗎？
若要看更多 demo，可參考「msgPlay Demo Page」

最後的「重播」按鈕執行的是 $("p#demo").msgPlay()

已知問題

若發現任何問題，請通知 [email protected]

~~在 Opera 上碰到元素節點之後，會無法逐字播放，變成一次顯示整個文字節點。~~（Opera 9.5 已無此狀況） Opera 9.26 2008-02-27

使用方式

下載 jquery.js 和 jquery.msgPlay.js 放到你的主機上，然後在網頁的 head 區段引入它們，例如：

<script type="text/javascript" src="jquery-1.2.3.js"></script>
<script type="text/javascript" src="jquery.msgPlay.js"></script>

jQuery 物件就可以使用 msgPlay 方法了，例如：

jQuery(document).ready( function($) {
  $("#demo").msgPlay();
});

進階用法請參考「選項」或「msgPlay Demo Page」

選項

可用選項如下表，例如 $("#demo").msgPlay( { speed: 100 } ); 會把播放速度設為 100 毫秒。

名稱	預設值	用途
speed	70	文字播放速度（每多少毫秒播一個字）
elemSpeed	null	元素節點（例如圖片）的播放速度（毫秒），值為 null 的話就直接顯示
forward	null	值為 jQuery 搜尋用的 expression 字串，符合的元素會被當成「快轉」按鈕。找不到的話會自動建立
back	null	符合的元素會被當成「後退」按鈕
next	null	符合的元素會被當成「下一頁」按鈕
pageExpr	null	值為 jQuery 搜尋用的 expression 字串，每個符合的元素會被視為一個分頁
act	null	act 陣列用於在特定元素上執行指定動作，詳細請參考 act 說明
onPageStart	null	callback: 頁面開始播放時（逐字顯示）
onPageDump	null	callback: 頁面開始播放時（一次顯示整頁）
onForward	null	callback: 文字開始快轉時
dump	'back'	逐字播放或一次顯示整頁，值可以是 'back', 'none', 'used' 或 'all'，詳細請參考 dump 說明
removeUnused	true	是否移除不符合 pageExpr 的頁面元素，不移除的話就會顯示
trimText	true	是否移除文字節點前後的空白，不移除的話空白會被當成一個字來播放
keepInvisible	true	是否隱藏原本就隱藏的元素，設為 false 的話會把隱藏的元素也顯示出來

act : [[expr, callback, option ]]

expr: jQuery 搜尋用的 expression 字串，播放到符合的元素時，便會呼叫指定的 callback。
callback: 參數有 elem（目前的 DOM 元素）、options（msgPlay 內部的 options）、pages（msgPlay 內部的分頁資料）。
也可以擴充 $.fn.msgPlay.actFns 以便使用函數別名來指定 callback。
option (optional): 可以指定 'pause'（元素播放結束時，暫停播放，按下 Forward 按鈕才會繼續）或 'queue'（元素套用 jQuery 的 Effects 時暫停播放，效果結束後才會繼續）。

例：

$("#demo").msgPlay({ act:
  [
    [ 'img', function(elm) {$(elm).fadeIn(2000);}, 'queue' ],
    [ 'p', null, 'pause' ],
    [ 'br.log', 'log' ]
  ]
});

則播到圖片時，會等圖片完全淡入後才繼續播後面的字；
播到 <p> 標籤時，元素的內容播完時會暫停，等到按下 Forward 按鈕才會繼續（不過這邊沒有那個按鈕）；
播到 class 為 log 的 <br /> 時，會執行在 $.fn.msgPlay.actFns 裡寫好的 log 函數。

dump :

back: 下一頁永遠逐字播放；上一頁永遠直接顯示。
none: 下一頁、上一頁都永遠逐字播放。
used: 若分頁已播過就直接顯示，否則就逐字播放。
all: 下一頁、上一頁都永遠直接顯示。

運作原理

msgPlay 先將元素的子節點全部用 hide() 隱藏（若是文字節點則將內容暫存後，設為空字串）。
播放時則使用 setTimeout 逐一顯示元素節點，或將文字內容逐字寫入文字節點中。

附註

msgPlay 會針對頁面元素，使用 jQuery.data() 儲存一些資料。
對播放中的元素再次套用 msgPlay() 的話，因播放需要而被隱藏的內容，不會還原為可見的。
開始播放後才加入的 DOM 節點，不會被視為新的分頁；可以先重設元素內容後，再套用 msgPlay() 以變更播放內容。