LogoMark.png

jQuery/Sample の変更点


#author("2020-06-17T19:51:02+09:00","default:inoue.ko","inoue.ko")
#author("2020-06-18T10:35:52+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
~

***index.html
#gistit(koichi-inoue/JQ_Basic/blob/master/index.html,,400)
~

***script.js
#gistit(koichi-inoue/JQ_Basic/blob/master/script.js,,400)

~
~


**エフェクト・アニメーション
jQuery のエフェクト・アニメーションを確認するための簡単なサンプルです。マウスのホバリングで画像がフェードするエフェクトと、ボタンクリックで要素を動かすアニメーションを実装しています。
[[&small(この種の「動き」は、CSSアニメーションでも実現できます。);>CSS/Animation]]

このサンプルでは、images, css, js の3つのフォルダをつくって、それぞれファイルを整理しています。

-DEMO:https://koichi-inoue.github.io/JQ_Effects/
-CODE:https://github.com/koichi-inoue/JQ_Effects
~

***index.html
#gistit(koichi-inoue/JQ_Effects/blob/master/index.html,,400)
~

//***style.css
//#gistit(koichi-inoue/JQ_Effects/blob/master/css/style.css,,400)
//~

***script.js
#gistit(koichi-inoue/JQ_Effects/blob/master/js/script.js,,400)

~

''記法や関数の詳細については、以下のような検索でご確認下さい。''

-[[Google: &(this)]] ← &small(複数の要素から当該要素を特定するのに重要な表記です。);
-[[Google: &(this) 親要素 子要素 隣接要素]]
-[[Google: jQuery hover]]
-[[Google: jQuery fadeTo]]
-[[Google: jQuery animate]]
~

***補足1
プラグイン [[hoverplus>Google: jQuery hoverpulse]] を利用すると、「マウスのホバー時に画像が拡大する」演出ができます。
~

***補足2:透明度・サイズ [[→ 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
~

***index.html
#gistit(koichi-inoue/Navi-ToggleBasic/blob/master/index.html,,400)
~

***style.css
#gistit(koichi-inoue/Navi-ToggleBasic/blob/master/style.css,,400)
~

***script.js
#gistit(koichi-inoue/Navi-ToggleBasic/blob/master/script.js)

~
~

**スムーズスクロール
animateを使って、ページ内の縦スクロールをスムーズにする事例です。
-1) jQuery本体と以下の各ソースをすべて同じフォルダに保存
-2) htmlの src="jquery-xxxx の部分のバージョンを合わせて下さい。 
-3) 以下の設定がなされていれば、自動的に適用されます。
--ページ内の飛び先に ID名を定義。 例えば <section id="P01">
--メニューの<a>タグに href="#[ID名]" 記載する。

-''DEMO'':https://koichi-inoue.github.io/SmoothScroll/
-''CODE'':https://github.com/koichi-inoue/SmoothScroll
-''DEMO'':https://koichi-inoue.github.io/JQ_SmoothScroll/
-''CODE'':https://github.com/koichi-inoue/JQ_SmoothScroll
~

***index.html
#gistit(koichi-inoue/SmoothScroll/blob/master/index.html,,400)
#gistit(koichi-inoue/JQ_SmoothScroll/blob/master/index.html,,400)
~

***style.css
#gistit(koichi-inoue/SmoothScroll/blob/master/style.css,,400)
#gistit(koichi-inoue/JQ_SmoothScroll/blob/master/style.css,,400)
~

***script.js
#gistit(koichi-inoue/SmoothScroll/blob/master/script.js)
#gistit(koichi-inoue/JQ_SmoothScroll/blob/master/script.js)

~
~



**プラグインの活用
&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();
    });
 });

4行目は、自分( #button )の親( nav )から見て2番目の子要素、つまり自分の弟にあたる要素( #lists )をトグルスライドすることを意味しています。
~
~