2月2012

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終わり

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

2012年2月2日12:12 AM| カテゴリー： Java ScriptとJ Query,見習い奮闘記| コメント (0)

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");

  })

▼サンプルはこちら

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

2012年2月1日1:12 AM| カテゴリー： Java ScriptとJ Query,見習い奮闘記| コメント (0)

新しい記事 »