PC
ダウンロード
開発環境
リンク集
おすすめフリーソフト
CentOS Server
Raspberry Pi
Ubuntu Server
WEB
DokuWiki
iPhone
iPhoneサンプル
電子工作
個人的なメモ
スキン作成の下準備
スキンのフォルダ構成
フォルダ名がスキン名、その中にフォルダ名と同じ.htmファイルを作成する。
エラー用のerror.jpgは、サムネイルの最終的なサイズで用意すると良い。
スキンの名前はとりあえずSampleSkinとします。
<SampleSkin> // スキン名と同じ名前のフォルダ SampleSkin.css // スタイルシート SampleSkin.htm // スキン名と同じ名前のHTML SampleSkin.js // JavaScript error.jpg // サムネイル作成に失敗した場合のエラー画像 icon.ico // スキン選択メニュー用のアイコン(16x16)
テンプレートの用意
本家のテンプレートは古い為に動かないので、最新WhiteBrowserのDefaultGridを元に作成します。
SampleSkinフォルダを作成しDefaultGridから、error.jpgとicon.icoをコピーしておきます。
SampleSkin.htm内は極力シンプルにしておきます(詳細解説)。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script type="text/javascript" src="../prototype.js"></script>
<script type="text/javascript" src="../wblib.js"></script>
<script type="text/javascript" src="./SampleSkin.js"></script>
<link type="text/css" rel="stylesheet" href="./SampleSkin.css">
</head>
<body>
<div id="frame">
<div id='view'></div>
</div>
<div id='config'>
skin-version : 1;
multi-select : 1;
seamless-scroll : 2;
thum-width : 160;
thum-height : 120;
thum-column : 1;
thum-row : 1;
</div>
</body>
</html>
シームレススクロール有効／無効のどちらでも動くようにします。(詳細解説)。
//*****************************************************************************
// SampleSkin JavaScript 処理
//*****************************************************************************
//-------------------------------------------------------------------------
// グローバル変数
//-------------------------------------------------------------------------
// シームレススクロール(0:OFF 1:下方向 2:双方向)
var g_seamless_scroll = 2 ;
// 表示するリミット(-1:全て表示 n:指定枚数)
// ※シームレススクロール OFF 時のみ有効
var g_thumbs_limit = 200 ;
//*****************************************************************************
// セットアップ
//*****************************************************************************
//-------------------------------------------------------------------------
// スキンが完全ロードされた後にコールされる
//-------------------------------------------------------------------------
wb.onSkinEnter = function() {
wb.scrollSetting(g_seamless_scroll,"") ;
if(!g_seamless_scroll) { // シームレススクロール OFF 時
wb.update(0,g_thumbs_limit) ;
}
else { // シームレススクロール ON 時
}
}
//-------------------------------------------------------------------------
// ウィンドウサイズが変わった
//-------------------------------------------------------------------------
window.onresize = WindowResize;
function WindowResize() {
if(g_seamless_scroll) {
Element.setStyle("frame",{"height":document.documentElement.clientHeight+"px"});
}
}
//*****************************************************************************
// サムネイル処理
//*****************************************************************************
//-------------------------------------------------------------------------
// 検索結果が更新されたときにコールされる(シームレススクロール OFF 時)
//-------------------------------------------------------------------------
wb.onUpdate = function(mvs) {
for(var i = 0 ; i < mvs.length ; ++ i) {
var mv = mvs[i] ;
wb.onCreateThum(mv,1) ;
}
wb.focusThum(mvs[0].id) ;
}
//-------------------------------------------------------------------------
// サムネイルの作成と表示(シームレススクロール ON 時)
//
// @param mv ファイルの全情報
// @param dir 追加する方向(-1:先頭に 1:末尾に)
//-------------------------------------------------------------------------
wb.onCreateThum = function(mv,dir) {
var exist = (mv.exist == false) ? " style='filter:Gray'" : "" ;
var select = (mv.select == 1) ? "thum_s" : "thum_u" ;
var insert = (dir < 0) ? Insertion.Top : Insertion.Bottom ;
new insert(
$("view"),
"<div class='thum_base " + select + "' id='thum" + mv.id + "'>" +
"<img class='img_base img_u' id='img" + mv.id + "' src='" + mv.thum + "'" + exist + ">" +
"<h1 id='title" + mv.id + "'>" + mv.title + mv.ext + "</h1>" +
"</div>"
) ;
}
//-------------------------------------------------------------------------
// サムネイルのフォーカス状態が変わったときにコールされる
//
// @param id ファイルのID
// @param isFocus フォーカス状態(1:フォーカスを得た 0:フォーカスが外れた)
//-------------------------------------------------------------------------
wb.onSetFocus = function(id,isFocus) {
var img = $("img" + id) ;
if(!img) return ;
img.className = "img_base " + (isFocus ? "img_f" : "img_u") ;
if(isFocus) {
var pos = Position.cumulativeOffset($("thum" + id)) ;
var top = document.documentElement.scrollTop ;
var btm = top + document.documentElement.clientHeight ;
var th = $("thum" + id).clientHeight ;
if(pos[1] < top) {
window.scrollTo(pos[0],pos[1] - 12) ;
}
else if(btm < pos[1] + th) {
window.scrollTo(pos[0],pos[1] + th + 12 - document.documentElement.clientHeight) ;
}
}
}
//-------------------------------------------------------------------------
// サムネイルの選択状態が変わったときにコールされる
//
// @param id ファイルのID
// @param isSel 選択状態(1:選択 0:非選択)
//-------------------------------------------------------------------------
wb.onSetSelect = function(id,isSel) {
var thum = $("thum" + id) ;
if(!thum) return ;
thum.className = "thum_base " + (isSel ? "thum_s" : "thum_u") ;
}
SampleSkin.cssはコメントを付けて見やすくし、フォントはメイリオを優先させます。
共通の設定を、div.thum_base、img.img_baseに分離し、クラス名を簡略化します。
| class | 説明 |
|---|---|
| thum_u | サムネイル非選択 |
| thum_s | サムネイル選択 |
| img_u | フォーカスあり |
| img_s | フォーカスなし |
/*-----------------------------------------------------------------------------
全体設定
-----------------------------------------------------------------------------*/
* {
margin : 0;
padding : 0;
font-weight : normal;
font-family : 'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
font-size : 15px;
line-height : 1.2em;
}
body {
background-color : #444;
color : #fff;
overflow : hidden;
}
/*-----------------------------------------------------------------------------
ビュー
-----------------------------------------------------------------------------*/
div#frame {
width : 101%;
height : 100%;
overflow : hidden;
}
div#view {
width : 100%;
height : 100%;
padding : 5px;
overflow-y : scroll;
}
/*-----------------------------------------------------------------------------
タイトル名
-----------------------------------------------------------------------------*/
h1 {
clear : both;
font-size : 80%;
margin-top : 7px;
}
/*-----------------------------------------------------------------------------
サムネイル
-----------------------------------------------------------------------------*/
div.thum_base {
overflow : hidden;
margin : 10px;
padding : 5px 6px 5px 8px;
float : left;
width : 164px;
height : 168px;
border : 1px solid #AAA;
}
div.thum_u {
}
div.thum_s {
background-color : #064560;
}
img.img_base {
float : left;
width : 160px;
height : 120px;
background : #000;
}
img.img_u {
border-top : 2px solid #999;
border-left : 2px solid #999;
border-right : 2px solid #666;
border-bottom : 2px solid #666;
}
img.img_f {
border : 2px solid #2AF;
}
ダウンロード
最適化後のテンプレートは、以下からダウンロードしてください。
<phpinc=DownloadCounter/DownloadCounter?mode=link&file=SampleSkin20110123.zip>(<phpinc=DownloadCounter/DownloadCounter?mode=counter&file=SampleSkin20110123.zip> downs)
特に明示されていない限り、本Wikiの内容は次のライセンスに従います： CC Attribution-Share Alike 4.0 International
