jQuery/Sample
をテンプレートにして作成
LECTURE
担当科目一覧
コンピュータ概論/2024
データサイエンス/2024
3DCG演習/2024
情報デザイン研究/2024
卒業研究/2024
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*jQuery Sample
[[jQuery]]｜[[jQuery/Selector]]｜[[jQuery/Method]]
~
以下に示す事例は、 jQueryの使い方を理解するためのものです...
~
***CONTENTS
#contents2_1
~
~
**基本サンプル
テキスト、HTML、CSS を動的に変更する基本的な事例です。
-''DEMO''：https://koichi-inoue.github.io/JQ_Basic/
-''CODE''：https://github.com/koichi-inoue/JQ_Basic
~
~
**エフェクト・アニメーション
jQuery のエフェクト・アニメーションを確認するための簡単な...
[[&small(この種の「動き」は、CSSアニメーションでも実現で...
このサンプルでは、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.kyusa...
文字が上から少しずつ表示されるように見えるサンプルです。...
''HTML''： じわっと表示したい部分にIDを設定
<div id="message">
：
ここに文章
：
</div>
''CSS''：当該部分の初期設定として、不透明度：0、高さ：0
#message{
opacity: 0;
height: 0px;
}
''JavaScript''：6秒かけて、不透明に、同時に高さを500pxまで
$( function(){
$("#message").animate( { opacity: '1', height : '500p...
});
~
~
**メニューのトグル
クリックで開閉するメニューのサンプルです。
-''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="P0...
--メニューの＜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/Stick...
-ImageMapster http://www.outsharked.com/imagemapster/
イメージマップのロールオーバーが設定できます。
参考：http://honttoni.web.fc2.com/blog_honttoni/samples/s...
-Vegas Background SlideShow http://vegas.jaysalvat.com/
背景にスライドショーを置くプラグインです。
-物理エンジンBox2Dを使ったサンプル
http://lib.ivank.net/?p=demos&d=box2D
~
~
''旧記事''
#hr
新しいサンプルを追加したため、以下の内容は古くなっていま...
~
''要素のトグル表示'' [[→ DEMO>https://design.kyusan-u.a...
ボタンをクリックする度に、表示/非表示を切り替えるサンプル...
-1） 以下の index.html、sample.js を同一フォルダに保存（C...
-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="st...
</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 )から見て２番目の子要...
~
~
終了行:
*jQuery Sample
[[jQuery]]｜[[jQuery/Selector]]｜[[jQuery/Method]]
~
以下に示す事例は、 jQueryの使い方を理解するためのものです...
~
***CONTENTS
#contents2_1
~
~
**基本サンプル
テキスト、HTML、CSS を動的に変更する基本的な事例です。
-''DEMO''：https://koichi-inoue.github.io/JQ_Basic/
-''CODE''：https://github.com/koichi-inoue/JQ_Basic
~
~
**エフェクト・アニメーション
jQuery のエフェクト・アニメーションを確認するための簡単な...
[[&small(この種の「動き」は、CSSアニメーションでも実現で...
このサンプルでは、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.kyusa...
文字が上から少しずつ表示されるように見えるサンプルです。...
''HTML''： じわっと表示したい部分にIDを設定
<div id="message">
：
ここに文章
：
</div>
''CSS''：当該部分の初期設定として、不透明度：0、高さ：0
#message{
opacity: 0;
height: 0px;
}
''JavaScript''：6秒かけて、不透明に、同時に高さを500pxまで
$( function(){
$("#message").animate( { opacity: '1', height : '500p...
});
~
~
**メニューのトグル
クリックで開閉するメニューのサンプルです。
-''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="P0...
--メニューの＜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/Stick...
-ImageMapster http://www.outsharked.com/imagemapster/
イメージマップのロールオーバーが設定できます。
参考：http://honttoni.web.fc2.com/blog_honttoni/samples/s...
-Vegas Background SlideShow http://vegas.jaysalvat.com/
背景にスライドショーを置くプラグインです。
-物理エンジンBox2Dを使ったサンプル
http://lib.ivank.net/?p=demos&d=box2D
~
~
''旧記事''
#hr
新しいサンプルを追加したため、以下の内容は古くなっていま...
~
''要素のトグル表示'' [[→ DEMO>https://design.kyusan-u.a...
ボタンをクリックする度に、表示/非表示を切り替えるサンプル...
-1） 以下の index.html、sample.js を同一フォルダに保存（C...
-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="st...
</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 )から見て２番目の子要...
~
~
ページ名:
