====== 画像を使ったグリッドスキンの作成 ======
===== はじめに =====
以下のような、画像を使ったグリッド型のスキン作成方法。\\
{{wb0000.png?620}}
===== スキンのフォルダ構成 =====
スキンの名前はumlGridとします。\\
error.jpg、icon.icoは前回と同じで、DefaultGridからコピーします。
grid_ss.png // 選択時のグリッド画像
grid_su.png // 非選択時のグリッド画像
umlGrid.css // スタイルシート
umlGrid.htm // スキン名と同じ名前のHTML
umlGrid.js // JavaScript
error.jpg // サムネイル作成に失敗した場合のエラー画像
icon.ico // スキン選択メニュー用のアイコン(16x16)
===== 画像の準備 =====
非選択(grid_su.png)、選択(grid_ss.png)の２つの画像を用意。\\
{{grid_su.png}}{{grid_ss.png}}
===== umlGrid.htmの修正 =====
SampleSkin.htmからの変更点は読み込むJavaScript、スタイルシートのファイル名変更と、\\
サムネイルサイズの変更です。
skin-version : 1;
multi-select : 1;
seamless-scroll : 2;
thum-width : 120;
thum-height : 90;
thum-column : 1;
thum-row : 1;
===== umlGrid.jsの修正 =====
SampleSkin.jsからの変更点は、サムネイルクラス、イメージクラスの名前の前に「s_」を付加。
//*****************************************************************************
// umlGrid 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) ? "s_thum_s" : "s_thum_u" ;
var insert = (dir < 0) ? Insertion.Top : Insertion.Bottom ;
new insert(
$("view"),
"" +
"
![](" + mv.thum + ")
" +
"
" + mv.title + mv.ext + "
" +
"