fc2ブログ

jQueryでフォームを操作

ホームページをリニューアルしていて、入力フォームも凝ったものにしたくなった。
デザインの前に、まずはユーザーが入力しやすいようなUIプログラムを作ろうと思い、JQuery プラグインを探していると、 入力項目のチェックを行ってくれる「JQuery Validate」なるものがあった。必須項目や属性にMaxLengthなどチェックして、エラーがあれば項目の横に表示されます。
現サイトはエラー画面へ遷移やメッセージボックスが鬱陶しかったので、これは良いと思い実装したくなったのですが Dominoフォームにコーディングしている途中で、できないことに気が付いた。「JQuery Validate」は formタグに idを付けなければならないのだが、Dominoフォームは勝手に formタグを生成してしまうのだ。

諦めきれずにプラグインのソースを眺めていると多少知恵が付き、自前でプログラミングしてみました。
・ 入力項目にフォーカスがあった場合に下記のようにバックグランドに色が付く。
・ 必須エラーの場合、当該入力要素の横にメッセージを出す。
・ 不整メールアドレスの場合、当該入力要素の横にメッセージを出す。

下記が出来上がりフォーム。
ちなみに送信ボタンを押しても送信しないので、コメントは最下部のリンクからお願いします。

* 項目は必ずご記入願います。

名前 * :

ふりがな * :

住所 :

Eメール * :

ご質問 * :



ソースは下記の通り。
<script type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript">
<!--
$(function() {
// フォーカスされているフィールドの背景色を変更するイベントを追加
  $("input[type!=button], textarea, select")
    .addClass("idle")
    .focus(function() {
      $(this).addClass("active").removeClass("idle");
    }).blur(function() {
      $(this).removeClass("active").addClass("idle");
  });
// 送信ボタンのイベントを追加
  $("#check").click(function() {
    // エラー表示をクリアする
    $("input[type!=button], textarea, select").removeClass("err");
    $(".msg").remove();
    // 必須項目をチェックする
    $(".required").each(function() {
      if (!$(this).hasClass("err")) {
        if ($(this).val() == '') {
          $(this).addClass("err").after("<span class='msg'>必須項目です。</span>");
        }
      }
    });
// Eメールアドレスをチェックする
    $(".email").each(function() {
      if (!$(this).hasClass("err")) {
        if (!$(this).val().match(/^[A-Za-z0-9]+[\w-\.]+@[\w\.-]+\.\w{2,}$/)) {
          $(this).addClass("err").after("<span class='msg'>メールアドレスが正しくありません。</span>");
        }
      }
    });
  });
});

// -->
</script>
<style type="text/css">
/* 入力項目バックグランド */

