作者 主題: 請問有關於如何將視窗固定在最下方  (閱讀 11993 次)

0 會員 與 1 訪客 正在閱讀本文。

alexcorn

  • 可愛的小學生
  • *
  • 文章數: 19
    • 檢視個人資料
各位前輩安安:
  小弟以圖的方式來說明,煩請各位大大解惑,謝謝
  下圖假設為一個IE視窗,視窗只能看到2列,而在使用者按了「新增列」的按鈕後,列數增為三列,
  若使用者要看到第三列的話,還需要移動滾軸才能看到第三列,
  問題點:希望在按了「新增列」的按鈕後,畫面可以變為圖二(畫面定在視窗最下方),請問這個要怎麼處理才能達到小弟需要的效果。
  若小弟有表達不清楚的地方,煩請各位大大告知,謝謝!
  敬祝  順心順意

圖一:
┌───────────────┬─┐
│ ┌────────┐    │滾│               
│ │第一列     │    │軸│
│ └────────┘    │ │
│ ┌────────┐    │ │
│ │第二列     │    │ │
│ └────────┘    │ │
│ ┌────────┐    │ │
│ │按鈕(新增列) │    │ │
│ └────────┘    │ │
└───────────────┴─┘

圖二
┌───────────────┬─┐
│ ┌────────┐    │ │
│ │第二列     │    │ │
│ └────────┘    │ │
│ ┌────────┐    ├─┤
│ │第三列     │    │滾│
│ └────────┘    │軸│
│ ┌────────┐    │ │
│ │按鈕(新增列) │    │ │
│ └────────┘    │ │
└───────────────┴─┘





slime

  • 俺是博士!
  • *****
  • 文章數: 1692
    • 檢視個人資料
回覆: 請問有關於如何將視窗固定在最下方
« 回覆 #1 於: 2008-03-24 21:35 »
如果這樣做不知道行不行:
代碼: [選擇]
<a name="line1">第一列</a>
<a name="line2">第二列</a>

而在使用者新增一列後, 把網頁變成
代碼: [選擇]
<a name="line1">第一列</a>
<a name="line2">第二列</a>
<a name="line3">第三列</a>
然後把網址變成:
代碼: [選擇]
....#line3
冷笑話: 我的 IP 是 127.0.0.1

alexcorn

  • 可愛的小學生
  • *
  • 文章數: 19
    • 檢視個人資料
回覆: 請問有關於如何將視窗固定在最下方
« 回覆 #2 於: 2008-03-25 09:53 »
謝謝slime前輩的回覆,
小弟有依前輩的指導去實作,實作如下:
1、網址我有設定讓它附加 #line<{$test}>  ($test為變數,值為欄數的最大值)
  確定在每次新增時,該變數有累加。
2、小弟在該表格的最下方的隨意一個欄位設置了錨點<a name>欄位值</a>。

結果:
在按了新增欄位時,視窗並沒有自動將視窗移至錨點>"<

煩請各位前輩再指導一下小弟,感激不盡丫!

micmic3

  • 俺是博士!
  • *****
  • 文章數: 1692
    • 檢視個人資料
回覆: 請問有關於如何將視窗固定在最下方
« 回覆 #3 於: 2008-03-25 14:00 »
┌───────────────┬─┐
│ <a name="第二列"></a>
    ┌────────┐    │ │
│ │第二列     │    │ │
│ └────────┘ 
│ <a name="第二列"></a>
│ ┌────────┐    ├─┤
│ │第三列     │    │滾│
│ └────────┘    │軸│
│ ┌────────┐    │ │
│ │按鈕(新增列) │    │ │
│ └────────┘    │ │
└───────────────┴─┘
<a name>欄位值</a>
slime 的意思應該是這樣
然後新增完後  window.location.href= self#第二列

alexcorn

  • 可愛的小學生
  • *
  • 文章數: 19
    • 檢視個人資料
回覆: 請問有關於如何將視窗固定在最下方
« 回覆 #4 於: 2008-03-25 15:00 »
謝謝 micmic3 前輩的解釋,
小弟在公司前輩的指導下,已完成需求,以下為分享:

