Kawaz的jQuery入門

5,521 views
5,430 views

Published on

要望があったので上げました

Published in: Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,521
On SlideShare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
32
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Kawaz的jQuery入門

    1. 1. Kawaz的jQuery入門 第1回 Kawaz Web勉強会Copyright (C) 2011 www.kawaz.org All Rights Reserved. 1
    2. 2. このセッションについて 目標 普段プログラムを書かない人が jQueryのコアな動作を理解する jQueryで簡単なものを作ってどや顔できるようになる Web上にあるプラグインを使えるようになる 参考資料 詳しく作るのが面倒だったので、以下のスライドを読んでください このスライドを見て、気になった部分、説明が足りない部分を補足して いく感じです ノンプログラマーのためのjQuery入門 http://www.slideshare.net/hayatomizuno/jquery-7665168 バージョンについて 最新版は1.7.1(12/1/6現在)ですが、イベント周りの仕様が若干変わっ ているため、1.6.4基準でお話ししますCopyright (C) 2011 www.kawaz.org All Rights Reserved. 2
    3. 3. jQueryってなに? JavaScript向けライブラリ 少ないコード量でパワフルな実装が可能 今のWeb界隈では必須技術(giginet調べ) 無料 オープンソース 改変・再配布・商用利用可能(MIT) バージョンアップが早い 拡張が豊富(jQueryプラグイン)Copyright (C) 2011 www.kawaz.org All Rights Reserved. 3
    4. 4. 下準備 headにjQueryを読み込ませよう <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/ 1.6.4/jquery.min.js"></script> <script type="text/javascript" src="jquery.hello.js"></script> <title>Hello, jQuery</title> </head> <body> </body> </html> 自分で公式サイトからファイルをダウンロードしてきて、読み込ませても 良いですが、以下のサイトからGoogleがホスティングしているものに直 リンクするのがオススメです。楽だし http://scriptsrc.net/ ※jQueryの宣言は、自分のコードを読み込ませるより前に行ってくださ いCopyright (C) 2011 www.kawaz.org All Rights Reserved. 4
    5. 5. jQueryを書いてみよう$(function(){ $(body).append(Hello, jQuery!);}); わずかこれだけ! 先ほどのHTMLファイルを開いて、Hello, jQueryとだけ表示されていれ ば成功です!Copyright (C) 2011 www.kawaz.org All Rights Reserved. 5
    6. 6. jQuery超入門 $(.kawaz).css(background, red);Copyright (C) 2011 www.kawaz.org All Rights Reserved. 6
    7. 7. jQuery超入門 $(.kawaz).css(background, red); jQueryオブジェクト(主体) メソッド(命令) jQueryオブジェクト(主体).メソッド(命令)で構成されている! 上の例の場合、classがkawazの要素の背景色を赤くするCopyright (C) 2011 www.kawaz.org All Rights Reserved. 7
    8. 8. jQuery超入門 $(.kawaz).css(background, red); jQueryオブジェクト(主体) メソッド(命令) jQueryオブジェクト(主体).メソッド(命令)で構成されている! 上の例の場合、classがkawazの要素の背景色を赤くする 基本的に、jQueryコーディングは 操作したい要素の選択、探索 その要素に対してどのような操作をするか 2つに帰結する!Copyright (C) 2011 www.kawaz.org All Rights Reserved. 8
    9. 9. DOMってなに? DOM = Document Object Model HTML上にある要素をプログラムで扱いやすく定めたものCopyright (C) 2011 www.kawaz.org All Rights Reserved. 9
    10. 10. DOMってなに? 超基本:HTMLは木構造になっているHTML HEAD TITLE くだものいちらん BODY UL LI りんご LI バナナ LI みかんCopyright (C) 2011 www.kawaz.org All Rights Reserved. 10
    11. 11. DOMってなに? 超基本:HTMLは木構造になっているHTML HEAD TITLE くだものいちらん BODY UL LI りんご DOMノード LI バナナ LI みかんCopyright (C) 2011 www.kawaz.org All Rights Reserved. 11
    12. 12. DOMってなに? 超基本:HTMLは木構造になっているHTML HEAD TITLE くだものいちらん BODY UL LI りんご DOMノード LI バナナ LI みかん 各ノードは入れ子の構造になっている LIの各ノードから見てULは親ノード、BODYより上は先祖ノードと 言ったりする 子ノード、子孫ノード、兄弟ノードといった言い方もする いとこノードとかはとこノードという言い方は聞いたことがな い……Copyright (C) 2011 www.kawaz.org All Rights Reserved. 12
    13. 13. jQueryオブジェクトとはjQueryオブジェクトとは、DOMノードの集合に対して一定の操作を行えるようにしたものjQueryオブジェクトを生成するには$関数を使う(ダラー関数とか読む)$関数は引数によって、既存のノードを取ってきたり、新しいノードを生成したり、かなり柔軟にjQueryオブジェクトを生成してくれる ちなみに $()はjQuery()という関数の別名である jQueryを他のライブラリ(prototype.js)などと一緒に使うときは$が競合してしまうことがあるため、$()では なく、jQuery()を使った方が良いとされているが、現状、併せて使うことがほとんどないため、気にしなくて良 い気がするCopyright (C) 2011 www.kawaz.org All Rights Reserved. 13
    14. 14. $関数の使い方1 既存のDOM要素を選択する CSSセレクタのようなものを引数に渡す CSSセレクタに独自の拡張がされていたり、CSSセレクタに似せて実装されている別物なので「ようなもの」と表記 ドキュメント上から、これらにマッチするDOM要素全てを含んだ jQueryオブジェクトを生成する // 全てのp要素 $(p); // kawazをclassに持つ要素 $(.kawaz); // contentをidに持つ要素の直下にあるリスト要素 $(#content > li); // リンク先がhttp://www.kawaz.orgから始まるa要素 $(a[href^="http://www.kawaz.org"]); // 各親要素に対して3n+1(1, 4, 7…)番目にあるリスト要素 $(li:nth-child(3n+1)); // 選択状態にあるテキストフィールド $(input[type="text"]:selected);Copyright (C) 2011 www.kawaz.org All Rights Reserved. 14
    15. 15. $関数の使い方2 新しいDOM要素を生成する タグやHTMLをそのまま文字列で引数として渡す 新しいDOM要素が生成され、それを含んだjQueryオブジェクトが生成 される // 空のp要素を生成する $(<p>); // 文章を含んだp要素を生成する $(<p>おなかすいた</p>); // 入れ子にもできる $(<p><b>ねむたい!!!!</b></p>);他にも、DOM要素をオブジェクトとして直接渡したり、配列など別のオブジェクトを渡してjQueryオブジェクトを生成することができるが、割愛する。Copyright (C) 2011 www.kawaz.org All Rights Reserved. 15
    16. 16. jQueryオブジェクトと変数 jQueryオブジェクトは普通の変数に格納できる どんな名前の変数に格納することでもできるが、$から始まる変数名の 変数に格納することを強くオススメする var $hoge = $(.hoge); // いい var hoge = $(.hoge); // 問題なく動くけど避けるべきこれはルールではなくマナー、お作法jQueryを書く人の間では「$から始まる変数にはjQueryオブジェクトが格納されている」という暗黙の了解がある 当たり前だが、逆にほかのオブジェクトを$から始まる変数に入れないでくださいjQueryに限らず、他の人を思いやって書けるプログラマは良いプログラマですCopyright (C) 2011 www.kawaz.org All Rights Reserved. 16
    17. 17. $(function(){}); jQueryを書き始める前に毎回これで囲んで書くことを強く推奨! $(function(){ }); 理由1:遅延実行させるため これに囲むと、確実にHTMLの描画が終わってから実行される 囲まないと、HTMLの描画前に実行されるかもしれない DOMノードが生成される前にセレクタを使うと取得できない 初心者が一番ハマるところだとおもう 理由2:名前空間を分離させるため 他のスクリプト、ブラウザ拡張、コンソールなどにより、中の状態を 書き換えられることを防ぐことができるもちろん、プラグインを作るなど、囲んではいけない場合も存在するが、それは理解してきてからで良いと思うCopyright (C) 2011 www.kawaz.org All Rights Reserved. 17
    18. 18. jQueryの基本はこれだけ! いままで説明したところで、「操作したい要素の選択・探索」は大体マス ターしました。 あとは「命令」を覚えていくだけ! 基本的な命令だけ押さえておけばOK 残りは以下のページに「命令のカタログ」的なものがあるので、 ボーッと眺めて「こんなのあるんだー」と思っておけば完璧 jQuery 日本語リファレンス <http://semooh.jp/jquery/> 上のページ、初学者にはすごくオススメなのだけど、更新が2年も止まっているため、ある程度のレベルのこと をするには微妙である。たとえば、後ほど説明する1.4.xから導入されたdelegateなども載っていない。 バージョンごとに細かい仕様変更があることもあるが、そこでハマることはほとんどないと思われるので、常用 には問題ないと思う。Copyright (C) 2011 www.kawaz.org All Rights Reserved. 18
    19. 19. jQueryの命令 命令(メソッド)は以下のように大別できる Attributes(属性、内容の操作) Traversing(要素の探索) Manipulation(要素の操作) CSS(CSSの操作) Events(イベントの操作) Effects(エフェクトを加える) Ajax(通信、ネットワーク周り) Utilities(その他もろもろ)Copyright (C) 2011 www.kawaz.org All Rights Reserved. 19
    20. 20. jQueryの命令 命令(メソッド)は以下のように大別できる Attributes(属性、内容の操作) Traversing(要素の探索) Manipulation(要素の操作) CSS(CSSの操作) Events(イベントの操作) Effects(エフェクトを加える) Ajax(通信、ネットワーク周り) Utilities(その他もろもろ) 今回は主に、デザイナさんが使うことの多い、太字についてメインに解 説する。特にイベント周りを重点的に。 筆者が、いろいろjQueryをいじり倒した上で、よく使うメソッドについ てのみ取り上げるので、その他については先ほどのページを読んでおい てほしいCopyright (C) 2011 www.kawaz.org All Rights Reserved. 20
    21. 21. Attributes DOM要素の内容や属性を取得したり書き換えたり ちなみに属性(Attr)とは以下の太字の部分である <a href="http://www.kawaz.org/" title="Kawaz">Kawaz</a> // jQueryオブジェクト最初の要素の属性値を取り出す $(a).attr(href); // http://www.kawaz.org $(a).attr(alt, Kawazポータル); // 設定する // 一度に複数指定もできる $(a).attr({alt : Kawazポータル, target : _blank}); // classをつけたり外したり $(a).addClass(link); $(a).removeClass(link); // 中身を取得、書き換える $(a).text(); // Kawaz $(a).text(Kawazポータル); // 書き換えるCopyright (C) 2011 www.kawaz.org All Rights Reserved. 21
    22. 22. Traversing jQueryオブジェクトに含まれているDOM集合を選択したり、別のDOM を探索したり 非常に種類があるが、基本的にこれぐらいしか使わない気がする 書こうと思えばいくらでも複雑にできるが、これぐらいにとどめてお いた方が良いかも(後述) $(div).filter(.hoge); // divの要素集合の中からクラス名が hogeのもののみ取り出す $(div).children(); // divの子要素全てを取り出す $(div).find(.piyo); // divの子孫からクラス名がpiyoのもの を取り出す $(li).siblings(); // liの兄弟要素全てを返す $(div).closest(); // divの直近の親要素を取り出すCopyright (C) 2011 www.kawaz.org All Rights Reserved. 22
    23. 23. シンプルイズベストTraversingや最初に説明したSelector、次のManipulationについても言えることだが、いろいろなメソッドを使って、複雑な探索やDOM操作をすべきではない(と個人的には思う)。理由として HTML構造が少しでも変わると利用できなくなる可能性がある コードの可読性が下がる 実行パフォーマンスが(微々たるものだが)下がるなど、デメリットの方が多いため、使わなければいけない場合以外は使わない方が良い。 自分でHTMLが書ける場合は、操作する要素にあらかじめクラス名をつけておくと、クラスセレクタだけで目的 のDOMに到達できる 複雑な操作や探索は、既存のページを(ブラウザ拡張などで)弄るなど、どうしてもHTMLを書き換えられな い状態で使うべきCopyright (C) 2011 www.kawaz.org All Rights Reserved. 23
    24. 24. Manipulation DOMを追加したり削除したり 生成したDOMはappendなどで、すでに表示されているDOMに追加し ないと表示されない 個人的にappend/prepend, before/after, wrap, empty, remove, cloneぐらいしか使わない気がするvar $li = $(<li>).text("要素です!"); // 新しく要素を生成して$(div).append($li); // 全てのdiv要素の一番下に挿入$li.wrap(ul) // さらに要素で囲む<ul><li></li></ul>var $newDiv = $(div.hoge).clone(); // hogeというクラスのdiv要素をコピー$(div).before($newDiv); // 元々あったdivの前に挿入$li.remove(); // でもやっぱり消す Copyright (C) 2011 www.kawaz.org All Rights Reserved. 24
    25. 25. Manipulation DOMを追加したり削除したり 生成したDOMはappendなどで、すでに表示されているDOMに追加し ないと表示されない 個人的にappend/prepend, before/after, wrap, empty, remove, cloneぐらいしか使わない気がする var $li = $(<li>).text("要素です!"); // 新しく要素を生成して $(div).append($li); // 全てのdiv要素の一番下に挿入 $li.wrap(ul) // さらに要素で囲む<ul><li></li></ul> var $newDiv = $(div).clone(); // div要素をコピー $(div).before($newDiv); // 元々あったdivの前に挿入 $li.remove(); // でもやっぱり消す <div> </div>Copyright (C) 2011 www.kawaz.org All Rights Reserved. 25
    26. 26. Manipulation DOMを追加したり削除したり 生成したDOMはappendなどで、すでに表示されているDOMに追加し ないと表示されない 個人的にappend/prepend, before/after, wrap, empty, remove, cloneぐらいしか使わない気がする var $li = $(<li>).text("要素です!"); // 新しく要素を生成して $(div).append($li); // 全てのdiv要素の一番下に挿入 $li.wrap(ul) // さらに要素で囲む<ul><li></li></ul> var $newDiv = $(div).clone(); // div要素をコピー $(div).before($newDiv); // 元々あったdivの前に挿入 $li.remove(); // でもやっぱり消す <div> <li>要素です!</li> </div>Copyright (C) 2011 www.kawaz.org All Rights Reserved. 26
    27. 27. Manipulation DOMを追加したり削除したり 生成したDOMはappendなどで、すでに表示されているDOMに追加し ないと表示されない 個人的にappend/prepend, before/after, wrap, empty, remove, cloneぐらいしか使わない気がする var $li = $(<li>).text("要素です!"); // 新しく要素を生成して $(div).append($li); // 全てのdiv要素の一番下に挿入 $li.wrap(ul) // さらに要素で囲む<ul><li></li></ul> var $newDiv = $(div).clone(); // div要素をコピー $(div).before($newDiv); // 元々あったdivの前に挿入 $li.remove(); // でもやっぱり消す <div> <ul> <li>要素です!</li> </ul> </div>Copyright (C) 2011 www.kawaz.org All Rights Reserved. 27
    28. 28. Manipulation DOMを追加したり削除したり 生成したDOMはappendなどで、すでに表示されているDOMに追加し ないと表示されない 個人的にappend/prepend, before/after, wrap, empty, remove, cloneぐらいしか使わない気がする var $li = $(<li>).text("要素です!"); // 新しく要素を生成して $(div).append($li); // 全てのdiv要素の一番下に挿入 $li.wrap(ul) // さらに要素で囲む<ul><li></li></ul> var $newDiv = $(div).clone(); // div要素をコピー $(div).before($newDiv); // 元々あったdivの前に挿入 $li.remove(); // でもやっぱり消す <div> <ul> <li>要素です!</li> </ul> </div>Copyright (C) 2011 www.kawaz.org All Rights Reserved. 28
    29. 29. Manipulation DOMを追加したり削除したり 生成したDOMはappendなどで、すでに表示されているDOMに追加し ないと表示されない 個人的にappend/prepend, before/after, wrap, empty, remove, cloneぐらいしか使わない気がする var $li = $(<li>).text("要素です!"); // 新しく要素を生成して $(div).append($li); // 全てのdiv要素の一番下に挿入 $li.wrap(ul) // さらに要素で囲む<ul><li></li></ul> var $newDiv = $(div).clone(); // div要素をコピー $(div).before($newDiv); // 元々あったdivの前に挿入 $li.remove(); // でもやっぱり消す <div> <ul> <li>要素です!</li> </ul> </div> <div> <ul> <li>要素です!</li> </ul> </div>Copyright (C) 2011 www.kawaz.org All Rights Reserved. 29
    30. 30. Manipulation DOMを追加したり削除したり 生成したDOMはappendなどで、すでに表示されているDOMに追加し ないと表示されない 個人的にappend/prepend, before/after, wrap, empty, remove, cloneぐらいしか使わない気がする var $li = $(<li>).text("要素です!"); // 新しく要素を生成して $(div).append($li); // 全てのdiv要素の一番下に挿入 $li.wrap(ul) // さらに要素で囲む<ul><li></li></ul> var $newDiv = $(div).clone(); // div要素をコピー $(div).before($newDiv); // 元々あったdivの前に挿入 $li.remove(); // でもやっぱり消す <div> <ul> <li>要素です!</li> </ul> </div> <div> <ul> </ul> </div>Copyright (C) 2011 www.kawaz.org All Rights Reserved. 30
    31. 31. CSS 文字通り、要素のCSS、見た目の操作 特に、横幅縦幅やスクロール位置を動的に取得できるのが便利! 一番直感的に理解しやすいので詳しい解説は不要かと$(div).css(background); // 背景色を取得$(div).css(background, blue); // 背景色を青に$(div).width(); // 横幅を取り出す$(div).width(100); // 横幅を100に変更$(div).position(); // top, leftの値を親要素基準で取得$(div).css(margin-left, +=10); // margin-leftを現在の値+10する Copyright (C) 2011 www.kawaz.org All Rights Reserved. 31
    32. 32. Effects DOM要素を動かしたり、フェードアウトしたりが簡単にできる 個人的にjQueryを初めて覚えて、一番感激した機能。最初に学ぶと簡 単にかっこいい物が作れてモチベーションが上がると思う EaseAnimation(だんだん遅くなったりとか早くなったりとか)も使え る コードサンプルよりデモを見たほうが楽しい http://semooh.jp/jquery/api/effects/Copyright (C) 2011 www.kawaz.org All Rights Reserved. 32
    33. 33. Events DOM要素にイベントを追加する jQueryのキモだと思う JavaScriptは基本的にイベントドリブン(イベント駆動)で開発して いくため イベントドリブン:○○が起こったとき、△△する、という処理を ひたすら書いていく あるボタンがクリックされたとき あるテキストフィールドに文字が入力されたとき エンターキーが押されたとき アニメーションが終わったとき 通信が終わったときCopyright (C) 2011 www.kawaz.org All Rights Reserved. 33
    34. 34. Events 基本は$.bind() $(a).bind(mouseover, function(e){ alert("マウスが乗りました"); }); このコードが走った時、hoverされたときに実行する動作を予約する。 このコードが走った時点で処理が発生するわけではないので注意! 引数に渡す関数オブジェクトをcallbackと呼んだりする bindでイベントを束縛すると、実行時点でセレクタにマッチする要素 でしかイベントが発生しないので注意! たとえば、bindを行った後に新たなa要素を生成して、appendした としても、そこではイベントは実行されない ちなみに、最初から定義されている動作を殺すにはcallback内で return falseしてやる。(aタグをクリックしてもリンクしないように するなど)Copyright (C) 2011 www.kawaz.org All Rights Reserved. 34
    35. 35. Events よく使うイベント click, hover, change, focus, keydown, submitなど ちなみに以下のようなショートカットも利用できる 前のページに書いた物と全く同じ動作をする $(a).mouseover(function(e){ alert("マウスが乗りました"); }); bindの他 一度だけ実行して、以降はイベントを実行しないone 後から追加された要素に対してもイベントを紐づけるdelegate などがある liveというのも存在するが、delegateに似ているので、基本的にほぼ使わないCopyright (C) 2011 www.kawaz.org All Rights Reserved. 35
    36. 36. Ajax Ajax = Asynchronous JavaScript + XML 一昔前(2006年頃)にメチャクチャ流行った 要はJSで外部と通信して、ページ遷移なしにページを書き換える仕組 み全般のこと こんな名前だけどXMLはオワコンな気がする。最近はJSONを使うこ とが多い。 近年は当たり前になってきたので改まってこういう言い方をすること は少なくなったが、名残として残っている jQueryではpostやgetなどhttp通信周りが扱える。デザイナが使うこ とはあまりなく、コード例は省略するが、例題3で利用している。 個人的にはloadが便利すぎて生きるのが辛い Kawazポータルのかわずったーもっと読む機能とかCopyright (C) 2011 www.kawaz.org All Rights Reserved. 36
    37. 37. 例題 個人的にプログラミングは「習うより慣れろ」だと思っているので、とに かく例題にチャレンジしてみるのがKawaz流。 テンプレートを今からKawazポータルにうpするので、それを書き換 える感じで挑戦してみてほしいCopyright (C) 2011 www.kawaz.org All Rights Reserved. 37
    38. 38. 例題1 クリックすると適当なDOM要素をページに追加するボタンを作ろう クリックする度、要素が増えるね 使うと簡単に作れるメソッド例 click append 余裕があればfadeInやtoggleなどでEffectsをつけてみるとテンション 上がってくるCopyright (C) 2011 www.kawaz.org All Rights Reserved. 38
    39. 39. 例題2 あらかじめ用意されているdiv要素にhoverしている間だけ色を変え、マ ウスを離したら元に戻すようにしてみよう 使うと簡単に作れるメソッド例 hover css 元の色を直接ソースに書き込まずに、色を変える前に元の色を保存して おいて、離したときに戻すというアプローチが取れると良いと思うCopyright (C) 2011 www.kawaz.org All Rights Reserved. 39
    40. 40. 例題3 テキストフィールドにTwitterのIDを入力して、ボタンを押すと、そのID のユーザーのつぶやきを読み込み、ページに追加してみましょう 使うと簡単に作れるメソッド例 click val get each append Twitter APIの取得部分のみ、サンプルプログラムに用意されているの で、それを読みながら改変してみよう 余裕があれば、ボタンを押してから読み込みが終わるまでの間のみ 「読み込み中」の表示ができると尚良いですCopyright (C) 2011 www.kawaz.org All Rights Reserved. 40
    41. 41. コーディングの際に コンソールの使い方を覚える 普通のブラウザ(Chrome, Safari, Opera)で利用可能 FirefoxはFirebugを導入すれば利用可能 普通じゃないブラウザでは利用できない 文法エラーや記述ミスで実行が止まってしまった場合は怒ってくれるた め、困ったら見てみるのが良いと思う。 また、console.logによるプリントデバッグも有効Copyright (C) 2011 www.kawaz.org All Rights Reserved. 41
    42. 42. スコープについて JavaScriptはスコープがやっかい。特にthisの扱い jQueryは性質上、コールバックを多用するので、thisのスコープには気を つけた方が良い $(div).bind(click, function(){ this.find(li).fadeTo(normal, 0.5, function(){ this.text("半透明になった!"); }); this.text("押された!!!"); }); コールバック中のthisは、呼び出し元のjQueryオブジェクトを参照する これを理解していないとハマるので注意Copyright (C) 2011 www.kawaz.org All Rights Reserved. 42
    43. 43. jQueryプラグインとは jQueryプラグインとは jQueryはjQueryオブジェクトの命令を独自に拡張できる jQueryプラグイン=拡張された命令を提供するもの 設定などが豊富に用意されていて、どの場合にも対応できるように汎化 されているプラグインが良いプラグイン 作り方は要望があれば解説しますが、汎用的に作るには結構な技術力が 必要です。Copyright (C) 2011 www.kawaz.org All Rights Reserved. 43
    44. 44. jQuery UIとは おそらく最も有名なjQueryプラグイン Web上でドラッグやリサイズ、複数選択など、普通に実装するにはク ソ面倒なインターフェースを超簡単に実装できるようにするプラグイン カスタマイズ性が高く、汎用的に使える デモを見てみるのが良いと思う http://jqueryui.com/Copyright (C) 2011 www.kawaz.org All Rights Reserved. 44
    45. 45. 基本的なプラグインの使い方 大体のプラグインはほぼ同じ使い方でこうやって使える 逆にこの方法で使えないプラグインはクソプラグインの可能性が高いの で、使用を再考した方が良い $(function() { $( "#draggable" ).draggable({ axis : x, opacity : 0.5, zIndex : 999 }); }); 基本的に使いたい要素に対して追加した動作を呼び出し、必要に応じ て、連想配列で設定を渡してあげる 当たり前だが設定はものによって項目が違うのでドキュメント参照 どんな順番で書いても動くが、アルファベット順に設定を書くと綺 麗だと思う 当たり前だが、プラグインをheadで読み込ませないといけない。 jQueryの後、自分で書くコードの前に読み込ませることCopyright (C) 2011 www.kawaz.org All Rights Reserved. 45
    46. 46. ご静聴ありがとうございました!Copyright (C) 2011 www.kawaz.org All Rights Reserved. 46

    ×