#author("2021-09-25T11:36:39+09:00;2021-09-25T11:34:40+09:00","default:inoue.ko","inoue.ko") #author("2026-07-28T16:08:21+09:00;2026-07-28T13:58:56+09:00","default:inoue.ko","inoue.ko") *jQuery Sample [[jQuery]]｜[[jQuery/Selector]]｜[[jQuery/Method]] ~ 以下に示す事例は、 jQueryの使い方を理解するためのものです。事例によっては、[[CSS3アニメーション>CSS/Animation]]で実装する方が簡単な場合もあるので、実際に活用する際はCSSアニメーションと比較検討してください。 ~ ***CONTENTS #contents2_1 ~ ~ **基本サンプル テキスト、HTML、CSS を動的に変更する基本的な事例です。 -''DEMO''：https://koichi-inoue.github.io/JQ_Basic/ -''CODE''：https://github.com/koichi-inoue/JQ_Basic ~ ~ **エフェクト・アニメーション jQuery のエフェクト・アニメーションを確認するための簡単なサンプルです。マウスのホバリングで画像がフェードするエフェクトと、ボタンクリックで要素を動かすアニメーションを実装しています。 [[&small(この種の「動き」は、CSSアニメーションでも実現できます。);>CSS/Animation]] このサンプルでは、images, css, js の３つのフォルダをつくって、それぞれファイルを整理しています。 -DEMO：https://koichi-inoue.github.io/JQ_Effects/ -CODE：https://github.com/koichi-inoue/JQ_Effects ~ ''記法や関数の詳細については、以下のような検索でご確認下さい。'' -[[Google: &(this)]] ← &small(複数の要素から当該要素を特定するのに重要な表記です。); -[[Google: &(this) 親要素 子要素 隣接要素]] -[[Google: jQuery hover]] -[[Google: jQuery fadeTo]] -[[Google: jQuery animate]] ~ ***補足１ プラグイン [[hoverplus>Google: jQuery hoverpulse]] を利用すると、「マウスのホバー時に画像が拡大する」演出ができます。 ~ ***補足２：透明度・サイズ [[→ DEMO>https://design.kyusan-u.ac.jp/SampleSite/JQ_Animate2/]] ***補足２：透明度・サイズ [[→ DEMO>https://design.cs.kyusan-u.ac.jp/SampleSite/JQ_Animate2/]] 文字が上から少しずつ表示されるように見えるサンプルです。ページ読み込みと同時に少しづつ表示されます。詳細省略して要点のみ書くと・・ ''HTML''： じわっと表示したい部分にIDを設定 <div id="message"> ： ここに文章 ： </div> ''CSS''：当該部分の初期設定として、不透明度：0、高さ：0 #message{ opacity: 0; height: 0px; } ''JavaScript''：6秒かけて、不透明に、同時に高さを500pxまで $( function(){ $("#message").animate( { opacity: '1', height : '500px' }, 6000 ); }); ~ ~ **メニューのトグル クリックで開閉するメニューのサンプルです。 -''DEMO''：https://koichi-inoue.github.io/Navi-ToggleBasic/ -''CODE''：https://github.com/koichi-inoue/Navi-ToggleBasic ~ ~ **スムーズスクロール animateを使って、ページ内の縦スクロールをスムーズにする事例です。 -''DEMO''：https://koichi-inoue.github.io/JQ_SmoothScroll/ -''CODE''：https://github.com/koichi-inoue/JQ_SmoothScroll ~ ***構築方法 -1） jQuery本体と以下の各ソースをすべて同じフォルダに保存 -2） htmlの src="jquery-xxxx の部分のバージョンを合わせて下さい。 -3） 以下の設定がなされていれば、自動的に適用されます。 --ページ内の飛び先に ID名を定義。 例えば <section id="P01"> --メニューの＜a＞タグに href="#[ID名]" 記載する。 ~ ~ **プラグインの活用 &color(red){項目が増えてきたので、ページを分けました。}; ***よく話題になるプラグイン -[[jQuery/SmoothScroll]] -[[jQuery/ModalWindow]] -[[jQuery/Slider]] -[[jQuery/Parallax]] -[[jQuery/Masonry]] -[[jQuery/OKZoom]] -[[jQuery/Tubular]] -[[jQuery/UI_Draggable]] -[[jQuery/WebGL_Ripples]] ~ ***その他の事例 ここまでの導入事例が理解できた方であれば、以下のようなプラグインの導入もむずかしくないと思います。挑戦してみてください。 -Fancybox http://fancybox.net/ あらゆるコンテンツがlightbox風に表示できます。 -jQuery StickyNotes http://www.jquery-sticky-notes.com/ Webブラウザ上で付箋を貼る操作を可能にするプラグインです。 [[導入事例>https://design.kyusan-u.ac.jp/SampleSite/StickyNotes/]] 簡単サンプル(保存できません) [[導入事例>https://design.cs.kyusan-u.ac.jp/SampleSite/StickyNotes/]] 簡単サンプル(保存できません) -ImageMapster http://www.outsharked.com/imagemapster/ イメージマップのロールオーバーが設定できます。 参考：http://honttoni.web.fc2.com/blog_honttoni/samples/sample61set/ -Vegas Background SlideShow http://vegas.jaysalvat.com/ 背景にスライドショーを置くプラグインです。 -物理エンジンBox2Dを使ったサンプル http://lib.ivank.net/?p=demos&d=box2D ~ ~ ''旧記事'' #hr 新しいサンプルを追加したため、以下の内容は古くなっています。 ~ ''要素のトグル表示'' [[→ DEMO>https://design.kyusan-u.ac.jp/SampleSite/JQ_Toggle/]] ''要素のトグル表示'' [[→ DEMO>https://design.cs.kyusan-u.ac.jp/SampleSite/JQ_Toggle/]] ボタンをクリックする度に、表示/非表示を切り替えるサンプルです。 -1） 以下の index.html、sample.js を同一フォルダに保存（CSSは省略）。 -2） jQuery本体も同じフォルダに投入して下さい。 -3） htmlの src="jquery-xxxxx の部分のバージョンを合わせて下さい。 -4） MENUの部分がトグルボタンになります。 ~ ''index.html'' ｜ ページの文書構造 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>Sample</title> <script src="jquery-xxxxxx.js"></script> <script src="sample.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body > <h1>Sample for jQuery</h1> <nav> <ul id="button"> <li>MENU</li> </ul> <ul id="lists"> <li><a href="#">home</a></li> <li><a href="#">gallery</a></li> <li><a href="#">profile</a></li> <li><a href="#">links</a></li> </ul> </nav> <article> Sample Page for Toggle Switch" </article> </body> </html> ''sample.js'' ｜ ページのふるまい $( function(){ $("#lists").hide(); //lists部分の初期状態（隠す） $("#button").click( function () { $("#lists").slideToggle(); }); }); ~ ''参考：同様のトグル部分が複数ある場合'' 同様のトグルグループが複数ある場合（例えば、メニューが階層化されている場合など）、ボタンとリストをクラス扱いにして、さらにトグル要素の把握の仕方を以下のように工夫すれば、同じ行数のプログラムで問題が解決します。 ''html'' 以下のようなブロックがページ内に複数ある場合 <nav> <ul class="button"> <li><a href="#">WORKS</a></li> </ul> <ul class="lists"> <li><a href="#">photo</a></li> <li><a href="#">illust</a></li> <li><a href="#">package</a></li> </ul> </nav> ： 以下同様 ''JS'' ドキュメンドノードを辿ってターゲットに指示を出します $( function(){ $(".lists").hide(); $(".button").click(function () { $(this.parentNode.children[1]).slideToggle(); }); }); ４行目は、自分( #button ）の親( nav )から見て２番目の子要素、つまり自分の弟にあたる要素( #lists )をトグルスライドすることを意味しています。 ~ ~