利用javascript中的scrollIntoView(要注意大小寫)寫一個function如下:

function scrollPage( tid ){
    var obj = document.getElementById(tid);
    obj.scrollIntoView();
}
//tid的部份是要抓取最底下的最後一個值(以好抓為主)

觸動方式:1 以事件觸動  2 在每次開網頁就觸動一次
由於小弟對javascript並不太熟悉,若有表達不清的地方,請見諒,謝謝!

大頭目

  • 憂鬱的高中生
  • ***
  • 文章數: 139
    • 檢視個人資料
回覆: 請問有關於如何將視
« 回覆 #5 於: 2008-03-26 21:51 »
不好意思~~
小弟班門弄斧一下,寫了另一個版本,大家參考參考,如下--
特色=>不用任何參數,可攜性高!
代碼: [選擇]
<script>
function scrollBottom() {
  document.body.scrollTop = document.body.scrollHeight;
}

var line = [];

function addLine() {
  var bbox = document.getElementById("bbox");

  line.push("<p>"+line.length+"</p>");

  bbox.innerHTML = line.join("");
 
  scrollBottom();
}
</script>
<div id="bbox"></div>
<button onclick="addLine()">新增一行</button>

ps.
這個主題,應該改在『網頁設計』的版吧!(不好意思,小小建議!)
« 上次編輯: 2008-03-26 21:54 由 大頭目 »

alexcorn

  • 可愛的小學生
  • *
  • 文章數: 19
    • 檢視個人資料
回覆: 請問有關於如何將視窗固定在最下方
« 回覆 #6 於: 2008-03-27 10:49 »
謝謝 大頭目 前輩的指導,
因為小弟是在寫php時配合網頁輸出所遇到的問題,
所以一時不察就po在此板了,小弟不才,我也不知道怎麼轉po
此文章的需求也已圓滿解決,小弟在此謝謝各位前輩的指導,
此文章就此打住囉!
敬祝 順心順意

zzlong

  • 懷疑的國中生
  • **
  • 文章數: 48
    • 檢視個人資料
    • 香港 PHP 用家社區
回覆: 請問有關於如何將視窗固定在最下方
« 回覆 #7 於: 2008-03-28 11:04 »
若果你要求....
  • 只需在 IE 上成功運行,或
  • 不在乎使用的方法是否符合網路標準,或
  • 不在乎運作的效率
以上的方法是算是完滿解決了你的問題。

須知 window.location.href、document.location.href、Element.scrollTop 等都不是 DOM 標準,這些東西在其他瀏覽器或其他平台未必可以正常運行,其中 location.href 調用時瀏覽器會把網頁重新下載,除了虛耗網路資源和用家時間,也可能使表格中原本輸入了的資料流失。

解決辦法其實很簡單,就是在產生新一列後執行:

document.getElementById("new_row").focus();

這裡 new_row 是「按鈕(新增列)」的 id,瀏覽器會自動跳到得到 focus 的 DOM 元件。你也可以把新一列的 id 傳給 getElementById(),這樣用家可以直接在新一列輸入文字,無需用鼠標點選。

大頭目

  • 憂鬱的高中生
  • ***
  • 文章數: 139
    • 檢視個人資料
回覆: 請問有關於如何將視窗固定在最下方
« 回覆 #8 於: 2008-03-28 15:37 »
若果你要求....
  • 只需在 IE 上成功運行,或
  • 不在乎使用的方法是否符合網路標準,或
  • 不在乎運作的效率
以上的方法是算是完滿解決了你的問題。

須知 window.location.href、document.location.href、Element.scrollTop 等都不是 DOM 標準,這些東西在其他瀏覽器或其他平台未必可以正常運行,其中 location.href 調用時瀏覽器會把網頁重新下載,除了虛耗網路資源和用家時間,也可能使表格中原本輸入了的資料流失。

解決辦法其實很簡單,就是在產生新一列後執行:

document.getElementById("new_row").focus();

這裡 new_row 是「按鈕(新增列)」的 id,瀏覽器會自動跳到得到 focus 的 DOM 元件。你也可以把新一列的 id 傳給 getElementById(),這樣用家可以直接在新一列輸入文字,無需用鼠標點選。

