top


総投稿数 本 
no_

スポンサーサイト

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

電子書籍 epub:少しお化粧。見栄えを少々整えて、後、SVG画像への対応など ・・・ 【epub viewer を創ろ #9】

 2011-11-25
 電子書籍 epub viewer。この辺で、気分をさらに盛り上げる。
少しお化粧した。

目次部分も、jQueryでアニメーション閉じを実現。
   電子書籍 epub viewer アプリケーションぽくなったでしょ
   アプリケーションぽくなったでしょ。
   電子書籍 epub viewer アプリケーションぽくなったでしょ2


目次部分の右側をクリックすると・・・
   電子書籍 epub viewer 目次部分の右側をクリックすると・・・
     ▼
   目次がスライド退場。コンテンツ部分が広く読める。
   電子書籍 epub viewer 目次がスライド退場。コンテンツ部分が広く読める。


  詳しくは、追記に  ▼

more

************************************************
◎ 見栄えを少々整えて、後、SVG画像への対応など
              :epub viewer を創ろ

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


まず少しエラートラップ増やして・・・


 epub2.0 でも epub3.0 でも(基本的に)読み込めるようにして・・・
 (※あくまでも正しく創られたものに限る・・まだまだエラートラップ足りない)
// バージョン取得
var version = analysisXML_epub('version',zip.files[meta_infs[0]].inflate());
thisversion = version;
 関数では
function analysisXML_epub(strid,xmldata){
var d = document.getElementById('epubxml');
d.innerHTML = xmldata;

var fileList = [];
// version
if(strid == 'version'){
var versions = d.getElementsByTagName("package");
fileList.push(versions[0].getAttribute("version"));

}else{
・・・・・

画像をdataスキームで表示する選択肢に SVG画像追加


// 拡張子からcontent_type
function getContentTypeByFilename(strfilename){
var filenames = String(strfilename).split(".");
var ext = filenames[1];
var types = {
gif : "image/gif",
jpg : "image/jpeg",
png : "image/png",
txt : "text/plain",
html : "text/html",
svg : "image/svg+xml"
};
return types[ext];
}
 

今まで表示できなかったのが・・・
   電子書籍 epub viewer 今まで表示できなかったのが・・・
     ▼
   できるようになった。
   電子書籍 epub viewer SVG画像表示 できるようになった


jQuery の jquery.easing.1.3.js を利用したアニメーション処理



EPUB 3 Changes from EPUB 2.0.1
animate(params, [duration], [easing], [callback]) - jQuery 日本語リファレンス こちらの情報をまんま利用させていただく。感謝。

jQuery.extend(jQuery.easing,{
easeInQuart: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t + b; },
});
$('#lefter_door').click(function (e) {
lefterOnOff();
});
 $(document).ready(function(){ で用意して
 関数を機能させる。
function lefterOnOff(){
if(nowlefter==1){
$('#lefter').fadeOut('fast');
$('#lefter').animate({
left: '-260px',
}, 'slow','easeInQuart' );
$('#mainview').css('position','absolute');
$('#mainview').css('left','22px');
$('#lefter').fadeIn('fast');

nowlefter=0;
}else{
$('#lefter').animate({
left: 0,
}, 'fast','easeInQuart' );
$('#mainview').css('position','relative');
$('#mainview').css('left','0px');
nowlefter=1;
}
}
 もう、css触りまくり。※ここもテスト必要だな。
 ここから、少しヘビーなバグとりと、エラートラップ設置。
 ・・・でも、ほんとはまだ気になってることがあるんだよな。
commentsコメント
comment_post












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

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

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

 

リンク集

 

最近の記事

 

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

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

 

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