にっき
2006/12/22 20:38:29
たぶう゛ゅあ２ おんろ〜どいべんと
ＲＣへの修正で無事にたぶう゛ゅあが動く環境になったからさくっと続きにう☆ヾ（・ｘ・。【みかん
今回はいつもどおり必須ふぁいる＆ onload いべんとでいべんとぺったんを実装しますです☆
まずはべ〜すになるおやくそくの部分から☆
/tabview/index.html
る〜とぱすが追加されてて list ＆ div でたぶうぃんどうを描いてるけど・・・
ここは JavaScript にもむぅたんにも関係ないからぱすでいい・・・よね？（´ω｀；【みかん
なんだかもっとえれがんとな描き方あるような気がするし・・・
続いて css ☆
/tabview/style.css
たぶうぃんどうの中は h2 と dl を利用して表示するからこんなかんじ☆
っていうかこのへんはおこのみでど〜ぞです☆ヾ（・ｘ・。【みかん
だいじなのは『JavaScript から要素を特定できること』だけだし・・・
どんどん続けて今度は config を☆
/tabview/config.js
見所はれんだ〜さん周りの設定がちょっといっぱいなことかなぁ？（・ｘ・。【みかん
今回使用するれんだ〜さんは HTML ふぁいるに変数を埋め込むことができますです☆
あくしょん内でちゃんと設定すればでふぉるとはなしでも動く・・・はずなのです☆
ってことでてんぷれ〜との準備を☆
/tabview/templates/default.html
どこからどう見てもとっても手抜きにう ｄ（´ω｀；【みかん
でもこの
っていうのは変数を埋め込むぽいんとを指定してるのでとってもだいじになりますです☆
今度は埋め込む文章を言語ふぁいるに☆
/tabview/lang/en/lang.js
/tabview/lang/jp/lang.js
変数名は特定どんなのでもできればおっけぃだけど・・・
ほかのとばってぃんぐして上書きされてもやだからちょっと長めに宣言してありますです☆
それではめいんのあくしょんさん’ｓに☆
/tabview/actions/onloadModel.js
おやくそくの空っぽってもでるさんの出番はくるのかなぁ・・・ （つｘ；【みかん
あっ☆
今回はもでるさんも /actions/ でぃれくとりに入れるように設定したから置き場所には注意なのです☆
/tabview/actions/onloadAction.js
いろいろぷりろ〜どしてるのは置いといて☆
executeViewIndex で出てきた
ってとこが今回のいちばんのぽいんとになるのかなぁ？
こんなかんじで設定しておくと↑で出てきたみたいにてんぷれ〜とにある
を対応する値に置き換えて出力してくれますです☆
仕上げぷりろ〜ど指定しちゃったふぁいるのだみ〜を生成☆
/actions/changeAction.js
/actions/changeModel.js
/actions/viewAction.js
/actions/viewModel.js
/templates/season.html
これを忘れると 404 えら〜がいっぱいになるのにう（つｘ；【みかん
ここまでできたら httpd を起動して
http://localhost/tabview/
までれっつあくせす☆ヾ（・ｘ・。【みかん
こんなかんじの表示が出たらとりあえず成功☆
たぶをくりっくしたり，せれくとぼっくすを動かしたら
こんなえら〜が出るのもおやくそくってことで☆
っていうかえら〜が出ないときはいべんとぺったんに失敗してますです（つｘ；【みかん
無事にえら〜も出たら今回はここまで☆
次回はたぶの中身表示を実装してますです☆ヾ（・ｘ・。【みかん
ここまでのそ〜すをまとめたものはtabview2ndDayにおいてありますです☆
今回はいつもどおり必須ふぁいる＆ onload いべんとでいべんとぺったんを実装しますです☆
まずはべ〜すになるおやくそくの部分から☆
/tabview/index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-language" content="ja" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<title>Tab Viewer</title>
<link rel="stylesheet" href="http://localhost/tabview/style.css" type="text/css" media="screen" />
<script id="mutanrootpath" type="text/javascript" src="http://localhost/mutan/core.js"></script>
</head>
<body>
<form action="#">
<ul id="tabbox">
<li id="spring">Spring</li>
<li id="summer">Summer</li>
<li id="autumn">Autumn</li>
<li id="winter">Winter</li>
<li id="lang">
<select id="activelang">
<option value="en">English</option>
<option value="jp" selected="selected">Japanese</option>
</select>
</li>
</ul>
</form>
<div id="tabwindow">
default html
</div>
</body>
</html>る〜とぱすが追加されてて list ＆ div でたぶうぃんどうを描いてるけど・・・
ここは JavaScript にもむぅたんにも関係ないからぱすでいい・・・よね？（´ω｀；【みかん
なんだかもっとえれがんとな描き方あるような気がするし・・・
続いて css ☆
/tabview/style.css
*
{
margin : 0;
padding : 0;
}
body
{
padding : 1em;
line-height : 140%;
}
/* ---- >8 ---- tabview style sheet ---- >8 ---- */
#tabbox
{
height : 100%;
}
#tabbox li
{
background : #e7faff;
color : #000066;
list-style : none;
border : double 3px #aaaaaa;
border-bottom : none;
text-align : center;
float : left;
width : 10em;
cursor : pointer;
}
li#lang
{
background : none;
color : #000000;
border : none;
cursor : auto;
}
#lang option
{
padding : 0 0.5em;
}
#tabwindow
{
background : #e7faff;
color : #000066;
clear : left;
width : 50em;
border : double 3px #aaaaaa;
border-top : none;
padding : 1em;
}
#tabwindow h2
{
border-left : solid 1em #aaccaa;
border-bottom : solid 1px #aaccaa;
padding : 0 1em;
line-height : 150%;
margin-bottom : 1em;
}
#tabwindow dt
{
font-weight : bold;
width : 5em;
float : left;
}たぶうぃんどうの中は h2 と dl を利用して表示するからこんなかんじ☆
っていうかこのへんはおこのみでど〜ぞです☆ヾ（・ｘ・。【みかん
だいじなのは『JavaScript から要素を特定できること』だけだし・・・
どんどん続けて今度は config を☆
/tabview/config.js
{
// 置き場所がどきゅめんとる〜とじゃないときは要調整
// 今回はふぁいる数がそんなに多くないからあくしょん関連は１でぃれくとりで☆
this.actionPath = 'http://localhost/tabview/actions/';
this.modelPath = 'http://localhost/tabview/actions/';
this.languagesPath = 'http://localhost/tabview/lang/';
// おんろ〜どなあくしょん
this.onloadAction = 'onload';
// めっせ〜じを日本語に
this.language = 'jp';
// でばっぐも〜どおん
this.useDebug = true;
// でぃれくとり用の言語ふぁいるを使用する
this.useDirLanguage = true;
// でふぉるとのりくえすとさんを変更
this.requestFile = 'formRequest.js';
// でふぉるとのれんだ〜さんを変更
this.renderFile = 'easyTemplateRender.js';
// easyTemplateRender さん専用の設定
// てんぷれ〜とのでふぉるとぱす
this.templatePath = 'http://localhost/tabview/templates/';
// でふぉるとのてんぷれ〜と名
this.template = 'default.html';
};見所はれんだ〜さん周りの設定がちょっといっぱいなことかなぁ？（・ｘ・。【みかん
今回使用するれんだ〜さんは HTML ふぁいるに変数を埋め込むことができますです☆
あくしょん内でちゃんと設定すればでふぉるとはなしでも動く・・・はずなのです☆
ってことでてんぷれ〜との準備を☆
/tabview/templates/default.html
<h2><{Title}></h2>
<{Body}>どこからどう見てもとっても手抜きにう ｄ（´ω｀；【みかん
でもこの
<{変数名}>っていうのは変数を埋め込むぽいんとを指定してるのでとってもだいじになりますです☆
今度は埋め込む文章を言語ふぁいるに☆
/tabview/lang/en/lang.js
{
this.tabviewDefaultTitle = 'tab viewer';
this.tabviewDefaultBody = 'click tab';
};/tabview/lang/jp/lang.js
{
this.tabviewDefaultTitle = 'たぶう゛ゅあ';
this.tabviewDefaultBody = '↑のたぶをくりっくするとたぶんきっとここに表示されるはず☆';
};変数名は特定どんなのでもできればおっけぃだけど・・・
ほかのとばってぃんぐして上書きされてもやだからちょっと長めに宣言してありますです☆
それではめいんのあくしょんさん’ｓに☆
/tabview/actions/onloadModel.js
{
}おやくそくの空っぽってもでるさんの出番はくるのかなぁ・・・ （つｘ；【みかん
あっ☆
今回はもでるさんも /actions/ でぃれくとりに入れるように設定したから置き場所には注意なのです☆
/tabview/actions/onloadAction.js
{
// いつものでふぉるとう゛ゅ〜
this._defaultView = 'executeViewIndex';
// いつもの空っぽ
this.init = function(model)
{
};
// いつものめいん
this.execute = function(request)
{
// たぶうぃんどうの中身を表示するのと言語を切り替えるあくしょんをとりあえずぷりろ〜ど☆
mUtils.preloadActionFile(['view','change']);
// せれくとぼっくすに onchange いべんとをぺったん☆
var fnc = new Function('mController.doAction("change");');
DomUtils.appendEvent(DomUtils.getObject('activelang'),'change',fnc,'normal');
// ついでに言語ふぁいるも英語＆日本語両方ぷりろ〜ど☆
var arr = ['en','jp'];
for(var i in arr)
mUtils.loadFile(mUtils.config.getConfig('languagesPath') + arr[i] + '/lang.js');
// たぶうぃんどうの中身用のてんぷれ〜ともぷりろ〜ど
mUtils.loadFile(mUtils.config.getConfig('templatePath') + 'season.html',true);
// たぶに onclick いべんとをぺったん☆
arr = ['Spring','Summer','Autumn','Winter'];
for(i in arr)
{
// 今回は view ってあくしょんに季節名を引数としてぱすしますです☆
fnc = new Function('mController.doAction("view","' + arr[i] + '");');
DomUtils.appendEvent(DomUtils.getObject(arr[i].toLowerCase()),'click',fnc,'normal');
}
// いつものおしまい
return this._defaultView;
};
// れんだ〜さんに表示するものをぱすするとこ
this.executeViewIndex = function(render)
{
// とりあえず表示する目標物をせっと
render.setRenderTarget(DomUtils.getObject('tabwindow'));
// Title に tabviewDefaultTitle って言語を，
// Body に tabviewDefaultBody って言語をせっと
render.setRenderValue({
'Title' : mUtils.language.getLanguage('tabviewDefaultTitle'),
'Body' : mUtils.language.getLanguage('tabviewDefaultBody')});
};
};いろいろぷりろ〜どしてるのは置いといて☆
executeViewIndex で出てきた
render.setRenderValue({'変数名' : '変数の値'})ってとこが今回のいちばんのぽいんとになるのかなぁ？
こんなかんじで設定しておくと↑で出てきたみたいにてんぷれ〜とにある
<{変数名}>を対応する値に置き換えて出力してくれますです☆
仕上げぷりろ〜ど指定しちゃったふぁいるのだみ〜を生成☆
/actions/changeAction.js
/actions/changeModel.js
/actions/viewAction.js
/actions/viewModel.js
/templates/season.html
(空ふぁいる)これを忘れると 404 えら〜がいっぱいになるのにう（つｘ；【みかん
ここまでできたら httpd を起動して
http://localhost/tabview/
までれっつあくせす☆ヾ（・ｘ・。【みかん
こんなかんじの表示が出たらとりあえず成功☆
たぶをくりっくしたり，せれくとぼっくすを動かしたら
こんなえら〜が出るのもおやくそくってことで☆
っていうかえら〜が出ないときはいべんとぺったんに失敗してますです（つｘ；【みかん
無事にえら〜も出たら今回はここまで☆
次回はたぶの中身表示を実装してますです☆ヾ（・ｘ・。【みかん
ここまでのそ〜すをまとめたものはtabview2ndDayにおいてありますです☆
こめんと
投稿された内容の著作権はこめんとの投稿者に帰属するっぽいです☆また，現在 IE6 以下で Sleipnir，Lunascape，Donut じゃないゆ〜ざえ〜じぇんとからの描き込みを制限してますです☆
該当しちゃうかたはてきとうにゆ〜ざえ〜じぇんとを偽装しちゃってくださいです（´ω｀；【みかん
あじ
ＥＤ
えでん
えれふぃ
ぐらぶれ
etc
にっき