#navi_header|JavaScript|
お仕事で、JavaScriptで「前へ」「次へ」を実装することになりました。まぁ、jQuery使ってOKで、ちゃんとレビューしてくれる技術者も居ますので勉強がてら試作してみます。
横方向に滑らかにスクロールするのは「カルーセル」(carousel)と呼ばれてるらしく、こんなのもあるようです。
- カルーセル表示するJavaScriptライブラリ （jCarousel Lite）
-- http://youmos.com/news/jcarousel_lite
- jCarousel Lite
-- http://www.gmarwaha.com/jquery/jcarousellite/index.php
今回は単純にページ遷移無しで表示が切り替われば良いので、ページの単位となるdivタグブロックを"display: none"でページ数分出力しておき(実際はプログラムが動的に生成すると思われます)、「前へ」「次へ」クリックされた時にdisplayを順繰りに"block"にしていけばOKっぽいです。というか動作原理として。
というわけで、ちょっと長いですが試作品第一号。
#more||
ID属性とかかなり決め打ち使ってますので汎用性は低いです。あと、{next|prev}page()がbooleanを返していますが、作り始めた当初はこれで前/次のリンク状態を交信させようとしてたからです。{next|prev}ok()とupdate_navilinks()を実装したら、使わなくなっちゃいました。
#code||>
||<
#navi_footer|JavaScript|