画像を使ったグリッドスキンの作成
はじめに
以下のような、画像を使ったグリッド型のスキン作成方法。
スキンのフォルダ構成
スキンの名前はumlGridとします。
error.jpg、icon.icoは前回と同じで、DefaultGridからコピーします。
<umlGrid>
<image>
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)の２つの画像を用意。
umlGrid.htmの修正
SampleSkin.htmからの変更点は読み込むJavaScript、スタイルシートのファイル名変更と、
サムネイルサイズの変更です。
<!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="./umlGrid.js"></script>
<link type="text/css" rel="stylesheet" href="./umlGrid.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 : 120;
thum-height : 90;
thum-column : 1;
thum-row : 1;
</div>
</body>
</html>
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"),
"<div class='s_thum_base " + select + "' id='thum" + mv.id + "'>" +
"<img class='s_img_base s_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 = "s_img_base " + (isFocus ? "s_img_f" : "s_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 = "s_thum_base " + (isSel ? "s_thum_s" : "s_thum_u") ;
}
umlGrid.cssの修正
一番修正が多いのはスタイルシートです。
全体設定で変更するのは背景色。
/*-----------------------------------------------------------------------------
全体設定
-----------------------------------------------------------------------------*/
* {
margin : 0;
padding : 0;
font-weight : normal;
font-family : 'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
font-size : 15px;
line-height : 1.2em;
}
body {
background-color : #787878;
color : #fff;
overflow : hidden;
}
ビューは、paddingを少し調整。
/*-----------------------------------------------------------------------------
ビュー
-----------------------------------------------------------------------------*/
div#frame {
width : 101%;
height : 100%;
overflow : hidden;
}
div#view {
width : 100%;
height : 100%;
padding : 6px;
overflow-y : scroll;
}
タイトル名は文字サイズ(font-size)、文字色(color)や、上余白(margin-top)や
幅(width)、高さ(height)、また入りきらない分は非表示(overflow : hidden)。
改行方法(word-break)を指定します。
/*-----------------------------------------------------------------------------
タイトル名
-----------------------------------------------------------------------------*/
h1 {
overflow : hidden;
font-size : 11px;
color : #333;
margin-top : 3px;
width : 130px;
height : 26px;
word-break: break-all;
}
サムネイルは、背景画像(background)を設定し、通常時は１ドットのグレーの枠線、フォーカス時は
２ドットの赤い枠線を指定します。
/*-----------------------------------------------------------------------------
サムネイル
-----------------------------------------------------------------------------*/
div.s_thum_base {
overflow : hidden;
margin : 6px;
padding : 3px;
float : left;
width : 134px;
height : 129px;
}
div.s_thum_u {
background : url('image/grid_su.png');
}
div.s_thum_s {
background : url('image/grid_ss.png');
}
img.s_img_base {
margin : 3px 0px 0px 3px;
float : left;
width : 120px;
height : 90px;
}
img.s_img_u {
padding : 1px;
border-top : 1px solid #aaa;
border-left : 1px solid #aaa;
border-right : 1px solid #666;
border-bottom : 1px solid #666;
}
img.s_img_f {
padding : 0px;
border-top : 2px solid #e77;
border-left : 2px solid #e77;
border-right : 2px solid #c22;
border-bottom : 2px solid #c22;
}
図解
ダウンロード
<phpinc=DownloadCounter/DownloadCounter?mode=link&file=umlGrid20110123.zip>(<phpinc=DownloadCounter/DownloadCounter?mode=counter&file=umlGrid20110123.zip> downs)