謝謝指教~~

樓上小弟的 Code 不是只能在 IE 跑,FireFox 也可以哦~~


zzlong

  • 懷疑的國中生
  • **
  • 文章數: 48
    • 檢視個人資料
    • 香港 PHP 用家社區
回覆: 請問有關於如何將視窗固定在最下方
« 回覆 #9 於: 2008-03-28 17:05 »
謝謝指教~~

樓上小弟的 Code 不是只能在 IE 跑,FireFox 也可以哦~~

大頭目兄的代碼我沒有執行過,不過相信在 Firefox 上是沒有問題的,但是我們應該胸懷全世界所有平台、所有瀏覽器的用戶,也要儘量令自己的代碼不會在新一代的瀏覽器上失效,所以 innerHTML、scrollBotton 等等非標準的東西還是可免則免。

你的做法雖然沒有利用 location.href,但仍然有效率的問題,每次更改 innertHTML,瀏覽器都要重新解譯 (interprete) 這部分 HTML 代碼,重整內部的 DOM 結構,更新頁面,從電腦資源的角度看,這是一項非常昂貴的工作。正確的做法是利用 JavaScript 更改 DOM 樹,雖然比較麻煩,但負責任的 programmer 寧可自己承擔,也不會把麻煩留給用家。

大頭目

  • 憂鬱的高中生
  • ***
  • 文章數: 139
    • 檢視個人資料
回覆: 請問有關於如何將視
« 回覆 #10 於: 2008-03-28 20:23 »
大頭目兄的代碼我沒有執行過,不過相信在 Firefox 上是沒有問題的,但是我們應該胸懷全世界所有平台、所有瀏覽器的用戶,也要儘量令自己的代碼不會在新一代的瀏覽器上失效,所以 innerHTML、scrollBotton 等等非標準的東西還是可免則免。
你的做法雖然沒有利用 location.href,但仍然有效率的問題,每次更改 innertHTML,瀏覽器都要重新解譯 (interprete) 這部分 HTML 代碼,重整內部的 DOM 結構,更新頁面,從電腦資源的角度看,這是一項非常昂貴的工作。正確的做法是利用 JavaScript 更改 DOM 樹,雖然比較麻煩,但負責任的 programmer 寧可自己承擔,也不會把麻煩留給用家。

對不起~~小弟沒有別的意思!!

小弟也不是程式高手,依照 zzlong 的看法,難到內建的元件,沒有比較優嗎!!??

有些功能還是要自己 Code 比較好嗎?

倒底要怎麼判斷呢??

手續麻煩,會不會連帶造成效率的問題呢??

而且,說到手續麻煩,就會連想到程式碼變大,檔案變大,這是不是又掉入了『效率與檔案大小之爭』呢??
« 上次編輯: 2008-03-28 20:25 由 大頭目 »

zzlong

  • 懷疑的國中生
  • **
  • 文章數: 48
    • 檢視個人資料
    • 香港 PHP 用家社區
回覆: 請問有關於如何將視窗固定在最下方
« 回覆 #11 於: 2008-03-29 14:17 »
小弟也不是高手,只是與大家分享一些個人經驗。

對於只執行一次的 script,效率的問題或許可以忽略,因為絕對執行時間的差異可能小得人類無法察覺,不過樓主的應用中使用 innerHTML 的次數可能很多,每次更改的代碼也越來越長,效率的問題便需要正視了。

優化 JavaScript 是一個很大的課題,在這裡討論可能有離題之嫌。


jaceju

  • 憂鬱的高中生
  • ***
  • 文章數: 106
    • 檢視個人資料
回覆: 請問有關於如何將視窗固定在最下方
« 回覆 #12 於: 2008-05-14 11:02 »
以下跟主題無關。

話說 innerHTML 的速度經實驗證實是比較快的,而且 innerHTML 已經是業界標準,就像 XMLHTTPRequest 一樣。

http://www.google.com.tw/search?q=performance+dom+innerHTML
http://www.quirksmode.org/dom/innerhtml.html
http://www.developer-x.com/content/innerhtml/dom_vs_innerHTML_perf_test.html
http://www.gloo.ru/blogs/gloom.dhtml_javascript_benchmark._l_en.wiki.aspx

