top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_1370

電子書籍 epub:楽しい作業・・・目次の階層表示(2階層まで)と、ページ内遷移 ・・・ 【epub viewer を創ろ #11】

 2011-11-28
 電子書籍 epub viewer。少し時間空いた・・・
細かい表現カスタマイズを。

 ◆目次の階層表示
  epub3 なら、'toc.xhtml'、epub2 なら、'toc.ncx'
  が目次ファイルなのだけれど、
  今までの方法では、階層化された情報が得られなかった。
  一応2段階まで、階層表示をできるようにしておく。
   電子書籍 epub viewer 目次の階層表示


 ◆ページ内遷移
  目次の中には、単純にファイル指定しているものだけでなく
  #toname のように、ページ内遷移しているものがある。
  これへの対応。(jQuery利用してスムーズ移動させる)
   電子書籍 epub viewer ページ内遷移
    ▼
   電子書籍 epub viewer jQuery利用してスムーズ移動させる


  詳しくは、追記に  ▼

more

************************************************
◎ 目次の階層表示(2階層まで)と、ページ内遷移
              :epub viewer を創ろ

************************************************


目次の階層表示


 たとえば、
 ■EPUB日本語基準研究グループ ダウンロード で、配布されている
  ・EPUB3サンプルコード の
   ・小さなメディアの必要(epub3.0) では、
   目次ファイル(toc.xhtml) は、
   小さなメディアの必要(epub3.0) 目次ファイル
   のように、階層化(2階層)されている。

   これを今までのやり方で取得した場合、
   階層レベルを示す値は得られなかったので、
   (無理やりだけど)子供要素にさらに、<ol> があるかどうか
   調べ、あれば親階層 ということで、2段階までは
   情報を得て、HTML整形されるように改造。
var tarobj = d.getElementsByTagName("nav")[0].getElementsByTagName("ol")[0];
var lis = tarobj.getElementsByTagName("li");
var maxlevel = 0;
for(var i=0; i<lis.length; i++) {
var ext_ols = lis[i].getElementsByTagName("ol");
var nowlevel = 0;
if(ext_ols.length > 0){
nowlevel = 1; maxlevel = 1;
for(var i2=0; i2<ext_ols.length; i2++) {
var lis2 = ext_ols[i2].getElementsByTagName("li");
if(lis2.length > 0){
for(var i3=0; i3<lis2.length; i3++) {
var ext_ols2 = lis2[i3].getElementsByTagName("ol");
if(ext_ols2.length > 0){
nowlevel = 2; maxlevel = 2; break;
}
}
}
}
fileList.push(nowlevel);
}else{
fileList.push(nowlevel);
}
}
fileList.push(maxlevel);
 とても乱暴(?)ではあるけれど・・・
 HTML生成の際は、
$('#bookIndex').html('');
var outhtml = "<dl>";
outhtml += "<dt>";
if(topurl != ''){
var tohref = "javascript:void();";
var toonclick = "javascript:viewGo_epub('"+topurl+"','img','imgView');return false;";
outhtml += "<a href=\""+tohref+"\"";
if(toonclick != ''){
outhtml += " onclick=\""+toonclick+"\"";
}
outhtml += " title=\""+tocfxmltitle[0]+"\">";
}
outhtml += tocfxmltitle[0];
if(topurl != ''){
outhtml += "</a>";
}
outhtml += "</dt>";
outhtml += "<dd>";
outhtml += "<ul>";
var maxlevel = tocfxmlsrclevel[(tocfxml.length)];
var nowlevel = 0; var flgul = 0;
for(var i=0; i<tocfxml.length; i++) {
if(
(tocfxml[i]!='')&&(tocfxmlsrc[i]!='')
){
var thislevel = tocfxmlsrclevel[i];

var tofile = tocfxmlsrc[i];
var tohref = "javascript:void();";
var toonclick = "javascript:viewGo_epub('"+tofile+"','txt','bookContents');return false;";

if(maxlevel >= 1){
if(thislevel < maxlevel){
}else{
if(flgul == 1){ outhtml += "</ul></li>"; flgul = 0; }
}
}
outhtml += "<li><a href=\""+tohref+"\"";
if(toonclick != ''){
outhtml += " onclick=\""+toonclick+"\"";
}
outhtml += " title=\""+tocfxml[i]+"\">";
outhtml += tocfxml[i];
outhtml += "</a>";

if(maxlevel >= 1){
if(thislevel < maxlevel){
outhtml += "</li>";
}else{
outhtml += "<ul>"; flgul = 1;
}
}
}
}
if(flgul == 1){ outhtml += "</ul></li>"; flgul = 0; }
outhtml += "</ul>";
outhtml += "</dd>";
outhtml += "</dl>";

$('#bookIndex').html(outhtml);
$('#bookIndex').fadeIn('fast'); $('#lefter').fadeIn('fast');
 と利用する。

ページ内遷移


   目次ファイル(toc.xhtml) は、
   text/mymedia_006_body.xhtml#mark_310 などのように
   ページ内遷移が指定されているものがある。
   これに対応しなくては・・・
 どうせなら、スムーズに移動させたかったので、よく使う
 ・jquery.easing.1.3.js を利用して・・・
//ページ内遷移
function goNameLink(strtag){
var tagOffset = $('#'+strtag).offset().top;
$("html,body").animate({
scrollTop: tagOffset
},{
duration: 1000,
easing: "easeOutExpo"
});
}
 という関数を用意しておいて、
 当該ファイルのデータを取得する際、
var tourl = thisdirdata+'/'+url;
var toaname = "";
if(String(url).indexOf("#",0) >= 0){
var target_urls = String(url).split("#");
tourl = thisdirdata+'/'+target_urls[0];
toaname = target_urls[1];
}
 として、#指定を探り出し、表示させた後、
document.getElementById(toareaid).innerHTML = outhtml;
$('#'+toareaid).fadeIn('fast');
if(toaname != ''){
goNameLink(toaname);
}
 と移動させる。
 ・・・一応動いてはいえる。バグとりが必要だが。
commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/1370-9f27a76a
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。