2008年10月23日木曜日

Shadowbox.jsでフォームを表示してvalidateプラグインを適用

スズキです。

いろいろ試行錯誤しましたが、こんな感じです。

--------【HTML】--------
<p>
  <a href="#login" rel="shadowbox;width=500px;height=400px"
    title="ログイン">ログイン</a>
</p>
<div id="login">
  <form class="login">
    <dl>
      <dt>ユーザー</dt>
      <dd>
        <input name="username" type="text"/>
      </dd>
      <dt>パスワード</dt>
      <dd>
        <input name="password" type="password"/>
      </dd>
    </dl>
    <div>
      <input name="login" type="submit" value="ログイン"/>
      <input name="cancel" type="button" value="キャンセル"/>
    </div>
  </form>
</div>
--------
http://code.google.com/p/suz-lab/source/browse/trunk/suz-php-jquery/webapp/example/shadowbox.html

--------【JavaScript】--------
$(function(){
  var options = {
    enableKeys: false,
    onFinish : validate
  };
  Shadowbox.init(options);
});

function validate() {
  $("#shadowbox .login").validate({
    rules: {
      username: "required",
      password: "required"
    }
  });
}
--------
http://code.google.com/p/suz-lab/source/browse/trunk/suz-php-jquery/webapp/JS/app/example/shadowbox.js

【ポイント】

▼formにclassをつけて、classで特定するようにしています。
idにしなかった理由は、Shadowbox.initをかけると、
同じformがShadowbox表示部分にコピーされて、
同じidが二つ存在し、気持ち悪いので、classにしています。

▼validateプラグインをShadowboxのonFinish時に適用している。
onFinishはShadowboxが開き中身のコンテンツが
表示された後に実行されるイベントです。また、
class="login"のタグは二つ存在するので、
Shadowbox内のものに特定するためにセレクタを、
"#shadowbox .login"にしています。

そろそろ、form/validateプラグイン、Shadowbox.jsを使った、
汎用ログイン機能の作成にとりかかれそうかな?

その前にDBアクセスまわり、やらないと...

--
http://suz-lab.blogspot.com/

0 コメント: