開発メモ,主に補足by子連れ親父プログラマー

2010-08-12

window.openとかlocationとかsubmitとか、普通の昔から使ってたJavascriptをjQueryで書く

まあ、昔はみんな button に onclick つけたり、画像にjavascriptのリンク貼ったり、
して「戻る」ボタンにてた訳で。
大体もうデザイナーさんから上がってきた時点で、
<a href="javascript:history.back()"><img src="images/B.gif" width="170" height="36" alt="戻る" /></a>
こんなんになってたんだけども。
jQuery とか使い始めるとこういうソースがどうにも耐えられない。
html ソースの中に Javascript のコードが書いてあるのが許せない状態になってしまう。
ということで、これまではよく見かけたコードを書き換えるにはどうしたらいいか調べてみた。

まずはボタンクリックで特定のURLにリダイレクトさせるやつ。

こんなボタンがあるとして、
<input type="button" name="back" value="back" />
こんな感じっすか。
$(':button[name=back]').click(function() {
    window.location = 'index.php';
});
次、ボタンクリックで window.open サイズ指定も付けて。
$(':button[name=back]').click(function(e) {
    window.open('index.html','_blank',
        'width=360, height=500, menubar=no, toolbar=no, scrollbars=no');
    e.preventDefault();
    return false;
});
最後、ただ単にサブミットする。ついでに hidden の値を Javascript で指定。
こんなフォームがあるとして、
<form action="index.php" method="post">
<input type="hidden" name="key" value="" />
<input type="submit" />
</form>
こんな感じで。
$(':submit').click(function() {
    $(':hidden[name=key]').val('123');
    $('form').submit();
});
あと、追記だけども、HTML側で指定したフォームの飛び先(action)とは全然別のアドレスに飛ばしたい時もあるよね。
こんなんなってて、
<form action="index.php" method="post">
<input type="button" id="preview" value="preview" />
<input type="submit" />
</form>
プレビューボタンを押したら、preview.phpに飛ばしたい、っていう場合、
ついでにpostじゃなくてgetにしたい、っていう場合、
こうなる。
$(':button#preview').click(function() {
    $('form').attr('action', 'preview.php');
    $('form').attr('method', 'get');
    $('form').submit();
});

このブログを検索

Powered by Blogger.

ラベル

php (17) jQuery (13) OSX (10) MySQL (8) Javascript (7) Postgres (7) port (7) apache (6) Java (3) Smarty (2) html (2) pear (2) FCKEditor (1) XAMPP (1) css (1) git (1) perl (1) ruby (1)

Facebookバナー