#author("2021-09-25T11:36:39+09:00;2021-09-25T11:34:40+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/]]
文字が上から少しずつ表示されるように見えるサンプルです。ページ読み込みと同時に少しづつ表示されます。詳細省略して要点のみ書くと・・
''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/]] 簡単サンプル(保存できません)
-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/]]
ボタンをクリックする度に、表示/非表示を切り替えるサンプルです。
-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 )をトグルスライドすることを意味しています。
~
~
