全文 / 段落

act

act : [[expr, callback, option ]] 指定特定元素的播放方式，callback 的參數為 elem, options, pages。 詳細請參考 選項：act 說明。 

$("#demo").msgPlay({
  act:
  [
    ['i', function(i){$(i).css('color','yellow'); }],
    ['p', function(elem,options){
      $(elem).css({backgroundColor:'green'}).after('每'+options.speed+' ms 一個字');
    }],
    ['hr', function(elem,options,pages){$(elem).before('<p>總頁數：'+pages.length+'</p>');}],
    ['hr ~ span.highlight:eq(2)', function(i){$(i).css('backgroundColor','purple');}]
  ],
  forward: 'auto'
});

Demo

開始
斜體字 被變成黃色。

把 <P> 標籤變成綠色背景，並顯示目前播放速度：

候選元素 0 候選元素 1 候選元素 2 候選元素 3


act（2）act option

act 的第三個參數可設為 pause 或 queue，
可以根據文件內容，控制播放的停頓行為。 

$("#demo").msgPlay({
  act:
  [
    ['i', null, 'pause'],
    ['big', function(i){$(i).fadeIn(3000);}, 'queue'],
    ['img', function(i){$(i).fadeIn(3000);}],
    ['table', null, 'pause']
  ],
  forward: 'auto'
});

Demo

開始
  1. 播放至 斜體字 時暫停。
  2. 遇到有 queue 選項的 <big> 標籤，
    停兩秒（2000 ms）淡入後繼續後面的字；
  3. 遇到沒有 queue 選項的 <img> 標籤，
    例如 demo，不要停兩秒。
  4. pause 的時機在元素內容全部播放完畢時：
    THTH
    TDTDTD
    TDTD （pause 在這之後）
    這個 Demo 到此結束。

elemSpeed

elemSpeed 是元素節點的播放速度。

$("#demo").msgPlay({
  elemSpeed: 300,
  forward: 'auto'
});

Demo

開始
文字節點不受影響，元素節點（例如圖片）會變成：

demodemo demodemo demodemo demodemo demodemo demodemo

間隔 300 毫秒才會顯示下一張（預設會一次全部顯示。）
elemSpeed 也會影響文字節點與元素節點之間的播放間隔：

文字元素文字元素文字元素文字元素文字元素


雜項設定

dump、removeUnused、trimText、keepInvisible 使用例。

$("#demo").msgPlay({
  dump: 'none',
  removeUnused: false,
  trimText: false,
  keepInvisible: false,
  
  pageExpr: 'div',
  forward: '#ex-btn-forward2',
  back: '#ex-btn-back2',
  next: '#ex-btn-next2'
});

Demo

開始
trimText： false

文字節點前後的空白，會被當作一個字來播放。
例如 …稍等… 因為 <i> 前後空白的關係會拖長時間……

dump： 'none'

即使按「上一頁」也會逐字播放。（預設為 'back'，表示「上一頁」不會逐字播放。）

因為 removeUnused 值為 false，
所以這個 <P> 元素不會被移除。

keepInvisible： false

原本不顯示的東西（），播放的時候會顯示出來。

FORWARD BACK NEXT

callback

onPageStart、onPageDump、onForward 使用例。

$("#demo").msgPlay({
  onPageStart: function(){
    $('#demo-list').append('<li class="red">onPageStart</li>');
  },
  onPageDump: function(){
    $('#demo-list').append('<li class="green">onPageDump</li>');
  },
  onForward: function(){
    $('#demo-list').append('<li>onForward</li>');
  },
  
  pageExpr: 'div',
  forward: '#ex-btn-forward3',
  back: '#ex-btn-back3',
  next: '#ex-btn-next3',
  removeUnused: false
});

Demo

開始
Page 1：作為開頭，我想我就不要進行太過冗長的鋪陳了，狀態會記錄於下方的列表。
Page 2：那麼且讓我們直搗問題的核心，然後平靜地觀察，狀態會記錄於下方的列表。
Page 3：在此我必須再一次地重申我之前曾經再三闡述的，狀態會記錄於下方的列表。
Page 4：只要能夠掌握住回呼函數的回呼時機就可以理解，狀態會記錄於下方的列表。
Page 5：相信透過連番探究，各位應已沐浴光明喜樂之中，狀態會記錄於下方的列表。
FORWARD BACK NEXT
  1. Demo 記錄開始。

更換內容

開始播放後，再修改元素內容也無法增加分頁；
但可以修改元素內容後，再套用 msgPlay() 重新播放。 

$("#demo").msgPlay({
  pageExpr: 'div',
  forward: '#ex-btn-forward4',
  back: '#ex-btn-back4',
  next: '#ex-btn-next4',
  act: [
    ['img.face',function(i){$(i).fadeIn('slow');}],
    ['br.fire',function(){$('#demo-ac-body img.face:first').attr('src','image/demo100_alt.jpg');}]
  ]
});

Demo 中的兩個按鈕設有 onclick = "demo_ac(this)"，
demo_ac 會修改 #demo-ac-body 元素內容後，再套用 msgPlay() 播放。 

function demo_ac(obj) {
  if( jQuery(obj).parents('#demo-ac-body').length ) {
    jQuery(obj).attr('disabled','disabled');
    var ans = (obj.value=='好') ? '#ac-yes' : '#ac-no';
    jQuery('#demo-ac-body').load( 'demo_body.html ' + ans, function(){
      $(this).children(':first').msgPlay(demo_options['demo-alt_content']);
    });
  }
};

Demo

開始
face 愛新覺羅：

進言就是要一個字一個字，說清楚。
朕示範給你看，
不溫不火，你記得這個分寸。


face 愛新覺羅：

BTW，想學甩手功嗎？


face 愛新覺羅：

居然不應朕的問題……


FORWARD BACK NEXT