程式搖滾

2012年4月20日星期五

SoundManager 延遲初始化

在使用JavaScript做音樂播放上
SoundManager是個很好的工具，可以偵測環境以Flash或HTML5做播放
不過在設計上有一個很大的問題是
當載入SoundManager的JS檔案
他就會立刻initial產生出一個window.soundManager物件
讓你可以用global方式使用window.soundManager做聲音的控制

有問題的是
在物件初始化完成之前
你必需要使用soundManager.url 設定要使用的swf檔案路徑

以官網上的sample來看,設定url的時間點都是在跟init的程序搶時間
除非你在網頁上以inline的方式寫入soundManager.url
否則如果這設定在init程序完成後才設定,那麼soundManager抓不到swf
而造成使用失敗

要如何禳soundManager可以延遲init,以保證soundManager可以正常運作
1.在載入soundManager.js前,先設定

window.SM2_DEFER = true;

2.在載入soundManager.js後
執行

window.soundManager = new SoundManager();    
soundManager.url = "swf/";
soundManager.beginDelayedInit();

這樣就可以保證可以安全運作了

2012年4月7日星期六

以iScroll建構Mobile Web頁面

希望建制一個有header content footer的網頁,header與footer固定在上下
content可以scroll的頁面,scroll部份使用iScroll來處理
相關注意要項如下
一.網頁

 <div class="wrapper">  
      <div class='header'></div>  
      <div id='myContent' class="content">  
           <div class='scroller'><div class='itemContainer'></div></div>  
      </div>  
      <div class="footer"></div>  
 </div>

要scroll的內容下需有一個唯一的子節點(div或ul都可）,iScroll會對這個div做scroll
在這裡就是對content下的scroller這div
也就是說你在這下面塞的東西都會被scroll

二.CSS
設定一個有footer有header的頁面
1.架構
wrapper,content,footer,header,這四個主要架構要以
position:absolute來定位,而在z-index層次上
wrapper在最下層
content在中間層
footer,header在最上層
在這主要架構下的內部分層,就不需要用absolute來定位
2.尺寸大小
header與footer在高度上定好絕對的高度,寬度以100%設定來與wrapper保持同樣寬度
content因為可能會因為螢幕大小變化或旋轉螢幕而需要調整
這部份就需要靠JS動態改變高度
3.wrapper 整個頁面包裝

.wrapper{
  position:absolute;z-index:1;//以絕對位置設定當作最下層layer
  top:0;left:0;//設定貼在browser的最左上方
  margin:0;padding:0;
  width:300px;//可以用%設定
  height:300px;     
}

4.header

.header{
  position:absolute;z-index:3;//設定在最上層
  top:0;left:0;//設定貼在wrapper的靠左上方
  margin:0;padding:0;
  width:100%;//設定與wrapper相同寬度
  height:50px;//設定header的絕對高度     
}

5.footer

.footer{
  position:absolute;z-index:3;//設定在最上層
  bottom:0px;left:0;//設定貼在wrapper的靠左下方
  margin:0;padding:0;
  width:100%;//設定與wrapper相同寬度
  height:50px;//設定header的絕對高度     
}

6.content
.content被設定到iscroll,重點是
.content要設定overflow:auto,高度則透過js來設定到達(wrapper-header-footer)高度
.content以下的container絕對不要設定高度,否則內容就無法scroll了

.content{
  position:absolute;z-index:2;//設定在中間層
  top:50px;//設定在header的下方,也就是設定header的高度
  left:0;
  margin:0;padding:0;
  width:100%;
  height:200px;//設定wrapper扣掉header與footer後的高度,這部份由js動態改變值
  overflow:auto;//設定內部的所有內容在超過的時候以scroll顯示
  >.scroller{
    width:100%;//注意千萬不要設定height,內容超過時才可以scroll
    >.itemContainer{
      width:100%;//注意千萬不要設定height,內容超過時才可以scroll
    }       
  }
}

三.JS
1.instance
要當作scroll的DOM container確定已經產生好才去產生iScroll
設定container要以id設定,不要用class

window.scroll=new iScroll('myContent',{
  hScrollBar:false,
  vScrollBar:true,
  hideScrollBar:false
})

2.refresh
在更新container內容,後需執行refresh動作,
且包在setTimeout內執行

setTimeout(function(){
  window.scroll.refresh();
},0)

2012年2月22日星期三

Backbone.js Model 06︰Sample

1.目標:
希望view監聽model的id變化,當id改變時,model抓取新的資料
依照資料做view外觀的改變

2.原作法：
監聽model上id變化,view跟著改變

model.set('id',xxx)
model.fetch()
model.on('change:id',this.doSomething)

3.問題:
當model id改變時,view馬上就收到通知
但此時,資料不見得已經fetch完成,可能出錯

4.解法:
在model內部監聽自己id變化,當id改變時
在model內加入isLoading的屬性=true
在fetch結束後,改變isLoading的屬性=false
view不再監聽model的id,改為監聽model的
isLoading

window.MyModel=Backbone.Model.extend({
    url:'js/data.json',
    initialize:function(){
        _.bindAll(this,'itemChange');
        this.on('change:id',this.itemChange);        
    },
    itemChange:function(){
        var that=this;
        this.set('isLoading',true);            
        this.fetch({
            success:function(response,model){                
                that.set('isLoading',false);
            }
        })
    }        
})
window.MyView=Backbone.View.extend({    
    initialize:function(){
        _.bindAll(this,'statusChange');
        this.model.on('change:isLoading',this.statusChange);
    },
    statusChange:function(){
        console.log('loading status='+this.model.get('isLoading'))    ;
    }    
})
window.model=new MyModel();
window.view=new MyView({
    model:window.model
})
model.set('id',1);