JavaScript

DrupalでjQueryを利用する際に気をつけること。

2012.03.01 / Notes

DrupalではデフォルトでjQueryが含まれていますが、利用の際には少し気をつける必要があります。
通常jQueryでは、ステートメントの最初に「$」マークのエイリアスから書き始めますが、Drupalでは、他のJavaScriptライブラリとのコンフリクトをさけるために、「$」から書き始めることができません。

 

それを回避する方法としては「$」エイリアスを使わずに、

というように「jQuery」から始めることで利用できます。
この場合、既存のスクリプトを再利用する際に「$」を「jQuery」に書き換えないといけないので、都合の悪いこともあります。
そのままの「$」を使いたい場合には、下記の様にステートメントごと「(function($){}(jQuery));」でくくって、「$」を「jQuery」に置き換える方法もあります。

jQueryを使ったシンプルなイメージスライダー。

2012.02.11 / Labs

jQueryを使ったシンプルなイメージスライダーのサンプルです。
ボックス内に複数の画像を横に並べて、左右にスライド表示をする仕組みです。
サンプルはこちら

HTML内では#galleryボックス内に画像を並べているだけです。画像の枚数には指定はありませんので、何枚でもOKです。

CSSでは基本的にボックスのサイズ指定と、オーバーフロー時に隠す設定のみです。

画像のスライドは「prev」「next」のリンクをクリックした際に、左右にスライドします。スライドする位置は、あらかじめ各画像サイズをもとに座標位置を配列に格納しておきます。

Google Mapsで住所、緯度・経度を取得。

2012.01.27 / Labs

Google Maps APIを使って、マーカーの位置から住所、緯度・経度を取得と、住所からマーカーの移動および、緯度・経度の取得するためのコードのメモです。
サンプルはこちら

マーカーのドラッグで緯度・経度を書き換えて、ドロップの際に住所を書き換えています。
また住所から検索で、マーカーを移動して、緯度・経度を書き換えています。
JavaScript自体のコードはこちら。

jQueryでアンカーポイントまでスクロール。

2011.04.01 / Labs

jQueryでページ内のアンカーポイントまでスムーズにスクロールするスクリプトです。
スクロールのイージングには「jquery.easing.1.3.js」を利用しています。
サンプルはこちら

<a>タグのリンクからハッシュ(#の部分)のみを抽出して、ページ先頭からの高さを調べています。

jQueryで要素の存在を確認する方法。

2011.03.13 / Notes

jQueryを使って、要素の存在を確認する際のメモです。