memo-memo

久々のjQueryの記事。
jQueryで、ページをスムーズに移動させる方法は、沢山ありますが、今回はこちらのチュートリアルにそってつくってみました。

どうやら、FAQを作るための物らしいけれど、今回は普通にページの移動として使わせてもらいました。

まずは、「Sourse」をクリックして、ダウンロードします。

zipファイルを解凍すると、ファイルが色々入っているのですが、その中の

js/jquery-scrollTo.js

が本体です。

まずは、ファイルを読み込みます。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/ecmascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="jquery-scrollTo.js"></script>

jQuery-uiは、ダウンロードされるフォルダーに一緒に入っているものは、1.7.2だけど、別に1.8でも動きました。

次に、htmlを記述します。

<ul id="questions">
<li id="q000"><a href="#a000">質問その1</a></li>
<li id="q000"><a href="#a001">質問その2</a></li>
</ul>
<div id="a000">
…
…
</div>
<div id="a001">
…
…
</div>

こんな感じです。最終的に、「質問その1」をクリックすると、<div id=”a000″>に、「質問その2」をクリックすると、<div id=”a001″>にスルスル移動する様な感じになります。

次に、実行するスクリプトを記述します。

<script type="text/javascript">
$(function() {
 $("#questions > li").click(function() {
 var qu = $(this).attr("id");
 var an = "#" + qu.replace("q","a");

 $.scrollTo(an, {duration: 800, axis:"y", onAfter:function(){
 $(an).effect("highlight", {color: "#99c0e1"}, 2000); }
 });
 });
});
</script>

クリックすると、liのidを取得して、「q」を「a」に置換して、#を追加してます。

青字の部分が実行部分っぽいです。スクロールした後、該当箇所(divで囲ってある部分)を、#99c0e1の色でハイライトさせてます。

とりあえずはここまでで、ページのスルスルスクロールとハイライトは完成です。

本サイトのチュートリアルには、ページトップに戻る方法も記述されてます。

本当なら、phpとかでxmlを取得すればいいんだけど、phpが使えない時にはちょっと有効かもしれないGoogle AJAX Feedの使い方のメモ。

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABCD"></script>
<script type="text/javascript">
	google.load("feeds","1");
</script>
<script type="text/javascript" src="jquery.js"></script>

まずはヘッダーに、上記の様にgoogleapiとjQueryを読み込む。
で、次は外部ファイル化したjsファイルの中に処理を記述する。
例えば

google.setOnLoadCallback(function(){
var feed = new google.feeds.Feed("フィードのURL");
feed.setNumEntries(4);
//フィードの取得&取得フィードの処理(loadの引数"function"で行う)
feed.load(function(result){
//読み込みが成功したときの処理
if(!result.error){ //エラーじゃない場合
//タイトルの表示
var html="";
for(var i=0; i<result.feed.entries.length; i++){
var blogdate = new Date(result.feed.entries[i].publishedDate);
var blogYear = blogdate.getFullYear();
var blogMonth = blogdate.getMonth()+1;
var blogDay = blogdate.getDate();
html += "<dl>";
html += "<dt>"+ blogYear +"年"+ blogMonth +"月"+ blogDay +"日</dt>";
html +="<dd><a target='_blank' href='"+ result.feed.entries[i].link +"'>"+ result.feed.entries[i].title +"</a></dd>"
html +="</dl>";
}
$("#news_container").html(html);
}
});
});

こんな感じ。
リファレンスの、「JSON 形式の結果」の所に、「result.feed.xxxx」が何を出力するか書いてある。
例えば、result.feed.titleはフィードタイトルを取得するらしい。

とりあえずメモ。
http://blog.suz-lab.com/2009/11/htmlenter.html
ついでに、こっちもメモ。
http://semooh.jp/jquery/api/events/keypress/fn/
いずれ、今まで作った作品を、ブラッシュアップする時に使ってみよう。

今回試してみたプラグインは、myAccordionです。
配布サイトは、こちら。

このプラグインは、配布サイトに、使い方が一切かかれていません。ただ、そんなに使うのは難しく無かったです。

html

 <div id="myAccordion">
<!-- Element -->
<div class="myAccordion-declencheur"><p>その１</p></div>
<div class="myAccordion-content">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
<!-- /Element -->
<!-- Element -->
<div class="myAccordion-declencheur"><p>その２</p></div>
<div class="myAccordion-content">
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
</div>
<!-- /Element -->
</div>

まずhtmlは、上記のように全体を、myAccordionというidを付けたdivタグで括ります。その中に、アコーディオンで表現したい見出しと、本文を書いていきます。

