Java ScriptとJ Query

FAQを作ってみたい J Queryで挑戦

クリックすると、びろびろびろっと回答が出るFAQをJ Queryで作ってみました。

h2要素に質問文を書き、その次に回答用のDivを作りました。Divの中にはP要素でもリストでも何でも好きなものが入れられる予定です。で、方法としては、はじめはh2のみ表示してDivはすべて非表示。質問のh2をクリックすると、その次のDivのみ表示します。それから、別の質問をクリックすると、その前にクリックしたところの回答文は非表示になります。

で、クリックできることを知らせるために、h2にマウスが乗っかるとポインターの形になるようにしてあります。

HTML

<div id="faq">
<h1>FAQ</h1>
<p>ご質問はこちらをご覧ください。</p>
<h2>1.なぜ、見習なんですか。</h2>
<div><p>まだ若いからです。ぶひっ</p></div>
<h2>2.見習が得意なことってありますか。</h2>
<div><p>あ、ちょっと待っていただけますか。あれー、いったいなんだろう。あれあれあれ・・・。</p> <p>あの~、えっと、用件ってなんでしたっけ?</p></div>
<h2>3.見習って、どう読むんですか。</h2>
<div><p>けんしゅうって読みます。「一見の価値あり」の「けん」に「学習」の「しゅう」です。</p> <p>ですよね?あれ、字引がないかな?</p></div>
<h2>4.見習とかけだしって、どう違うんですか。</h2>
<div><p>えへへ。</p></div>
<h2>5.いつまで見習やってるつもりですか。</h2>
<div><p>がびょーん。</p></div></div>

CSS

*{
margin:0;
padding:0;
}
#faq {
width:80%;
margin:auto;
}
h1{
background-color:#09f;
color:#fff;
padding:5px;
margin-bottom:5px;
}
#faq div.closed{
display:none;
}
h2{
font-size:15px;
padding:5px;
border-bottom:#09f 1px dashed;
}
h2:hover{
cursor:pointer;
}
#faq div {
padding:10px 20px 0;
font-size:12px;
}

Java Script(J Query)

// JavaScript Document
$(function(){
var class_closed='closed';// クラスclosedを使えるよう定義
$('#faq').each(function(){
var faq_div=$(this);
var allH2=faq_div.find('h2');
var allDiv=faq_div.find('div');
function closeAll(){
allDiv.addClass(class_closed);
}
function openit(div){
div.removeClass(class_closed);
}
closeAll();//すべてを閉じる
allH2.click(function(){
var h2=$(this);
var div=h2.next();
closeAll();
openit(div);
});//クリックですべてを閉じて、クリックした次を開く
});//faq.each function終わり
})//1番目function終わり

▼サンプルはこちら

どうでしょう。それっぽいですよね?でも、2つ目以降の質問文をクリックしたとき、前の問題を非表示にしたほうがいいのか、表示したほうがいいのか、分からないです。って場合によるのでしょうか・・・。ということで、非表示にしないように、最後ですべてのDIVを閉じる動作をやめてみました。


// JavaScript Document
$(function(){
var class_closed='closed';// クラスclosedを使えるよう定義
$('#faq').each(function(){
var faq_div=$(this);
var allH2=faq_div.find('h2');
var allDiv=faq_div.find('div');
function closeAll(){
allDiv.addClass(class_closed);
}
function openit(div){
div.removeClass(class_closed);
}
closeAll();//すべてを閉じる
allH2.click(function(){
var h2=$(this);
var div=h2.next();
//closeAll();ここをコメントアウトすれば、次の質問文をクリックしても、前の回答文は非表示にならない
openit(div);
});//クリックした次を開く
});//faq.each function終わり
})//1番目function終わり

いひひ、なんとなく、それっぽくなってきて、うれしい見習です。うふふ。

J Queryを使って共通部分を読み込む テンプレートの代わり

htmlを書いていて、ヘッダーとか、フッターとか、グローバルナビとか、多ページ構成のサイトの共通部分をまとめて修正したいとき、どうしよう・・・。Dream Weaverのテンプレートの機能、ライブラリの機能、一括置換・・・。PHPで読み込む・・・。

そんな解決策のひとつがJ Queryを使うことみたいです。たとえば、ヘッダー、フッター、ナビゲーションの3ブロックをそれぞれ各ページの共通部分として管理して、J Queryで読み込ませられます。

それぞれの部分を、header.html、footer.html、navi.htmlという別ファイルにして、そこにフツーにHTMLで書きます。で、読み込む元のファイル、たとえばindex.html内では、それぞれの部品をおきたい場所に空divをおき、適当なIDを振ります。そして外部化したJSファイルにJ Queryを書きます。

