Changes between Version 10 and Version 11 of oid/WorkLog/09-02-04


Ignore:
Timestamp:
Feb 4, 2009, 6:36:54 PM (15 years ago)
Author:
jazz
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • oid/WorkLog/09-02-04

    v10 v11  
    345345  };
    346346}}}
     347 * 先看過 Element 類別的定義,之後我們回過頭來看 LoadElement 做些什麼
    347348{{{
    348349  function LoadElement() {
     
    451452    });
    452453  };
    453 
     454}}}
     455 * 這裡補記一下 BigEvent 裡面一段神奇的 Code ,從這段程式碼可以感受到 jQuery 可以在 Runtime 把 click 事件註冊上去,這真是一個神奇的事情啊!!
     456{{{
     457      var event_link = $('<a href=#>' + me.name + '</a>');
     458
     459      ### 這裡其實只是產生了 DOM 裡面的一段如 <a href="#">三顧茅蘆</a> 的程式碼
     460      ### 透過 Firebug 去觀察 DOM 也只看到這樣的結果
     461      ### 但是因為 DOM 是由 jQuery 產生的,因此底下這幾行所定義的 click 事件處理函式
     462      ### 會因為不同的連結而有所不同
     463
     464      event_link.click(function(){
     465        if (me.is_details_shown) {
     466          me.hideDetails();
     467        } else {
     468          me.showDetails();
     469        }
     470
     471        ### 呼叫 Redcliff.updateOverlay(type, id)
     472        ### 一開始會先用 Redcliff.clearOverlays() 把目前的 Overlay 清掉
     473        ### 如果 type = 'E' , 從 BIG_EVENT 讀出對應的 event_id 跟 element_id
     474        ### 如果 type = 'P' , 從 PEOPLE 讀出對應的 event_id 跟 element_id
     475
     476        G_MAP.updateOverlay('E', me.id);
     477
     478        ### 呼叫 Redcliff.setCenter(center, level)
     479        ### 也就是把目前 Google Map 的中心位置設到 GLatLng(32.010, 111.939),比例尺設為 8
     480
     481        G_MAP.setCenter(me.center, 8);
     482
     483        ### 參考 http://www.google.com.tw/intl/zh-TW/apis/gadgets/tools.html#Analytics_Gadgets
     484        ### 這是為了作 Google Analytics 網址點選統計分析用的
     485
     486        _IG_Analytics(UAACCT, '/click/eventLink/' + me.name);
     487        return false;
     488      });
     489      link_cell.append(event_link);
     490}}}
     491 * 繼續看 LoadPeople 在做什麼
     492{{{
    454493  function LoadPeople() {
     494
     495    ### people.json 的範例
     496    ### {"name" : "曹操" , "zi" : "孟德" , "hao" : null ,
     497    ###  "event_ids" : [3 , 4 , 9 , 10 , 13 , 17 , 19 , 21 , 22 , 23 , 24 ] ,
     498    ###  "element_ids" : [2 , 3 , 9 , 10 , 11 , 14 , 23 , 25 , 29 , 30 , 32 , 34] ,
     499    ###  "birth" : 155 , "death" : 220 , "birthplace" : "沛國譙縣" , "desc" : "曹操生於官宦世家...略" ,
     500    ###  "kindom" : "魏" , "wiki" : "http://zh.wikipedia.org/w/index.php?title=%E6%9B%B9%E6%93%8D&variant=zh-tw" ,
     501    ###  "pic" : "http://laiba.tianya.cn/laiba/images/274/12295005301924842653/A/1/o.png" ,
     502    ###  "center" : {"lat" : 31.224 , "lng" : 112.818}},
     503
    455504    _IG_FetchContent(URL.people_url, function(data) {
    456505      var json = eval(data);
    457506      $.each(json, function(index, raw_people) {
    458507        var people = new People(raw_people)
     508
     509    ### 呼叫 setItem 產生二維陣列
     510    ### 結果應該是
     511    ### PEOPLE.item["曹操"].id          = "曹操"
     512    ### PEOPLE.item["曹操"].name        = "曹操"
     513    ### PEOPLE.item["曹操"].nick        = "孟德"
     514    ### PEOPLE.item["曹操"].birth       = 155
     515    ### PEOPLE.item["曹操"].death       = 220
     516    ### PEOPLE.item["曹操"].birthplace  = "沛國譙縣"
     517    ### PEOPLE.item["曹操"].desc        = "曹操生於官宦世家,..略..."
     518    ### PEOPLE.item["曹操"].kingdom     = "魏"
     519    ### PEOPLE.item["曹操"].event_ids   = [3 , 4 , 9 , 10 , 13 , 17 , 19 , 21 , 22 , 23 , 24 ]
     520    ### PEOPLE.item["曹操"].element_ids = [2 , 3 , 9 , 10 , 11 , 14 , 23 , 25 , 29 , 30 , 32 , 34]
     521    ### PEOPLE.item["曹操"].pic         = "http://laiba.tianya.cn/laiba/images/274/12295005301924842653/A/1/o.png"
     522    ### PEOPLE.item["曹操"].digest      = null
     523    ### PEOPLE.item["曹操"].event       = null;
     524    ### PEOPLE.item["曹操"].center      = GLatLng(31.224 , 112.818)
     525    ### PEOPLE.item["曹操"].node        = PeopleNode($('#character_list'), this); ## 在 character_list 底下加入 DOM
     526    ### PEOPLE.item["曹操"].is_shown    = true;
     527
    459528        PEOPLE.setItem(people.name, people);
    460529        PEOPLE_ARRAY.push(people);
    461530      });
     531
    462532      ## 把 LOAD_STATES 加 1 - 此時 LOAD_STATES = 3
    463533      LoadDone();
     
    465535  };
    466536}}}
    467