2008年07月 Kittens flewby me

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とは引き戸のことですが、横に長い画像を文字列幅で切り詰めつつ、右どなりの要素には右端の画像を使うという方法です。ちょうど引き戸を閉めて壁に隠れていくイメージですね。これによって、長さの異なる文字列で登録されるお気に入りであっても、マウスが重なるとその範囲をフォーカス表示しています。