このとき、JSファイルで、読み込むヘッダーなどの書いてあるHTMLファイルのパスを書きますが、Java Scriptは読み込む先のHTMLファイルで実行されるので、パスの階層がずれないように注意しなればいけないです。いろんな階層のHTMLで読み込まれることを考えると、絶対URLか絶対パス(仮想パス)で書くほうがよさそう。

HTML

<div id="wrap">
<div id="header"></div>
<div id="main"><p>ここにメインコンテンツを書きます</p></div>
<div id="navi"></div>
<div id="footer"></div>
</div>

header.html

<p>ここにヘッダーを書きます</p>

navi.html

<ul>
<li>navi1</li>
<li>navi2</li>
<li>navi3</li>
<li>navi4</li>
</ul>

footer.html

<p>ここにフッターを書きます</p>

Java Script (J Query)

// JavaScript Document
$(function(){
var header=$("#header");
var navi=$("#navi");
var footer=$("#footer");
header.load("/csstest/jstest/templates/header.html");
navi.load("/csstest/jstest/templates/navi.html");
footer.load("/csstest/jstest/templates/footer.html");
})

▼サンプルはこちら

なんとかでけた?どきどき。

J Queryでぱたぱたアコーディオンを作ってみる

WebデザイナーのためのjQuery入門でお勉強中です。

アコーディオンタイプのぱたぱたメニューをJQueryでやってみました。ちょっと心もとないけど・・・。どきどき。

あくまで勉強途中の見習のビボー録です。あしあと、あしあと・・・。ということで、許してください。

XHTML

<dl class="patapata">
<dt>ぱたぱた1番</dt><dd>1番きゃ、見えちゃった。ずろーん。ずろーん。びろーん。びろーん。でろーん。でろーん。</dd>
<dt>ぱたぱた2番</dt><dd>2番きゃ、見えちゃった。ずろーん。ずろーん。びろーん。びろーん。でろーん。でろーん。</dd>
<dt>ぱたぱた3番</dt><dd>3番きゃ、見えちゃった。ずろーん。ずろーん。びろーん。びろーん。でろーん。でろーん。</dd>
<dt>ぱたぱた4番</dt><dd>4番きゃ、見えちゃった。ずろーん。ずろーん。びろーん。びろーん。でろーん。でろーん。</dd>
<dt>ぱたぱた5番</dt><dd>5番きゃ、見えちゃった。ずろーん。ずろーん。びろーん。びろーん。でろーん。でろーん。</dd>
</dl>
<dl class="patapata" id="imgs">
<dt>今日の見習1号</dt><dd><img src="imgs/fwpath00.gif" width="260" height="195" alt="" /></dd>
<dt>今日の見習2号</dt><dd><img src="imgs/fwpath00.gif" width="260" height="195" alt="" /></dd>
<dt>今日の見習3号</dt><dd><img src="imgs/fwpath00.gif" width="260" height="195" alt="" /></dd>
<dt>今日の見習4号</dt><dd><img src="imgs/fwpath00.gif" width="260" height="195" alt="" /></dd>
<dt>今日の見習5号</dt><dd><img src="imgs/fwpath00.gif" width="260" height="195" alt="" /></dd>
</dl>

CSS

*{
margin:0;
padding:0;
font-size:15px;
}
dl{
width:200px;
position:relative;
}
dd{
border:1px #999 solid;
background-color:#FFCCCC;
padding:10px;
line-height:1.1em;
border-top:none;
}
dt{
border:1px #999 solid;
background-color:#FF66CC;
padding:10px;
}
#imgs dd{
padding:0;
line-height:1;
border:none;
background-color:transparent;
}
dl#imgs {
width:260px;
}
#imgs dt{
background-color:#00CCFF;
width:240px;
}

Java Script (JQuery)

// JavaScript Document
$(function(){
$('.patapata').each(function(){
var dl=$(this);
var allDt=dl.find('dt');
var allDd=dl.find('dd');
allDd.hide();//すべてのddを非表示
allDt.css('cursor','pointer');//カーソル変化
allDd.css('cursor','pointer');//カーソル変化
allDt.mouseenter(function(){
var dt=$(this);
var dd=dt.next();
allDd.hide();//すべてのddを非表示
dd.show();//カーソルが乗った次のddのみ表示
dt.css('opacity',0.5);//カーソルが乗ったdtの色を薄くする
});
allDt.mouseleave(function(){
var dt=$(this);
dt.css('opacity',1);//マウスがdtから離れると色が戻る
});
allDd.mouseenter(function(){
var dd=$(this);
var dt=dd.prev();
dt.css('opacity',0.5);//ddにマウスが乗ると直前のdtの色が薄くなる
});
allDd.mouseleave(function(){
var dd=$(this);
var dt=dd.prev();
dt.css('opacity',1);//ddからマウスが離れると直前のdtの色が戻る
});
dl.mouseleave(function(){
allDd.hide();//dlからマウスが離れると、その中のddはすべて非表示
});

});//each終わり
})//function終わり

サンプルはこちら