menu
menu

キーワード検索

 

前月(11月)の人気記事トップ10

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 2 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  3. ( 3 - ) 【jQuery】jQueryでドロップダウンメニュー
  4. ( 4 - ) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  5. ( 6 ↑) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  6. ( 5 ↓) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
  7. ( 9 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
  8. ( 8 - ) 【CSS】レスポンシブデザインのブレークポイントは⁉
  9. (10 ↑) 【Mac】iMovieの保存場所を変更する
  10. ( - ↑) 【PHP】PHPでシンプルなメールフォーム
このエントリーをはてなブックマークに追加

【制作Tips】prototypeとjQuery

【制作Tips】prototypeとjQuery

こんにちは(¬v¬)

今回はPrototypeとjQueryについてです。

最近のWeb制作においてJavaScriptは欠かせない存在となりました。そのJavaScript/Ajaxの中でも特にprototypeとjQueryといったフレームワークやライブラリはWeb制作の現場において必須項目となりつつあります。

今回そのprototypeやjQueryを使うために必要な準備について解説します。

prototypeとjQuery

prototypeの導入

prototype.js(http://www.prototypejs.org/)を公式サイトからダウンロードします。

ダウンロードしたファイルを任意の場所に保存します。ここでは「/common/js/」にダウンロードしたファイルを保存します。head要素内に次の一行を追加します。

ファイル名はダウンロードしたファイル名を入力します。

今回ダウンロードしたファイルはprototype.jsなのでそれがファイル名になります。


<script src="/common/js/prototype.js"></script>

これでprototypeが使えるようになりました。

jQueryの導入

jquery.js(http://jquery.com/)を公式サイトからダウンロードします。

ダウンロードしたファイルを任意の場所に保存します。ここでは/common/js/にダウンロードしたファイルを保存します。head要素内に次の一行を追加します。ファイル名はダウンロードしたファイル名を入力します。今回ダウンロードしたファイルはjquery-1.8.2.min.jsなのでそれがファイル名になります。


<script src="/common/js/jquery-1.8.2.min.js"></script>

これでjQueryが使えるようになりました。

prototypeとjQueryの共存

prototypeとjQueryは競合(コンフリクト)します。なのでprototypeとjQueryを一緒に使うことはできません。サイト設計の段階でどちらのライブラリを使うか決めておかなければなりません。

ただ、どうしても使わざるおえない場合があります。その場合の対処方法です。

jQueryにはjQuery.noConflict()という関数がありますのでそれを使ってprototypeとjQueryを共存させます。

まずprototypeとjQueryを読み込みます。prototype、jQueryの順で読み込ませます。prototypeのプラグインもjQueryの前に読み込ませます。


<script src="/common/js/prototype.js"></script>
<script src="/common/js/prototypeのプラグイン.js"></script>
<script src="/common/js/jquery.js"></script>

jQueryを読み込んだ後に次のコードを読み込ませます。


<script>
var j$ = jQuery.noConflict();//引数にtrueを指定すると$、jQuery共に無効になる。
</script>

あとは使用するjQueryのライブラリで定義されている$をj$に全置換すればprototypeとjQueryが共存できるようになります。

Result

サンプルデモ

  • jQuery Prototype
このエントリーをはてなブックマークに追加