jQuery

jQuery 関連のメモ

Googlemap の利用

2013年6月5日

Googlemap を利用する際のメモ。 2018年7月16日から「Google Maps Platform」という新しいサービスになり、API の使い方等が変更になりました。新しい API の使い方等については「Google Maps API の使い方」をご覧ください(2018年7月30日) ジオコーディングを使って地図を表示 HTML に記述してある住所…

続きを読む

スパム対策 JavaScript/jQuery を使った迷惑メール対策

2013年6月4日

ウェブ上にメールアドレスを掲載すると、スパム(迷惑)メー「ルが届くようになることがあります。 迷惑メール(スパム)に使われるメールアドレスは、ロボット(自動巡回プログラム)によって自動収集されていて、ソースを分析し、メールアドレスのような文字列(@ や mialto が含まれたもの)を集めているようです。 以下はメールアドレス収集プログラムに収集されるのを防…

続きを読む

基本的なドロップダウンメニュー

2013年5月18日

CSS による基本的な記述 メニューの幅や背景、テキストの位置などの指定は様々な方法が考えられるが、ここでは単純に幅はメニューの文字数に合わせ、右側にパディング(20px)を設け、背景は背景色で指定する。 HTML は ul 要素を入れ子にしてマークアップする。 CSS や jQuery で指定しやすいように id 「header-nav」を指定した div…

続きを読む

jQuery を使った縦にスライドするメニュー

2013年5月17日

親メニューをクリックすると、それに属するサブメニューをスライドアニメーションで表示するメニュー。 ul 要素を入れ子にして、ツリー構造を記述 例:親メニュー「News」をクリックすると、そのサブメニュー「Events」、「Activities」がスライドアニメーションで表示される。 「+」「-」「■」の3つの画像を用意。 親メニュー(div.parentme…

続きを読む

jQuery の fadeOut() を使ったスライドショー

2013年5月17日

プラグインを使わずに、jQuery を使って簡単なスライドショーを行う方法のメモ。 シンプルなスライドショー そのページにアクセスすると自動的にスライドショーを行う単純なもの。 サンプル1 基本的な構造 最初に表示する写真とそのタイトルを HTML に記述。 スライドショーで表示する写真のファイル名と情報をカンマ区切りで、非表示に指定した div 要素内に …

続きを読む

jQuery position(), animate() メソッドと css の display プロパティ

2013年5月3日

jQuery の position(), animate() メソッドを使用する際のメモ。 画像などを最初は非表示にしてその後表示するような場合、css の display プロパティを「none」にしておいて fadeIn() や show() などを使うことで可能だが、animate() メソッドの場合、css の display プロパティを「none…

続きを読む

見出しタグ(h1~h6)へのリンクリストを動的に生成する

2013年5月2日

ページの内容が多くなった場合などに、各見出しタグ(h1~h6)へのリンクのリストを jQuery を使って動的に生成する方法。 概要 リストとそれを表示する領域を ul 要素と div 要素で生成し、表示する位置へ配置(prependTo)。 見出しタグ(h1~h6)要素のラップ集合「$(‘:header’)」のそれぞれの要素を調べる…

続きを読む

$.extend を利用したパラメータ(引数)の整理

2013年5月1日

省略可能な引数を持つ関数を定義する場合は、省略された引数に適切なデフォルト値が設定されるようにする。この時パラメータの数が多い場合では、最後のパラメータのみを指定したい場合など、省略するパラメータ全てに「null」のプレースホルダーを使う必要が生じる。 このような場合、オプションのパラメータをオブジェクトで指定するとわかりやすく、またプレースホルダーも不要に…

続きを読む

JavaScript の引数

2013年5月1日

JavaScriptは引数のデータ型をチェックしないので引数のデータ型を確認するには、typeof()演算子でチェックする。 JavaScriptは引数の個数もチェックしない。必要な個数より多かった場合、余分な値は無視され、少なかった場合はその部分の値は 未定義値とみなされ、関数の振る舞いがおかしくなる可能性がある。 関数は任意の個数の引数を使って呼び出せる…

続きを読む

JavaScript 配列リテラルとオブジェクトリテラル

2013年5月1日

配列リテラル カンマ区切りの値をブラケットで括った形式で表現する。先頭の値は「0」というプロパティ名を持ち、2つ目の値は「1」、というように連続した数値のプロパティ名が付けられる。 オブジェクトリテラルを使って記述した場合は、以下のようになる。但し、配列リテラルはArray.prototypeを継承して、オブジェクトリテラルはObject.prototype…

続きを読む