top


総投稿数 本 
no_

スポンサーサイト

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

電子書籍 epub:楽しい作業・・・機能UIをいくつか追加(ヘッダー固定、文字サイズ、トップへ) ・・・ 【epub viewer を創ろ #10】

 2011-11-26
 電子書籍 epub viewer。楽しい、機能UI追加作業。
まずは3つ。

 ◆ヘッダー固定
  これは、今後ここの部分にいくつか考えている機能メニューを
  表示させるため、固定オンオフの機能がいいな、と。
 ◆本文エリア文字サイズ増減
  読むためのアプリだから、当然必要。
  色々な方法があると思うけど、今回は%指定増減で。
   電子書籍 epub viewer ヘッダー固定/本文エリア文字サイズ増減


 ◆ページトップへ
  どこに用意するか迷ったけど、
  [表示]された際に、フッターにタイトル。ここだな。
   電子書籍 epub viewer ページトップへ


  詳しくは、追記に  ▼

more

************************************************
◎ 機能UIをいくつか追加(ヘッダー固定、文字サイズ、トップへ)
              :epub viewer を創ろ

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


ヘッダー固定


 このブログでもやってるのだけど、jQuery利用してもう少し
 スマート(?)に指定。
 ■オンオフ
function headerStayOnOff() {
var val1 = ""; var val2 = "";
var tempval = "30px";
if (document.getElementById('ck_stayhead').checked) {
if (isIE) { tempval = "30px";
}else{if (isFF) { tempval = "30px";
}else{if (isSF) { tempval = "30px";}}}
$('#header').css('position','fixed'); val1="fixed";
$('#header').css('top','0px');
$('#header').css('width','100%');
$('#main_contents').css('padding-top',tempval);
}else{
$('#header').css('position','relative');
$('#header').css('top','-2px');
$('#main_contents').css('padding-top',"0px");
}
var intDay = 365; var strVars = "ck_stayhead"; var strVals = val1;
SetCookie(intDay, strVars, strVals, 1, '', location.pathname);
}
 ポイントは、
 ・いずれ、ブラウザチェック必要だろうから、
  位置指定のカスタマイズできるように準備して
 ・この設定は次回立ち上がったときに効いた方がいいだろうから、
  クッキー使う。
 このあたりは、
function SetCookie(intDay,strVars,strVals,op_escape,op_domain,op_path) {
var kikan = new Date();
kikan.setTime(kikan.getTime() + (intDay * 1000 * 60 * 60 * 24));
var toKikan = kikan.toGMTString();

if(op_escape==1){ var tempstr = strVars + "=" + escape(strVals) + ";";
}else{ var tempstr = strVars + "=" + strVals + ";"; }

if((op_domain!='')&&(op_domain)){ tempstr += " ;domain=" + op_domain + ";"; }
if((op_path!='')&&(op_path)){ tempstr += " ;path=" + op_path + ";"; }else{ tempstr += " ;path=/;"; }
tempstr += " ;expires=" + toKikan;
document.cookie = tempstr;
}

function getCookie(key) {
var tmp=document.cookie+";";
var tmp1=tmp.indexOf(key,0);
if(tmp1!=-1){
tmp=tmp.substring(tmp1,tmp.length);
start=tmp.indexOf("=",0) + 1;
end = tmp.indexOf(";",start);
return(decodeURIComponent(tmp.substring(start,end)));
}
return("");
}
 などのクッキー操作関数と、簡易だけど
var UsrAgt = navigator.userAgent.toLowerCase();
var isIE = 0; var isFF = 0; var isSF = 0;
if (UsrAgt.indexOf("msie") != -1) { isIE = 1;
}else{
if (UsrAgt.indexOf("firefox") != -1) { isFF = 1;
}else{
if (UsrAgt.indexOf("safari") != -1) { isSF = 1;
}}}
 エージェントチェック用意。
 これで、
   電子書籍 epub viewer スクロールされると、
    ▼
   スクロールされると、
   電子書籍 epub viewer こうだったのが
   こうだったのが
    ▼
   電子書籍 epub viewer ヘッダー固定され、よりアプリケーションらしく・・・
   ヘッダー固定され、よりアプリケーションらしく・・・
   これで、さらなる機能実装が楽しくなってきた。

本文エリア文字サイズ増減


 プラグインもあるだろうし、色々な方法が存在するけど
 今回は、用意されたepubのスタイル尊重して、それを
 単純に %増減する方法で・・・
 ■[小][大]ボタンで、
var def_fsizep=100; var max_fsizep=200; var min_fsizep=50; var now_fsizep=def_fsizep;
function setFontsize(intp) {
if($('#bookContents')){
var tosizep = now_fsizep + (intp * 10);
if(tosizep > max_fsizep){ tosizep = max_fsizep;
}else{if(tosizep < min_fsizep){ tosizep = min_fsizep;}}
$('#bookContents').css('font-size',tosizep+'%');
now_fsizep = tosizep;
}
}
 1回のクリックで10%づつ増減。一応リミットは決めておき後でカスタマイズすることにしよう。
   電子書籍 epub viewer クリックされると、
    ▼
   クリックされると、
   電子書籍 epub viewer 単純に %増減する方法で・・・
 サイズに合わせて、行間の調整も必要あるな(課題)

本文のページトップへ


 これは、単純に href="#top" なんだけど、
 どこに置くか思案。
 ・Webサイトのように、ページ右下・・・というよりは
 ・常に表示がいいだろうし
 ・本文エリア邪魔したくないし・・・
 > そうだ!フッター
 ・・・で、
   電子書籍 epub viewer ページトップへ
 次は、何やろか・・・
commentsコメント
comment_post












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

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

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

 

リンク集

 

最近の記事

 

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

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

 

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