FC2ブログ
GEEKy Script Writer [perl and more!]
You should permit the JavaScript!!
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
ページ内の記事を一覧にする (見出し付き)
というわけで、見出し付きの記事リストのソースを載せてみる。
IEで見るとかなり縦長なのでFireFoxで見ることを勧める。

<script type="text/javascript">
<!--
elm4 = document.getElementsByTagName('div');
elm5 = document.getElementById('Article_List');
bodyelm = document.getElementsByTagName('body').item(0);
brz = window.navigator.appName.match(/^Netscape$/i);
s = 0;
elm5.innerHTML = "";
while(s < elm4.length){
if(elm4.item(s).className == 'mainEntryTitle'){
var elmm = document.createElement('a');
var sr = s;
var st_txt = "";
while(elm4.item(++sr).className == 'mainEntryBody'){}
elmm.setAttribute('href',"#"+""+elm4.item(s).firstChild.name);
var stjc = document.createElement('div');
stjc.appendChild(document.createTextNode(getStringByElement(elm4.item(sr)).substr(0,10) + "......"));
stjc.style.display = "none";
var id = "n_"+s;
stjc.setAttribute('id',id);
stjc.style.border = "1px solid #000000";
stjc.style.backgroundColor = "#ffffff";
bodyelm.appendChild(stjc);
if(brz){
elmm.onmouseover = function(r,event){
return function(e){
open_div(r,e.pageX,e.pageY);
}
}(id);
elmm.onmouseout = function(r){
return function(){
hide_div(r);
}
}(id);
}else{
elmm.onmouseover = function(r){
return function(){
open_div(r);
}
}(id);
elmm.onmouseout = function(r){
return function(){
hide_div(r);
}
}(id);
}
elmm.appendChild(document.createTextNode("● "+elm4.item(s).lastChild.nodeValue));
elm5.appendChild(elmm);
elm5.appendChild(document.createElement('br'));
}
s++;
}
function getStringByElement(element){
var i = -1;
var str = "";
var elm2;
var s = element.childNodes.length;
while(++i < s){
elm2 = element.childNodes.item(i);
if(elm2.hasChildNodes()){
str += getStringByElement(elm2);
}else{
str += (elm2.nodeType == 3) ? elm2.nodeValue : "";
}
}
return str;
}
function open_div(element,e1,e2){
var elems = document.getElementById(element);
var xx = 0;
var yy = 0;
if(!brz){
xx = window.event.clientX;
yy = window.event.clientY;
}else{
xx = e1+"px";
yy = e2+"px";
}
elems.style.position = "absolute";
elems.style.top = yy;
elems.style.left = xx;
elems.style.display = "block";
}
function hide_div(element){
document.getElementById(element).style.display = "none";
}
//-->
</script>


今回はFireFoxのトリッキーな挙動に苦戦した
動作条件は前回と同じ
IE6,FireFox1.07,NN7.1にて確認
例のごとく、面倒なのでこのブログで使われているまま載せている

また、

stjc.appendChild(document.createTextNode(getStringByElement(elm4.item(sr)).substr(0,10) + "......"));

の10を変更すれば、見出しとして出す部分の長さを調節できる
10じゃ短いと思う場合は15とか20ぐらいにしてもいいだろう

追記
引用(頭に>)を分かりやすくするためには?
コメント
この記事へのコメント
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
この記事へのトラックバック
copyright © 2005 GEEKy Script Writer [perl and more!] all rights reserved.
Powered by FC2ブログ.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。