スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
コメント (-)
コメントの投稿
トラックバック (-)

jQueryメモ01 プラグインを使うために覚えておくこと

自分でjQueryのソースを書きたいのではなく
プラグインを使ってサイトを作りたいのです。
本家からjquery-x.x.x.min.jsをとってくる

まずは、jQueryの本家サイトからjquery-x.x.x.min.jsという
JavaScriptライブラリファイルをとってくる必要があります。

jQueryプログラミングは、このJavaScriptファイルで定義されている
オブジェクトを使って、オリジナルのJavaScriptファイルを作成します。
もちろん、jquery-x.x.x.min.jsはライブラリなので単体では動きません。

プラグインと呼ばれるものは、このオリジナルのJavaScriptファイルに相当します。

そういう訳で、jQueryを使用するためには
まずは下記のサイトからjquery-x.x.x.min.jsをとってる必要があります。

http://jquery.com/
※PRODUCTION (24KB, Minified and Gzipped)にチェックを入れてダウンロードします。
※jsのソースがそのまま表示されてしまう場合は、IEでダウンロードしましょう。

HTMLへの組み込み方

ダウンロードしたjquery-x.x.x.min.jsの
HTML組み込みはheadタグ内に下記のように記載します。
<head>
<meta http-equiv="Content-Script-Type"content="text/javascript"/>
<script type="text/javascript"src="jquery-1.4.2.min.js"></script>
</head>

metaタグは、「このHTMLではJavaScriptを使用しますよ」の宣言なので
なくても動きますが、仕様的にあった方が良いでしょう。
src="jquery-1.4.2.min.js"の部分に関しては、環境に合わせてjsファイルのパスを記載します。


簡単なオリジナルjsファイルを作ってみよう

テキストファイルを開いて、下記のソースをコピペします。

function changeText(){
$("#about").text("書き換えました");
}

このファイルを「original.js」というファイル名で保存します。
chengeText()関数を実行すると、IDが"about"の箇所を書き換えるスクリプトファイルになります。

次にHTMLファイルを作成します。
下記のソースをコピペします。

<html>

<head>
<title>jqueryのテスト</title>
<meta http-equiv="Content-Script-Type"content="text/javascript"/>
<script type="text/javascript"src="jquery-1.4.2.min.js"></script>
<script type="text/javascript"src="original.js"></script>
</head>

<body>

<p id="about">jqueryとは?</p>

<form>
<input type="button" value="書き換え" onClick="changeText()">
</form>

</body>

</html>


組み込む順番に注意してください。
jquery-x.x.x.min.jsを一番最初に読み込む必要があります。

ブラウザでHTMLファイルを表示して
ボタンを押すとpタグで囲まれた部分を書き換えることができます。


今回はjQueryの入門みたいな感じになりましたが
次回以降はjsソースには極力触れず、人気のプラグインの組み込み方を紹介したいと思います。

基本的にはプラグインのダウンロードページに組み込み方も
記載されているのですが、あれわかりづらくないですか?

あれでわからなかったら、何もできませんと言われそうですが
組み込み方のパターンをつかめばわかると思います。

短い連載になると思いますが、よろしくお願いします。
コメント (0)
コメントの投稿
トラックバック (0)
前のページ(jQueryメモ02 Google AJAX APIを使ってjQueryを読み込む)
次のページ(Androidアプリ作成_08-ボタンを押すとブラウザ起動するアプリ-)
最新記事
カテゴリ
みんなのGoogleAndroidアプリ (8)
ASP.NET (8)
Ubuntu 気ままな独り言 (1)
Ubuntuインストール (4)
Ubuntuと無線LAN (1)
JAVA (3)
RSSリンクの表示
最新トラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。