使いやすいセレクトボックスを実装できる jqselectable.js

3年くらい前に最初のバージョンを作ったjQselectableをほぼ全て書き直しました。書きなおす流れで以前のものと互換性がなくなってしまったので、新しいものとして公開します。

でもgithubのリポジトリは同じです。古いものは、古いもので残っているので、もし必要な方がいれば以前の jQselectable(v1.3) を使ってください。

ブログのおれ最適化パート2: アクセスキー

アクセスキーなんか別段目新しいことなんかないですけども以下のキーで怠惰な気分になれます。絶賛実験中なのでタイミングと僕の気分で割り当ては変わります。

ページナビゲーションが表示された状態のキャプチャ

要らないものを削った結果、記事が縦に長くなってしまうもんで、ページナビゲーション（前の記事、次の記事リンク）をどうしようかなぁとか思ってた。

ちょうど、シロさん(@___shiro_)が大胆なナビゲーション云々とTweetしてたのを見て、なーるほどと思い実装してみた。

こういったレイアウトのアーカイブのナビゲーションで、元のHTMLを一切触らずCSSだけで飛躍的に（？）ユーザビリティを高められるいい例になったかなぁ。どうやろ。その辺は要検証ということで。少なくとも自分で使う分には超使いやすいからこれはこれでオッケーなんですけども。

labelでwrapされてないチェックボックスとかラジオボタンが多い気がするんですけど（たまたまかもしれないけど）、これってそんなに面倒くさいことですかね・・・いやいやこの記事読んでくれてる人にはいないと思うんですけど。

チェックしやすいのはどっち
チェックしやすいのはどっち

<input type="checkbox" name="checkbox[]" value="hoge">hoge
<input type="radio" name="radio[]" value="fuga">fuga

これをlabel要素で囲って

<label><input type="checkbox" name="checkbox[]" value="hoge">hoge</label>
<label><input type="radio" name="radio[]" value="fuga">fuga</label>

ってするだけですよね。チェックボックスのラベルっぽいところをクリックして文字選択になったときのあの感じ・・・！

画像はiPhoneのiPodでアーティストを探しているところですが、同じようなUIを実装したいと思っていて、簡単に言うとスクロールに追従してくる感じなんですけど、複数要素の対応だったり、索引一覧みたいにひっかかった場合に次のタイトルがついてくる的な動きがほしかったのでつくってみました。

サンプルを見たほうが早いと思いますが、このブログのトップのようにタイトルをついてこさせたり、記事ページのようにソーシャルサービスへのリンクやメタ情報などの要素を固定できます。

このブログにも試験的に取り入れていますので確認できますが、HTML5の要素を利用しているためIE8以下では確認することができません。IE8以下での確認は一番上のサンプルでみてください。