ellsif blog

愛知のフリーランス プログラマのメモ書きなど

" jQuery " のアーカイブ

高さが不揃いなタイルレイアウトの下端をそろえる(JS)

divの高さを揃えるというのはよく見かけますが、今回やりたいのは、

WS000000これを

WS000001こうする。

ということです。
一番高い列との差分を各エリアに等分して、下部のラインを揃えています。

JavaScript(+jQuery)で対応してみました。
動作サンプルはこちら。
サンプル

JS本体は以下(※jQueryが必要です)
heightfix.js

使い方

サンプルのHTMLのままですが、jsを読み込んで、親要素と子要素のセレクタを指定するのみ。

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script src="heightfix.js"></script>
  <script>
      $(document).ready(function(){
        el.heightfix('.parent', '.child');
      });
  </script>
</head>

フォーム入力をリアルタイムにチェックする(JS)

フォーム入力をチェックするJSを書きました。
一応公開しておきます。動作保障出来ませんがご自由にご利用ください。

動作サンプルはこちら。
サンプル

JS本体は以下(※jQueryが必要です)
el_validation.js

使い方(例)

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="../lib/jquery-1.8.0.js"></script>
    <script type="text/javascript" src="../js/el_validation.js"></script>
    <script>
        $(document).ready(function(){
          // 入力チェックの初期化
          $.el_valid.init({
            "name":{
              "rule":[
                "required",
                "min_length[3]",
                "max_length[10]"
              ]
            },
            "email":{
              "rule":[
                "required",
                "email"
              ],
              "on":"blur"  // フォーカス移動時のみチェック
            }
          });
        });
    </script>
  </head>
  <body>
    <input type="text" id="name">
    <span id="e_name"><!--エラーメッセージ入る--></span><br>
    <input type="text" id="email">
    <span id="e_email"><!--エラーメッセージ入る--></span>
  </body>
</html>

入力チェックのルール

“rule”に配列で指定します。
required以外は未入力時チェックOKになります。(例:min_length[2]を指定した場合、未入力はOK、1文字だとエラー)

ルール パラメータ指定例 説明
required 必須
min_length min_length[10] 10文字以上入力しないとエラー
max_length max_length[100] 100文字以内で入力しないとエラー
exact_length exact_length[5] 5文字で入力しないとエラー
alpha 半角アルファベットのみ
alpha_numeric 半角英数のみ
alpha_dash 半角英数、半角アンダースコア(_)、半角ハイフン(-)のみ
numeric 半角数字
hankaku 半角英数記号のみ(半角カナはNG)
integer 整数のみ(01、0.1などはNG)
natural 自然数(正の整数)のみ(-1、0.1などはNG)
less_than less_than[10] 未満の数値のみ(10以上、文字はNG。9.99などはOK)
greater_than greater_than[100] より大きな数値のみ(100以下、文字はNG。100.1などはOK)
less_eq less_eq[10] 以下の数値のみ
greater_eq greater_eq[100] 以上の数値のみ
url 正しいURL(http://~、https://~のみOK)
email 正しいメールアドレス
tel 正しい電話番号(ハイフン有り、無しいずれも入力可能)
date 正しい日付(yyyy/mm/dd形式、2013/01/01でも2013/1/1でもOK)
time 正しい時刻(hh:mm形式、09:05でも9:5でもOK)
regex_match regex_match[^[a-z0-9]+$] 正規表現にマッチするか(やや動作に不安ありです)

わざわざ自作しなくても、jquery.validate.jsとか使えばいい気もしますが、
classにルールを入れるのが気持ち悪いのと、バリデーションの追加が自作の方が融通効きそうなので。