Re: [心得] 遊記文草稿.htm

看板Web_Design作者laechan (揮淚斬馬雲)時間3年前 (2020/12/01 12:32)推噓2(2推 0噓 5→)

留言7則, 2人參與討論串2/2 (看更多)

將上次的東西做了修改後，實現了我以前想做的"網頁模板" 展示網頁 https://sites.google.com/view/myjapantravel 原始碼很長就不貼了。上面的網頁分為 top 層，以及下方的 left、right 兩個區塊，使用的基本 div 規劃如下 <head> <div style='position:fixed;top:0;height:100;font-size:40px'> 2014-2019<BR>日本自助旅行 </div> </head> <body bgcolor="#93FF93"> <div> <div style='position:fixed;top:110;float:left;width:260px' valign=top id=left_menu> </div> <div style='position:relative;top:110;left:270;float:left' id=show_zone> </div> </div> head 區，position:fixed 時，固定在 top=0 的位置，整個 div 高度則設為 100。 body 區，第一個子 div float=left 即顯示在最左邊，第二個子 div float=left 代表顯示在第二個左邊區。(如果給 right，它會變成對半，我只是要它緊鄰) 第一個子 div position 給 fixed 代表我要它不受捲軸滾動影響，固定顯示在 left 的 top=110 位置，寬度 260px，也就是左側選單的寬度。第二個子 div position 給 relative，初始顯示位置為 top=110、left=270 的位置，也就是右側內容的初始顯示位置。一般都會用 css 去 config 這些參數，我這是老派作風。左側選單的程式碼如下: function left_menu() { str="<a onclick='ext_or_not(this,\"table1\")'>＋自助行遊記</a><BR>"+ "<table id=table1 style='display:none'>"; for(i=0;i<travels.length;i++) str+="<tr><td>　<a onclick='show_zone(\""+travels[i]+"\")'>"+ "<u><font color=blue>"+travels[i]+"</font></u></a></td></tr>"; str+="</table><p>"; . . document.getElementById("left_menu").innerHTML=str; } document.getElementById("left_menu").innerHTML=str 即是將產生的左側選單字串(str) 透過 innerHTML 方法顯示在左側。點擊每一個左側選單的母項目(如自助行遊記)時，它會呼叫 ext_or_not 函數 function ext_or_not(aa,tid) { v=aa.innerHTML; if(v.indexOf("＋")!=-1) v=v.replace(/＋/gi,"－"); else v=v.replace(/－/gi,"＋"); aa.innerHTML=v; if(document.getElementById(tid).style.display=="none") document.getElementById(tid).style.display="block"; else document.getElementById(tid).style.display="none"; } 把母項目前面的＋號變－號(再按一次則還原)，同時將以下原本設定 "display:none" 的子項目(即預設隱藏)，變更為 "display:block" 即更改為顯示(再按一次則又變回隱藏)。點擊每一個子項目時，它會呼叫 show_zone 函數，這個函數的內容大部份與前篇的內容是類似的，也就是以這個內容為基礎去擴張後，即得到我真正想呈現的樣貌: function show_zone(pid) { // 一樣去讀 <pre> ... </pre> 内的內容 content=document.getElementById(pid).innerHTML; // 然後對每一行做解析 tmps=content.split("\n"); for(i=0;i<tmps.length;i++) { tmp=tmps[i]; if(tmp=="") continue; if(tmp.indexOf("http")!=-1) { s=tmp.indexOf("http"); e=s; while(e++<tmp.length) if(tmp.substr(e,1)==" ") break; if(e==s) e=tmp.length-1; url=tmp.substr(s,e-s); tmp=tmp.substr(0,s)+"<a href='"+url+"' target=_blank>"+url+"</a>"; if(url.indexOf("imgur.com")!=-1 || url.substr(-4,1)==".") { if(url.substr(-4,1)!=".") url+=".jpg"; tmp+="<BR><a href='"+url+"' target=_blank>"+ "<img width="+MEDIA_WIDTH+" src='"+url+"'></a><BR>"; } else if(url.indexOf("youtu")!=-1) { urls=url.split("watch?v="); url=urls[0]+"embed/"+urls[1]+"?rel=0"; tmp+="<BR><iframe width="+MEDIA_WIDTH+" height="+ MEDIA_HEIGHT+" src='"+url+"' frameborder=0 allow='"+ "accelerometer; clipboard-write; encrypted-media; "+ "gyroscope; picture-in-picture' allowfullscreen></iframe><BR>"; } tmps[i]=tmp; } else tmps[i]=tmp.replace(/ /gi,"&ensp;"); // 把大部份行的空白以 &ensp; 替代 } content="<font size="+FONT_SIZE+">"+tmps.join("<BR>")+"</font>"; document.getElementById("show_zone").innerHTML=content; window.scrollTo(0, 0); } window.scrollTo(0, 0); 的意思就是，我希望使用者每點擊一次子項目，就自動回捲到最上面。早前我用 href 的做法，它在協作網頁上會出現不符預期的錯誤(不管是 a href 或 window.location.href 都一樣)，但是用 window.scrollTo(0, 0); 就不會。如果沒有使用 window.scrollTo(0, 0)，在觀看某個文章到一半，點擊其它文章時，它不會從最上面開始。這是 google 到的，我事前也不知道有這東西，而且我是先找到 jQuery 的做法，然後才推敲應該 JS 本身就有支援的語法。那所以透過 document.getElementById("show_zone").innerHTML 顯示出右側內容後，再用 window.scrollTo(0, 0) 就可以把捲軸回捲到最上面，這樣每點擊一篇文章，就都會從最上面開始。從上面可看出它的 frame 結構其實是透過 <div> 虛擬而成的，我很早就想寫這個，因為協作網頁要以內嵌程式碼的方式去弄 frame 我覺得挺困難的，但是用虛擬的就沒問題了，所有的資料(連同遊記文)全都放在同一個 .htm 檔內，並能依我自訂的「網頁模板」去顯示我的網站內容。而以下就可視為我自己簡單架設的網站(它其實只是一個網頁) https://sites.google.com/view/myjapantravel 而且頁面呈現大多可由我自訂，如同其它部落客的網站一樣。目前它的缺點是還沒有辦法透過在網址後給定參數的方式，去顯示特定的文章，下午再來研究。不過它不是我的重點，確定能以這個來虛擬 frame/網站分頁才是我的主要目的。 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 114.33.66.104 (臺灣) ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1606797127.A.DB0.html ※ 編輯: laechan (114.33.66.104 臺灣), 12/01/2020 14:06:50