上記の場合、グリーン、ブルーの部分が、各々アコーディオンで表現される部分です。

で、次は、javascriptです。

javascript

$(function() {
	$("#myAccordion").myAccordion({
		speed: "fast", // @param : low, medium, fast
		defautContent: 0 // @param : number
	});
});

こんな感じで、呼び出します。（ダウンロードした、プラグイン本体と、cssは、別途読み込みます。）

パラメータも、今回は2つしかないようです。

赤字の「speed」は、文字通り、アコーディオンが、開いたり閉じたりするスピードの調整です。

青字の「defautContent」は、ブラウザに表示されたときに、一番最初に開いている項目です。

上記のhtmlの場合、「defautContent:0」を指定した場合、グリーンの部分が、一番最初に開いた状態で、ブラウザに表示されます。

付属のcssも、非常にシンプルなので、自分のサイトに合わせて、カスタマイズしやすそうです。

今回使ってみたプラグインは、こちらです。

いい感じに、画像を並列に表示して、スライドしてくれます。

横についている「⇒」をクリックすると、画像がスライドします。
ダウンロードページは、こちらです。

使い方は、まずプラグインをダウンロードします。で、jQuery本体とプラグイン本体と、cssを2ファイル分、htmlに読み込みます。

cssは、メインのcss（libフォルダに入っている、jquery.jcarousel.css）と、使いたいスキン（skins/ie7もしくはtango/skin.css）の2ファイルです。今回は、ie7を使ってみました。

<link rel="stylesheet" type="text/css" href="path/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="path/ie7/skin.css" />
<script type="text/javascript" src="path/jquery.js"></script>
<script type="text/javascript" src="path/jquery.jcarousel.pack.js"></script>

こんな感じです。

あとは、htmlの<ul>タグを使って、イメージを指定します。

<ul id="mycarousel" class="jcarousel-skin-ie7">
 <li><img src="images/gazou_01_s.jpg" width="75" height="75" /></li>
 <li><img src="images/gazou_02_s.jpg" width="75" height="75" /></li>
 <li><img src="images/gazou_03_s.jpg" width="75" height="75" /></li>
 <li><img src="images/gazou_04_s.jpg" width="75" height="75" /></li>
 <li><img src="images/gazou_05_s.jpg" width="75" height="75" /></li>
 </ul>

こんな感じです。

後は、scriptタグで、実行します。

<script type="text/javascript">
$(function(){
 $("#mycarousel").jcarousel({
 size : 5,
 scroll:1
 });
});
</script>

こんな感じです。他のプラグイン同様、連想配列形式で、パラメータを引数に持てます。パラメータについての詳細は、本サイトを確認しましょう。

で、注意点としては、まずhtmlの赤字で書いてあるクラス名ですが、使いたいskinの名前になる様です。今回は、jcarousel-skin-ie7もし、tangoを使いたかったら、クラス名はjcarousel-skin-tangoになります。その際、読み込むcssも、tangoフォルダに入っている、skin.cssを読み込もう。

次の注意点は、青字の画像のサイズです。どうやらデフォルトは、width、hight共に、75pxでcssのファイルが作られているようです。この画像をwidth、hight共に100pxにしたい場合、htmlだけじゃなくて、skin.cssの内容も変えなきゃならないっぽいです。

変えたのは、5カ所です。

まず、ie7/skin.cssの7～10行目のwidthの値

.jcarousel-skin-ie7 .jcarousel-container-horizontal {
 width: 320px;/*デフォルトでは、 245px*/
 padding: 20px 40px;
}

つぎは、18～21行目のwidthと、heightの値

.jcarousel-skin-ie7 .jcarousel-clip-horizontal {
 width:  320px;/*デフォルトでは、 245px*/
 height: 102px;/*デフォルトでは、 75px*/
}

つぎは、28～32行目のwidthと、heightの値

.jcarousel-skin-ie7 .jcarousel-item {
 width: 100px;/*デフォルトでは、 75px*/
 height: 100px;/*デフォルトでは、 75px*/
 border: 1px solid #fff;
}

とり合えず、上記の部分を直したら、きちんと表示されました。様は、表示しているところを画像サイズに合わせて広げる感じです。

後、写真自体を中央に配置したい場合は、jquery.jcarousel.cssの5行目以降の

.jcarousel-container {
 position: relative;
  }

に、

.jcarousel-container {
 position: relative;
 margin:0 auto;
}

こんな感じで、赤線のmargin:0 auto;を追加すれば、真中に表示出来ました。

他にも、本サイトのサンプルを見ると、いろいろ使い方があるみたいなので、追々触ってみようと思います。