>

Home Design Archives javascript Pager ページ分割を行うpager

ページ分割を行うpager

  • 2007年9月 1日
長い文章などを手軽に切り替える事ができるjQueryプラグイン。

風の又三郎

どっどど どどうど どどうど どどう
青いくるみも吹きとばせ
すっぱいかりんも吹きとばせ
どっどど どどうど どどうど どどう

谷川の岸に小さな学校がありました。
 教室はたった一つでしたが生徒は三年生がないだけで、あとは一年から六年までみんなありました。運動場もテニスコートのくらいでしたが、すぐうしろは栗(くり)の木のあるきれいな草の山でしたし、運動場のすみにはごぼごぼつめたい水を噴(ふ)く岩穴もあったのです。

 さわやかな九月一日の朝でした。青ぞらで風がどうと鳴り、日光は運動場いっぱいでした。黒い雪袴(ゆきばかま)をはいた二人の一年生の子がどてをまわって運動場にはいって来て、まだほかにだれも来ていないのを見て、「ほう、おら一等だぞ。一等だぞ。」とかわるがわる叫びながら大よろこびで門をはいって来たのでしたが、ちょっと教室の中を見ますと、二人(ふたり)ともまるでびっくりして棒立ちになり、それから顔を見合わせてぶるぶるふるえましたが、ひとりはとうとう泣き出してしまいました。というわけは、そのしんとした朝の教室のなかにどこから来たのか、まるで顔も知らないおかしな赤い髪の子供がひとり、いちばん前の机にちゃんとすわっていたのです。そしてその机といったらまったくこの泣いた子の自分の机だったのです。

※<div>で改ページ


 もひとりの子ももう半分泣きかけていましたが、それでもむりやり目をりんと張って、そっちのほうをにらめていましたら、ちょうどそのとき、川上から、
「ちょうはあ かぐり ちょうはあ かぐり。」と高く叫ぶ声がして、それからまるで大きなからすのように、嘉助(かすけ)がかばんをかかえてわらって運動場へかけて来ました。と思ったらすぐそのあとから佐太郎(さたろう)だの耕助(こうすけ)だのどやどややってきました。
「なして泣いでら、うなかもたのが。」嘉助が泣かないこどもの肩をつかまえて言いました。するとその子もわあと泣いてしまいました。おかしいとおもってみんながあたりを見ると、教室の中にあの赤毛のおかしな子がすまして、しゃんとすわっているのが目につきました。

 みんなはしんとなってしまいました。だんだんみんな女の子たちも集まって来ましたが、だれもなんとも言えませんでした。
 赤毛の子どもはいっこうこわがるふうもなくやっぱりちゃんとすわって、じっと黒板を見ています。すると六年生の一郎(いちろう)が来ました。一郎はまるでおとなのようにゆっくり大またにやってきて、みんなを見て、 「何(なに)した。」とききました。

 みんなははじめてがやがや声をたててその教室の中の変な子を指さしました。一郎はしばらくそっちを見ていましたが、やがて鞄(かばん)をしっかりかかえて、さっさと窓の下へ行きました。
 みんなもすっかり元気になってついて行きました。
「だれだ、時間にならないに教室へはいってるのは。」一郎は窓へはいのぼって教室の中へ顔をつき出して言いました。
「お天気のいい時教室さはいってるづど先生にうんとしからえるぞ。」窓の下の耕助が言いました。
「しからえでもおら知らないよ。」嘉助が言いました。
「早ぐ出はって来(こ)、出はって来。」一郎が言いました。けれどもそのこどもはきょろきょろ室(へや)の中やみんなのほうを見るばかりで、やっぱりちゃんとひざに手をおいて腰掛けにすわっていました。

 ぜんたいその形からが実におかしいのでした。変てこなねずみいろのだぶだぶの上着を着て、白い半ずぼんをはいて、それに赤い革(かわ)の半靴(はんぐつ)をはいていたのです。
 それに顔といったらまるで熟したりんごのよう、ことに目はまん丸でまっくろなのでした。いっこう言葉が通じないようなので一郎も全く困ってしまいました。
「あいづは外国人だな。」
「学校さはいるのだな。」みんなはがやがやがやがや言いました。ところが五年生の嘉助がいきなり、 「ああ三年生さはいるのだ。」と叫びましたので、
「ああそうだ。」と小さいこどもらは思いましたが、一郎はだまってくびをまげました。

 変なこどもはやはりきょろきょろこっちを見るだけ、きちんと腰掛けています。
 そのとき風がどうと吹いて来て教室のガラス戸はみんながたがた鳴り、学校のうしろの山の萱(かや)や栗(くり)の木はみんな変に青じろくなってゆれ、教室のなかのこどもはなんだかにやっとわらってすこしうごいたようでした。
 すると嘉助がすぐ叫びました。
「ああわかった。あいつは風の又三郎(またさぶろう)だぞ。」
 そうだっとみんなもおもったとき、にわかにうしろのほうで五郎が、
「わあ、痛いぢゃあ。」と叫びました。

※<p>で改ページ


Options

navId
For use in more than one pagers per page, takes a string. Default 'nav'
navClass
Gives the nav of the pagers a CSS class. Default 'nav'
navAttach
Position of the nav. Takes either 'prepend', 'append', 'before' or 'after'. Default 'append'.
highlightClass
CSS class of the highlighted link. Default 'highlight'.
prevText
Text for previous link. Default '&laquo;' which gives '«'
nextText
Text for next link. Default '&raquo;' which gives '»'
linkText
Array of text for links. e.g. ['page 1', 'page 2', ...]
linkWrap
Wraps link in HTML using jQuery wrap method. e.g. '<div></div>' would wrap links in a div layer
height
Sets a min-height (height in IE) for your content. Default works out largest content automagically

ポイントとして利用するのもいいですし、個別ページなどをCMSを利用せずに手軽に分割するなど色々と活用方法がありそうです。

rikrikrik: pager jQuery plug-in

カテゴリ
jQuery/Pager
Entries of this Category
    jQuery/JSONP/ABROAD01 Others/addrajax Others/ajaxzip jQuery/BlockUI Case Study Code jQuery/Corner mootools/Fancyform Others/faviconapi jQuery/Flash Highslide JS jQuery/Innerfade jQuery jQuery/JSONP jQuery/Media mootools jQuery/NewsSlider Others jQuery/Pager Others/Reflection jQuery/Superfish jQuery/TableSorter Others/table_sortable jQuery/Tabs jQuery/ThickBox YUI/TreeView YUI
文字や画像をフェードイン&フェードアウトする「Innerfade」javascriptYUIのTreeViewでAjax

emailアドレスを入力:

FeedBurnerからDesignの更新情報がメールで届きます。

open all | close all

ページの先頭に戻る