スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。



mirrorMan - お気に入り機能2

2はソースです。
<span id=setLstArea></span>
<script>
setLstArea.innerHTML ="<ul id=setLstBar></ul>";
var ar = (new VBArray(dicIniLft.Keys())).toArray();
for(var i in ar) $(setLstBar).append("<li><a href=# class=setLstBtn>"+
"<span id="+ ar[i] +" class=setLstSpn>"+
ar[i].replace(/^f_/,"") +"</span></a></li>");
$(setLstBar).sortable({revert:true});
$('#'+ar[0]).css("color","limegreen");
</script>
jquery.uiのsortableはver1.5あたりからマウスを離した後にずりずりっと元の位置に戻るアニメーションがデフォルトでオフに変わっていますが、revert:trueオプションを指定することでオンになります。
お気に入りを追加するのはこんな感じです。
var btnNm = prompt("名前を入力してください。","");
if((btnNm == null)||(!btnNm)) return;
else btnNm = btnNm.replace(/^(\s+)(.+)/,"$2");
if(dicIniLft.Exists("f_"+ btnNm))
return wsh.popup("同じ名前のボタンが既にあります。",0,document.title,64);
if(/[\\\/:\*\?"'<>\|,;@{}\[\]()$$]/.test(btnNm)) //"
return wsh.popup(
"ボタン名に次の文字は使えません。\n\n"+
" \\ / : @ * ? $ \" \' <> | , {} [] ()",0,document.title,64);
$(setLstBar).append("<li><a href=# class=setLstBtn>"+
"<span id=f_"+btnNm+
" class=setLstSpn style=display:none>"+
btnNm+"</span></a></li>");
dicIniLft.Add("f_"+ btnNm,getAdrBar(0));
dicIniRht.Add("f_"+ btnNm,getAdrBar(2));
setLstBtnClear();
$('#f_'+ btnNm).css('color','limegreen');
if(/MSIE 6/.test(navigator.appVersion)) $('#f_'+btnNm).show();
else $('#f_'+btnNm).fadeIn("slow");
$(setLstBar).sortable("refresh");

ボタン名、つまりお気に入り名はdictionaryのKeyとして格納するので、
文字列のチェックが必要です。
まず先頭の空白があれば取り除きます。
同じKeyがあるか、使えない文字はないかを判定し、登録します。
その後の処理、jQueryは便利です。
ただ、IE6だとfadeIn()がうまく動作しないようなので、show()を使用しています。
並べ替えを可能にするには、これが実にsortable({})と書くだけです。すごい。

あと、マウスポインタが上にきたときのmouseoverイベントで背景画像を変えるのは、
Sliding Doorテクニックという、javascriptも使用しないなつかしい方法を使っています。sliding Doorとは引き戸のことですが、横に長い画像を文字列幅で切り詰めつつ、右どなりの要素には右端の画像を使うという方法です。ちょうど引き戸を閉めて壁に隠れていくイメージですね。これによって、長さの異なる文字列で登録されるお気に入りであっても、マウスが重なるとその範囲をフォーカス表示しています。
スポンサーサイト



comment

Secret

while(aho.atEndofStream)

笹部 政宏
笹部 政宏
mail




フリーソフツ
Category
はてブ
Monthly Archive
New Entry
New Comment
New Trackback
RSS
Copyright © Kittens flewby me All Rights Reserved.

FC2Ad

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。