タグ別アーカイブ: jQuery

jQuery.validationEngine: ポップアップの位置を変更する方法


jQuery.validationEngine で、 ポップアップの位置を変更する方法をまとめました。

続きを読む jQuery.validationEngine: ポップアップの位置を変更する方法


javascript でテーブルをソートする方法


javascript を使ってテーブルをソートすることになった。ドットインストールを見ると複数項目でソートする方法まで載っている・・・が、これを一般化してどんなテーブルでもソートできるようにするにはどうするか考えてみた。公開されているライブラリもあるんですけどね。

コードは次のとおり。

sortFunction.sort でテーブルをソートして、 ▼(▲) の表示をする。 sort に渡すのは、 order_array, sort_array, クリックされた th 自身 (this) の 4つ。 各パラメータについて下に説明を書いた。

order_array

各列の初期状態の昇順・降順を設定しておく。4列ある場合は [1, 1, 1, 1] のようにする。 1 が昇順、 -1 が降順を表す
。 初期状態でソートされていない場合でも 1 と書いて構わない。

ソートをするときに 昇順・降順 が入れ替わる場合は 該当する値を 1 と -1 で入れ替える。 SQL の order by でいうところの ASC, DESC 。

sort_array

初期状態で何番目のカラムでソートされているかを表す配列。 1列目と2列目でソートされており、1列目で最初にソートされている場合は [0, 1] と書く。 特にソートされていない場合は [] と書く。

最後にソートされた列の index は 配列の先頭に追加する。 SQL の order by でいうところの カラム の順序。

this (th)

どの列がクリックされたかを特定するために、クリックされたものを渡す。

注意点

  • 並べ替えられるオブジェクトに対して $(object).click() のようにしてイベントを記述している場合、並べ替え後に同じことをやる必要がある。
  • 列の表示名に ▲(▼) を使用すると、ソートの際に消える。
  • ▲(▼) は 最後にソートした列のみに表示する。
  • 昇順・降順のときの大小の比較は 日, 月, … , 土 が記述されている場合は 日曜を先頭にして考える。文字列は javascript 上 の >, < で比較する。数値の比較には対応していない。
  • table の中には 必ず thead, tbody を記述する。 parent() の数が固定で書かれているため。

order の扱いについては、 order by column_name_1 DESC, column_name_2 ASC のように [[0, -1], [1, 1]] で表すことも考えたが、優先順位と降順・昇順を別にしたほうがわかりやすいのではないかと思って上のようになった。

また、ある列で降順でソートされた後に別の列で昇順でソートした場合、最初にソートした降順は保持されるが、今になって降順・昇順は全列で統一したほうがよいのではないかと思っている。


ツールチップを表示するコード


Ruby On Rails のシステムの中でツールチップを表示しようと思ったときのメモです。

やることは単純で、クリックされたらヘルプを表示して、もう一度クリックされたらヘルプを隠すというものです。はてなマークがクリックされたらツールチップを表示・非表示するということです。

実装は javascript (jQuery) と CSS で行いました。そして Rails の helper に便利メソッドを作りました。以下がそのコード。

環境

  • Ruby 1.8.7p374
  • Rails 3.0.1
  • jQuery 1.4.3

基本

上のように javascript と css を記述して、次のように HTML を書きます。

image/quotation.png はクリックするモノです。その画像をクリックすると表示・非表示が切り替えます。

正確にいうなら、画像を囲んでいる span をクリックすると、その直後のタグの表示・非表示を切り替えます。つまりクリックするものは画像でなくてもよく、もっというならツールチップ以外にも使えるということです。

helper の活用

Rails には helper というものがあるので活用してみます。

このメソッドを次のようにして使うと、上に書いた HTML のように出力されます。

2番目の引数はデフォルト値を設定しており、引数がなくてもいいようにしています。

私がこの tooltip 表示を書き始めたら ほかの人が随所で真似し始めたので、もっと楽にできる helper のメソッドを作ったというお話でした。