.active { background-color: #ffffcc; }
.idle {  background-color: #ffffff; }
.err { background-color: #ffcccc; }

/* エラーメッセージ */
.msg { color:#ff0000; }
</style>
<p>* 項目は必ずご記入願います。</p>
<p>名前 * : <input class="required"></p>
<p>ふりがな * : <input class="required"></p>
<p>住所 : <input></p>
<p>Eメール * : <input class="required email"></p>
<p>ご質問 * : <textarea class="required"></textarea></p>
<input type="button" value="送信" id="check">

説明すると条件に合った要素を抜き出し、クラスの追加削除しているだけ。
今回、入力要素の後ろにメッセージを追加するために after メソッドを使用しています。入力エラーが解消された場合にメッセージを消すため、メッセージはクラス付としています。
htmlファイルは こちら から。
スポンサーサイト



テーマ : プログラミング
ジャンル : コンピュータ

jQueryでテーブルを操作

jQueryを使うたびにWeb基幹システムの画面を見るのが辛くなっています。フロントエンドが悲しいぐらい貧相なのですが、基幹システムは外注のために保守の関係で手が出せません。
それはさておき、最初はjQueryのプラグインを探しては感動しホームページに使わせて頂きましたが、ちょっとしたものが無い。考えれば当たり前で、jQuery = jQueryプラグインではなくJavaScriptライブラリであり、ちょっとしたものは自分で開発しなければならないのだ。覚えるしかない。

まずはテーブル。
・1行おきに色を付ける。
・マウスが乗った行に色を付ける。
・選択行に色を付けて、再度選択されたら解除。

下記が出来上がりの表。表の上にマウスを乗せたり、クリックを!
年月沿革
2000あああああ
2001いいいいい
2002ううううう
2003えええええ
2004おおおおお

ソースは下記の通り。
<script type="text/javascript" src="jquery.js"></script">
<script language="javascript" type="text/javascript">
$(function() {
// 1行おきに色を付ける
  $(".stripe tr:nth-child(odd)").addClass("odd");
  $(".stripe tr:nth-child(even)").addClass("even");
// マウスが乗った行に色を付ける
  $(".stripe tr").mouseover(function() {
    $(this).addClass("over");
  }).mouseout(function() {
    $(this).removeClass("over");
  });
// 選択された行に色を付け、再度選択されたら解除
  $(".stripe tr").click(function() {
    if ($(this).hasClass("selected")) {
      $(this).removeClass("selected");
    } else {
      $(this).addClass("selected");
    }
  });
});
</script>

<style type="text/css">
table { border-collapse:collapse; }
th, td { border:1px solid #999; }
th { background-color:#ccc; }
/* 1行おきに色を付ける */
.even { background-color:#eee; }
.odd { background-color:#fff; }
/* マウスが乗った行に色を付ける */
.over { background-color:#6699ff; }
/* 選択された行に色を付け、再度選択されたら解除 */
.selected { background-color:#6699ff; }
</style>

<table class="stripe">
  <tr><th>年月</th><th>沿革</th></tr>
  <tr><td>2000</td><td>あああああ</td></tr>
  <tr><td>2001</td><td>いいいいい</td></tr>
  <tr><td>2002</td><td>ううううう</td></tr>
  <tr><td>2003</td><td>えええええ</td></tr>
  <tr><td>2004</td><td>おおおおお</td></tr>
</table>

説明すると条件に合った要素を抜き出し、クラスの追加削除しているだけ。
htmlファイルは こちら から。

1頁に表が複数ある場合、最初下記のように記述してしまっていた。
$(".stripe tr:odd").addClass("odd");
すると複数表を1つとみて1行おきに色を付けてしまった。1つ目の表の行数が偶数になったところで、2つ目の表がおかしいことに気づきました。親要素に対して抽出する場合は ":nth-child"を記述しなければならない。
:nth-child の引数は、odd(偶数)/even(奇数)/index(番目、配列1から始まる)とのこと。
例えば  $(".stripe tr:nth-child(3)").addClass("odd"); とすれば、3行目だけ色がつく。

1行おきに色を付ける場合は、直接cssをセットすることもできます。
$(".stripe tr:odd").css("background", "#ccc");

テーマ : プログラミング
ジャンル : コンピュータ

Dominoでtextarea

Dominoのテキストフィールドをブラウザからtextareaで表示させたい場合、安直な方法はリッチテキスト。ただリッチテキストは使いたくないので、R4.6の頃は下記のような方法で作っていました。

フォームにフィールドを非表示で置く。Webで表示する部分にtextareaタグを記述。この時、フィールド名とtextareaのnameを同じにする。
昔のやり方

今回、ホームページをリニューアルにする際に「入力画面」→「確認画面」→「完了画面」と遷移させる予定でいます。そこで「確認画面」から訂正するため「入力画面」に戻る際、この方法ではtextareaのvalueへ値をクライアントJavaScriptで入れ直さないといけない。そこでフィールドのプロパティをいじっていたところ、下記のようにフィールドプロパティ値を変えるだけで可能でした。
毎度ですが、この方法は正攻法なのかどうなのか?

プロパティ

複数値オプションは"改行"で。"セミコロン"にするとinputタグになってしまう。
プロパティ

ここはお好みで。
プロパティ

テーマ : プログラミング
ジャンル : コンピュータ

JQuery TableSorter

ホームページで行数が多いテーブルがあり、すっきりしたデザインにしたかった。
そこで、私の要望は
 ・ タイトル行が固定、明細をスクロール
 ・ ヘッダクリックでソート
 ・ 1行置きに色を付ける
 ・ 選択行が色などでわかる
 ・ JQueryプラグイン
となかなか細かい。

まず Flexgrid をダウンロードして試してみて、リッチなインターフェースがこんなにも簡単に作れてしまうのか驚かされました。データ形式はJSON、XML、固定Tableの3つ。JSONはDominoのOpenAgentをURLに指定して試すが、ソート機能が効かない。固定Tableも同様、どうやらローカルでソートするロジックではないようだ。運用者を考慮すると、固定テーブルもしくはXMLファイルが望ましかったがXMLはサンプルもなく、試してみるができませんでした。

その後も色々なプラグインを試し、最終的に TableSorter を選びました。
そのままでは「タイトル行が固定、明細をスクロール」の要件を満たしていませんが、スマートな作りなのでCSS を工夫して何とか形になりました。
作った サンプルはこちら で、サンプルの説明は下記の図の通り。

css

ちなみに 前回 のDominoのDOCTYPEがデフォルトのままだとIE6.0でtheadが上に上がりません。

テーマ : プログラミング
ジャンル : コンピュータ

プロフィール

ピヨパパ

Author:ピヨパパ
静岡市のエンドユーザーSE。
最近はDominoの開発ばかりでうんざり。
是非気軽にコメントして下さい。

FC2カウンター
最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる