変更項目は、

• select置き換えをやめて表示部分はa+span要素に構成変更
• 選択時のフォーカス
• デザインをスキンで簡単に変更できるようにした

です。

jQuery.selectable.jsの記事にも追記してます。

せっかくの勉強のログなので未完成・ボツネタも公開しておきます。

スライダーから時間を選択する

経緯

ある案件で時間をスライダから選択できるものがほしい
と言われ、UI Sliderの勉強も兼ねてなんとなく作っていたところ

資料集めてる途中で断然使いやすいものを見つけてしまいなんとなく折れてしまいました。

中途半端な出来。。。

僕が作りかけていたものはこれ。。。
中途半端な感じですけど やりたかったのはこんな感じ。

select要素からスライダ作成して イベント繋げて っていうselectableみたいなやつです。
UI Sliderの使い方は一通り理解できたのでこれはこれでよかったかなぁ。

とりあえず近いうちにUI Sliderの使い方でも解説してみます。

と思ったらマイコミのハウツーにあった…笑

要望のあった文字数チェックを追加したので使い方の抜粋を載せておきます。
詳しくはjQuery.validation.jsの記事を参照してください。

入力文字数をチェックする場合

パスワードなどの項目に入力文字数の制限をかけたいときは

のようにclassに

• minX
• maxX (Xはともに任意の数字)

を含ませます。もちろんmin・maxどちらか一方だけを指定でき、
また他のすべてのチェックと併用することができます。
ただし複数項目のメールアドレスは 文字列に@を含めるので1文字多く数えられます。
(メールアドレスに入力文字数制限を使うことはないと思うのでそのままにしてます。)

*WordPressプラグインもあります

Greasemonkeyで有名なAutoPagerize、最近ははてなブックマークでも取り入れられて
機能としてサイト側でやるものかどうかっていう話も聞いたりしました。

AutoPagerizeは一度使ったらもう手放せないくらい便利ですけど
これを自分でやってみました。

Read more

memo: Easingプラグインで実現するスクロールの方がきれいにスクロールできるのでおすすめです。

jQuery.slideScroll.jsはよくあるページ内リンクをスクロールさせるやつです。
スクリプト内でjQueryはほとんど使ってなくてjQueryプラグインな必要もあんまりない感じですが
アンカーの指定がし易いのと僕がjQueryを99％使ってるのとでjQueryプラグインになってます(*1。

*1) jQuery非依存版もあります

スクロール型のページ内リンクは
僕がJavaScriptをやってみようと思ったきっかけでもあって いつか自作できたらいいなぁと思ってたのでした。

jQuery.slideScroll.jsのサンプルを見る
5509でも読み込むようにしたのでサイト中のページ内リンクでも確認できます。
(トピックスがページ内リンクになってるのでそこで確認できます。)
現在はeasingScrollを使っています。

Read more