top


総投稿数 本 
no_

スポンサーサイト

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

電子書籍 epub:ページ遷移(タイトルクリックやマウススクロール以外に ページ遷移という動き) ・・・ 【epub viewer を創ろ #14】

 2011-12-01
 電子書籍 epub viewer。午前中はこの作業。
やり残し継続。

 ◆ページ遷移
  マウススクロールやインデックスクリック以外に、
  [前へ][次へ]のような ナビゲーションが必須。
   電子書籍 epub viewer マウススクロールやインデックスクリック以外に、[前へ][次へ]のような ナビゲーションが必須
  一応 できた。


  詳しくは、追記に  ▼

more

************************************************
◎ ページ遷移(タイトルクリックやマウススクロール以外に ページ遷移という動き)
              :epub viewer を創ろ

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


※今回は、各種いろいろと改造したな。

初期変数の整備


 ※本日現在
var thistitle = ""; //title
var thisversion = ""; //epub version
var thisdirdata = ""; //contents dir
var thistopurl = ""; //cover
var thisindex_max = 0; //max index
var maxlimitindex = 99999; //limit index
thistopurl:表紙ある場合、当該ファイルパス
thisindex_max:本epubファイルの目次数(格納用)
maxlimitindex:目次数は上限決めて、プラスこの数字を表紙扱いにする
・・・としておいて

epubファイルを読込・表示した際


outhtml += "<li><a href=\""+tohref+"\"";
outhtml += " class=\"epubindexitem\"";
outhtml += " id=\"epubindex_"+i+"\"";
if(toonclick != ''){
outhtml += " onclick=\""+toonclick+"\"";
}
outhtml += " title=\""+totitle+"\">";
outhtml += totitle;
outhtml += "</a>";
 目次インデックスの a属性に
・特定id と 共有class を与えておく。

epubファイルを読込・表示した際


 ■クリックして当該ファイルを表示させるスクリプト
var toonclick = "javascript:nowpage_this = "+i+";viewGo_epub('"+tofile+"','txt','bookContents','"+totitle+"',"+i+");return false;";
 連番数値を引数に持たせ、
 ■クリックして当該ファイルを表示させる部分
outhtml += "<li><a href=\""+tohref+"\"";
outhtml += " class=\"epubindexitem\"";
outhtml += " id=\"epubindex_"+i+"\"";
if(toonclick != ''){
outhtml += " onclick=\""+toonclick+"\"";
}
outhtml += " title=\""+totitle+"\">";
outhtml += totitle;
outhtml += "</a>";
 目次インデックスの a属性に
・特定id と 共有class を与えておく。

ボタンの表示


 どこに置くか悩んだ末、ツールの名称など
 最初の表示だけで十分、そのエリアのhtml要素を
 変更することにし、
// ツール名>ナビボタンに
outhtml = "";
outhtml = "<div class='clearfix'>";
if(thistopurl!=''){
outhtml += "<div class='float_left'>";
outhtml += "<input type=\"button\" class=\"nabibt\" value=\"表紙\"";
outhtml += " onclick=\"javascript:pageNavi("+maxlimitindex+");\" />";
outhtml += "</div>";
}
outhtml += "<div class='float_left'>";
outhtml += "<input type=\"button\" class=\"nabibt\" value=\"前へ\"";
outhtml += " onclick=\"javascript:pageNavi(-1);\" />";
outhtml += "</div>";
outhtml += "<div class='float_left'>";
outhtml += "<input type=\"button\" class=\"nabibt\" value=\"次へ\"";
outhtml += " onclick=\"javascript:pageNavi(1);\" />";
outhtml += "</div>";
outhtml += "</div>";

$('#area_toolname').html(outhtml);
$('#area_toolname').css('padding-top','0px');
 ※表紙要素がない場合は、当然
  [表紙]ボタンは不要。

ページ移動アクション


 関数で、
// ページナビ
var nowpage_this = maxlimitindex; // 表紙
function pageNavi(intnum){
if(intnum == maxlimitindex){ //表紙
if(thistopurl!=''){ nowpage_this = maxlimitindex; viewGo_epub(thistopurl,'img','imgView',thistitle,maxlimitindex); }
}else{
if((nowpage_this == maxlimitindex)&&(intnum == 1)){ nowpage_this = 0;
}else{
nowpage_this = parseInt(nowpage_this) + parseInt(intnum);
}
if(nowpage_this < 0){ nowpage_this = 0;
}else{if(nowpage_this >= thisindex_max){ nowpage_this = (thisindex_max - 1); }}
var v = document.getElementById('epubindex_'+nowpage_this);
if(v){ $(v).click(); }
}
}
 を用意し、呼び出す。
 ここで、さきほど組み込んだ 左目次インデックスの
 id と class属性が生きる。
 ・当該id をclick()発生させて、その先で、
// index css
if((intindex >=0)&&(intindex != maxlimitindex)){
$('.epubindexitem').css('font-weight','normal');
$('#epubindex_'+intindex).css('font-weight','bold');
}
 やっぱり、今どのインデックスが表示されているか
 視覚化しないとねぇ。
 表紙(画像)がクリックされた場合は、
//top
if(url == thistopurl){
$('.epubindexitem').css('font-weight','normal');
goNameLink('allbody');
}
だ。

これで、
●epubファイルが読み込まれると・・・
   電子書籍 epub viewer epubファイルが読み込まれると・・・
  ナビボタンが出現し、
●[次へ] をクリックすると
   電子書籍 epub viewer 次々めくれて、
   電子書籍 epub viewer 目次インデックスが太字になる
  次々めくれて、目次インデックスが太字になる。
 今のところ、これでよし、としよう・・・


 あれ? 先回、「次回」は、印刷その2ではなかったか?
commentsコメント
comment_post












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

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

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

 

リンク集

 

最近の記事

 

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

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

 

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