javascriptの最近のブログ記事

クライアントの要望で、自社サイトから外部へどのくらいのリンク効果があるのか?という問い合わせがありました。何もしらなかったので、「1ページかまして、javascriptとかで飛ばせばよかろ~」という感じでいたのですが・・。

基礎的なことかもしれないが、初めてだったので、メモ。
inputタグでsubmit属性を指定したときに、エンターキーをおしたらデータが送信されるので、
どうもユーザビリティ的に気になるところが多々あった。
例えば
色々入力項目があるときに、思わずエンターキーを押してしまった時にいきなり別のページに行ってしかもエラーでてんじゃん!って感じ。


それの解消方法は、
inputタグのtype属性を単純にbutton属性にして、onclickイベントでsubmit();を指定すること。

つまりコードで書くと、
<input type="button" value="送信" onclick="submit();" />

こうすることでエンターキーでのデータ送信を解除でき、実際に送信ボタンをクリックすることでデータ送信が可能という流れを作ることができる。


今更ながら、メモでした。
CSSの切り替えをエフェクトを使って切り替えるという考え方。
なかなか使えそうでおもしろい。
ここクリック
ちょっと仕事でクッキーを使うことがあって、いろいろ調べていたら、
javascriptライブラリjQueryでcookieを超簡単に扱う方法 : 4GALAXYのメモ
にであう。

この記載事項に従ってやってみたら、あら不思議。あっという間に出来上がってしまった。

この記事にも書いてあるが、ますますjQueryがいい感じに思えてきた。


ちなみに、他の関連サイトも記載。
JavaScriptでcookieを操作する時はjquery.cookie.jsを使おう - 文殊堂
jQueryとjquery.cookie.jsを使って開閉を保持するメニューを作ってみる|caraldo.net | MT Blog


【追記】
cookieを書き変えるには、一度破棄して再度設定する。
今回はフォントサイズ変更でこの処理を用いたけど、ページ移動の際に、そのまま書きこむ形をとると失敗。一度、null値などで初期化(リセット)してから再度cookieにセットするとうまくいく。
という追記。

jQueryが新しく、1.3シリーズが出てきた。どんな風に改良されたのか、これから勉強とテストを繰り返していくことになるが、参考になるサイトがあったので、メモがてらエントリー。

基本的にこのサイトを参考にさせてもらいながら、色々テストをしてく予定。
できれば、自分のなにかも作りたいけど・・・。そんなところ。


■参考サイト
jQuery 1.3.1 日本語リファレンス

リクリにjQueryでHTMLを読み込む手法がのせてありました。

http://www.re-creators.jp/blog/2008/12/09_167.html

なかなか便利な手法なので、メモ。

以前prototypeを使ったやつも載せていたが、
結構これのアクセス数が多いので、そいつのjQuery版だすな。

http://sevenstyleweb.com/blog/2008/05/prototypejshtml.html

jQueryでpost

| コメント(0) | トラックバック(0)
先の記事と同じなんだが、プログラムを作っているときに、Ajaxを使って、ページ遷移なくいろいろしたいと思った。
ので、Ajaxの中でもjQueryをこの際使ってみようということで、いろいろ調べたりしたので、メモ。

jQueryでAjax通信をするための方法は、

function Ajax通信をする関数(){$.post("宛先のファイル",{送るデータ},コールバック関数);}
function コールバック関数(data){}

でできる。

$.postで通信処理を行うが、
第1引数の部分には、送る先のファイル名を記載する。もちろんこのときはパスを書き込む。

第2引数には、POST送信するデータを記載する。
記載の方法は、
ポスト送信名:その値

たとえば、jQueryで書くと、
<input type="text" name="soushin" id="soushin" value="hogehoge" />
の値をとりたいのであれば、
soushin:$("#soushin").val()
と書けば、
例えば、PHP側で
$postdata = $_POST['soushin'];
で受け取ることができる。

コールバック関数には、引数をつけると
その引数には、返ってきた値が入る。

このやり方を使えば、簡単にPOST送信が可能になる。

ちょっと躓いてしまったので、自省も含めてメモ。
lightwindowでローカルファイルを表示したいときには、他サイトを表示するような
<a href="hogehoge.html" class="lightwindow">○○</a>

では動かない。ローカルファイルを指定するときは、paramsの指定が必要。

以下のように書くとうまくいく。

<a href="hogehoge.html" class="lightwindow" params="lightwindow_type=external">○○</a>
※強調の意味で太字にしてます。

この書き方をするとローカルファイルもlightwindowで表示が可能となります。


ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
以下お知らせ。

Cyokodog::Diaryさんのページに大変重宝しそうな、記事が。
その名も「jQuery関連記事まとめ」

ここね↓
http://d.hatena.ne.jp/cyokodog/20081016/jquerylinks01


jQueryは以前は、俺はホッテおいた。あまり興味もなかったし、どっちかというとAjaxライブラリの中では、prototypeのほうをメインに考えていた。
しかし、益子さんの講義にでたときに、jQueryってすげーってことになって、それ以来お世話になりっぱなし。

いろいろできんだなーって思っていたら、思っていたよりもさらにいろいろできることがどんどんわかってくる。しかもセケンの偉い人たちがいろいろと開発してくれてる。XHTML+CSSにおいて、ちょっとしたエフェクトを使いたいときはかなりいい。

でも、あまりひどく使いすぎると、俺の目指す「いろんな人が同じようなレベルで情報を得ることができるサイト」から離れてしまうので、あくまで、「気の利いた」程度に使うよう自粛しながらいかないといけない。

まーとにもかくにも、上記のサイトはかなり重宝しそうだ。

今月号のWebDesigningのAjaxコーナー(そんな言い方しねぇか・・・)で、ちょっと興味を引かれたので、ジャジャっとメモっす。めもっす。

そのタイトルは、「印刷時にリンク先URLをリスト表示するfootnotelinks」
簡単に説明すると、プリントアウト時にリンクになっている箇所のURLを表記するのに、ページ下部にて注釈のような感じでリストアップしてくれるというもの。

ちなみに使い方は、こちらを参考
http://www.skuare.net/2007/06/post_2.html

読み込んで、該当箇所のidを指定するだけなんて、
ちょー簡単。

こういう、プリントアウト時のフォローアップも考えていきたい自分としては、かなりのグッドツールだ。

ダウンロードはこちらから
これと...
http://v2.easy-designs.net/code/jsUtilities/
これ。
http://v2.easy-designs.net/code/footnoteLinks/index.php#downloads

これらをはじめに読み込んで、指定箇所にcontentとidを与えてあげるとOKだと。
    follow me on Twitter

    このアーカイブについて

    このページには、過去に書かれたブログ記事のうちjavascriptカテゴリに属しているものが含まれています。

    前のカテゴリはIAです。

    次のカテゴリはMovableTypeです。

    最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。