全文 / 段落

首頁

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

Demo

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

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

已知問題

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

使用方式

  1. 下載 jquery.jsjquery.msgPlay.js 放到你的主機上,然後在網頁的 head 區段引入它們,例如:
    <script type="text/javascript" src="jquery-1.2.3.js"></script>
    <script type="text/javascript" src="jquery.msgPlay.js"></script>
  2. jQuery 物件就可以使用 msgPlay 方法了,例如:
    jQuery(document).ready( function($) {
      $("#demo").msgPlay();
    });

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

選項

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

名稱預設值用途
speed70文字播放速度(每多少毫秒播一個字)
elemSpeednull元素節點(例如圖片)的播放速度(毫秒),值為 null 的話就直接顯示
forwardnull值為 jQuery 搜尋用的 expression 字串,符合的元素會被當成「快轉」按鈕。找不到的話會自動建立
backnull符合的元素會被當成「後退」按鈕
nextnull符合的元素會被當成「下一頁」按鈕
pageExprnull值為 jQuery 搜尋用的 expression 字串,每個符合的元素會被視為一個分頁
actnullact 陣列用於在特定元素上執行指定動作,詳細請參考 act 說明
onPageStartnullcallback: 頁面開始播放時(逐字顯示)
onPageDumpnullcallback: 頁面開始播放時(一次顯示整頁)
onForwardnullcallback: 文字開始快轉時
dump'back'逐字播放或一次顯示整頁,值可以是 'back', 'none', 'used''all',詳細請參考 dump 說明
removeUnusedtrue是否移除不符合 pageExpr 的頁面元素,不移除的話就會顯示
trimTexttrue是否移除文字節點前後的空白,不移除的話空白會被當成一個字來播放
keepInvisibletrue是否隱藏原本就隱藏的元素,設為 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() 以變更播放內容。