我是不確定用戶會有什麼特別的瀏覽器,但可以看到目前主流瀏覽器都是有支援 innerHTML 的。

個人看法,參考看看就好。

fillano

  • 鑽研的研究生
  • *****
  • 文章數: 526
    • 檢視個人資料
回覆: 請問有關於如何將視窗固定在最下方
« 回覆 #13 於: 2008-05-14 15:14 »
做了一個實測,在只插入簡單的textnode的時候,使用node會比innerHTML快大約三四倍。
代碼: [選擇]
<html>
<body>
<button onclick="test1()">node</button><button onclick="test2()">inner</button>
<div id="panel"></div>
<script>
function test1() {
var obj = document.getElementById("panel");
obj.innerHTML = "";
var start = new Date().getTime();
for (var i=0; i<100; i++) {
var node = document.createTextNode("test");
obj.appendChild(node);
}
var end = new Date().getTime();
alert(end-start);
}
function test2() {
var obj = document.getElementById("panel");
obj.innerHTML = "";
var start = new Date().getTime();
for (var i=0; i<100; i++) {
obj.innerHTML += "test";
}
var end = new Date().getTime();
alert(end-start);
}
</script>
</body>
</html>
Sapere aude! Habe Mut, dich deines eigenen Verstandes zu bedienen! ist also der Wahlspruch der Aufklärung.

hoyo

  • 榮譽博士
  • 俺是博士!
  • *****
  • 文章數: 4046
  • 性別: 男
  • 有需要的時候,學習就不會分階段。
    • 檢視個人資料
    • 樂咖黑電腦學習網
回覆: 請問有關於如何將視窗固定在最下方
« 回覆 #14 於: 2008-05-14 15:53 »
做了一個實測,在只插入簡單的textnode的時候,使用node會比innerHTML快大約三四倍。

....

調整迴圈到 10000 速度更是相差了 10 倍,

不過我還是會繼續使用 innerHTML .... 因為那個 node 我看不懂,不夠直覺
受人與魚,不如授人與漁
上海自來水來自海上;倫敦好奇人奇好敦倫

jaceju

  • 憂鬱的高中生
  • ***
  • 文章數: 106
    • 檢視個人資料
回覆: 請問有關於如何將視窗固定在最下方
« 回覆 #15 於: 2008-05-14 17:44 »
參考這篇:

When innerHTML isn’t Fast Enough
http://blog.stevenlevithan.com/archives/faster-than-innerhtml

在 IE 裡直接用 innerHTML 是很快的,但在其他瀏覽器好像就不是這麼一回事。利用上面這篇文章的 replaceHTML 函式,可以確保在主流瀏覽器中有較快的速度。

目前是偏好用別人寫好的 Library 裡的功能,例如 jQuery 的 $().html() 。

fillano

  • 鑽研的研究生
  • *****
  • 文章數: 526
    • 檢視個人資料
回覆: 請問有關於如何將視窗固定在最下方
« 回覆 #16 於: 2008-05-15 02:25 »
我用上面的小程式測的結果,firefox跟ie其實差不多,ie用innerHTML的速度甚至比firefox稍微慢一點點。(firefox2.0.0.14與ie7.0.6001.18000)

我想速度上的差距,可能是使用innerHTML時,需要另外把插入的html先剖析成dom tree結構再放到到parent node之下成為其子節點的關係。

不過用innerHTML真的比較直覺,如果沒有明顯地影響效率,其實應該也無所謂。我自己用innerHTML的時候也比較多。
Sapere aude! Habe Mut, dich deines eigenen Verstandes zu bedienen! ist also der Wahlspruch der Aufklärung.

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
回覆: 請問有關於如何將視窗固定在最下方
« 回覆 #17 於: 2008-05-15 09:43 »
兩種方式我會交替用, 至於用哪一種, 除非是資料量非常多,

或是要讓程式碼看起來整齊一點就用 createTextNode,

不然的話就看心情, 用 innerHTML 會方便一點啦 ^^