2007/01/16

版面 Script 更新

最近有空,又把這個樣版翻修了一下。
首先是這個應該實裝的繼續閱讀功能,我終於加上去了(之前是有加過但不知怎的拔掉了)
也為他加上動態展開的功能,畢竟本頁採用相當多 JavaScript 的技術,多一項也無妨。

其次是本應修正的,IE瀏覽回應框格時有機會會併成一列的問題,
這個問題早在 Pixmicat! 就有了,因為 IE 沒有 display: table; 屬性,以致於不能支援。
後來發現有 hack 技巧便取巧使用,頁面載入後呼叫事先寫好的 IEdivfix() 來修正。
但是此頁已經是使用 AJAX 動態抓取內容來擺放,所以頁面上的元素會一直存在,
如果每次都用這招,會造成重複修正的現象,造成版面混亂。

解決方案是利用 DOM 的 document.getElementById() 和子 node .getElementsByTagName() 完成。
讀完回應放到特定的 DIV 後,將此 DIV 擁有的子 DIV 作掃描,並對其修正。
這樣就鎖定了修正範圍,不會對頁面其他元件造成破壞。

再者,加上了動態引用標亮的設計,但只限回應。
載入回應內容完成後丟入指定 DIV 容器內,再掃描子 DIV 的特定內容,對其作更改。
使用 RegExp replace 完成此事。
附帶一提使用 XMLHttpRequest (更正為 .innerHTML) 取得的 HTML 內容似乎會經過解析,
原本的 > 變成 &gt;、 <br /> 變成 <br> (Firefox), <BR> (IE, Opera)。
似乎幫我私底下動了手腳,讓我在除錯這方面還煩惱了一些時間。

最後,修改 CSS 使 <blockquote> 顯著不少,這樣閱讀也方便。

3 則留言:

  1. 不知是否可以請問你
    javascript:showMoreContents這組javascript怎麼用啊

    回覆刪除
  2. 喔,那是我自己寫的。
    程式碼列於下:
    /* getElementById */
    function $(i){ return document.getElementById(i); }
    /* 顯示文章所有內容 */
    function showMoreContents(tID){
    var parent = $('ThreadPost_'+tID); // 討論串 DIV 物件
    var spans = parent.getElementsByTagName('span');
    for(var i = 0; i < spans.length; i++){
    if(spans[i].className=='content') spans[i].className = ''; // 清除 SPAN class 設定
    if(spans[i].id=='More_'+tID) spans[i].className = 'hidden'; // 隱藏 (繼續閱讀) 連結
    }
    }

    就是自指定的討論串DIV物件下搜尋class為content的span物件,
    並將其class清空(就不會套用content的 display:none;)
    另外將顯示(繼續閱讀)的span(id=More_XXX)給隱藏(修改class)

    回覆刪除
  3. 今日把回應單頁(也就是永久連結)內顯示的回應也作了處理。
    使用 IE 瀏覽的朋友再也不會看到回應框格併成一列。
    也讓動態標亮在瀏覽永久連結頁面時能作用。

    回覆刪除