って考えたとき、１画面何人月？→１画面いくら、
という概念が、根本的に崩壊してしまうという問題が生じる。
具体的に言うとこうだ。
以下のような画面が、最近流行だ。
ここで、タブ２をクリックすると
な感じで、タブ切り替えで画面が変わり、
ここで「２を開く」をクリックすると
な感じでダイアログ（サブ画面）が開き、
ここで「閉じる」ボタンをクリックすると
もとにもどる。
このプログラム、実は以下のとおりだ
JQueryを外部リンクしているけど、
それ以外は、他のソースを参照していない
なお、以下のサイト、本を参考にしている。
【参考文献】
＜＜タブ関連＞＞
タブメニューの作り方（１）
http://www.1uphp.com/con2/menu/tab11.html
＜＜ダイアログ関連＞＞
現場で役立つ JQueryデザインパーツライブラリ,MdN,2013
chapter2 シンプルなダイアログボックス pp91
そして、このプログラムに、タブを足すには、以下のことをすればよい
●Javascript内
・maxtabnoに、タブの数をセットする。上記の例（３つ）に１つ足すと、
maxtabno = 4;
・disptabnoに、何番目のタブを表示するかをセットする
(通常は１）
●BODY内
・タブについて
liタグのところに、１個追加する。idにli+次の番号をセットし、
divのクラスはtab,idにtab+次の番号をセットする。
例えば上記の例（３つ）に１つを足すと
＜li id="li4"＞＜div class="tab" id="tab4"＞タブの言葉＜/div＞＜/li＞
（＜＞は、本当は半角。以下同じ）
を追加する
・ボックスについて
div class=boxで、idにdiv+次の番号のものを追加する
上記のタブに対応するボックスを作成すると、
＜div class="box" id="box4"＞
追加したボックス
＜/div＞
これで、タブが追加される。
このプログラムにダイアログを追加するには、以下のようにする
●BODY内
・ダイアログを開くボタンを追加し、disp_dlg('ダイアログid')を呼ぶ
たとえば、dialog4というダイアログをつくるには
＜BUTTON onclick="disp_dlg('dialog4')"＞２を開く＜/BUTTON＞
を、どこかに書く（もちろん、開いて見えるところに）
・ダイアログを追加する
そして、開くダイアログを追加する。
クラス名dialog,idは、上記開くボタンで指定したもの（ここではdialog4）
・閉じるボタンを作成し、close_dlg()を呼ぶ
そのダイアログのどこかに記述する（そうしないと、閉じられない）
上記２つをまとめて書くと、こんなかんじ
＜div class="dialog" id="dialog3"＞
だいあろぐ４
＜BUTTON onclick="close_dlg()"＞閉じる＜/BUTTON＞
＜/div＞
このように、画面は、ほぼHTMLで簡単に作れてしまう。
この場合、ダイアログ１個を１画面とみて、１週間とか、かけるのか？
すべての(タブで表示されるのも含め）画面を１本と見るのか？
見方によって、費用が大幅に異なってしまう。
以前の開発は、前者を元にお金をとっていると思うけど・・・
そうすると、最近の画面は相当高価になってしまう。。。
（ってか、交渉上、それはないな・・・）
という概念が、根本的に崩壊してしまうという問題が生じる。
具体的に言うとこうだ。
以下のような画面が、最近流行だ。
ここで、タブ２をクリックすると
な感じで、タブ切り替えで画面が変わり、
ここで「２を開く」をクリックすると
な感じでダイアログ（サブ画面）が開き、
ここで「閉じる」ボタンをクリックすると
もとにもどる。
このプログラム、実は以下のとおりだ
JQueryを外部リンクしているけど、
それ以外は、他のソースを参照していない
なお、以下のサイト、本を参考にしている。
【参考文献】
＜＜タブ関連＞＞
タブメニューの作り方（１）
http://www.1uphp.com/con2/menu/tab11.html
＜＜ダイアログ関連＞＞
現場で役立つ JQueryデザインパーツライブラリ,MdN,2013
chapter2 シンプルなダイアログボックス pp91
<!DOCTYPE html>
<html lang="ja">
<HEAD>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
<!--
/* タブの設定 */
li {float:left;display:block;}
ul {margin:0px;}
.on {
background-color:#ff3333;
width:100px;
height:26px;
margin-right:5px;
text-align:center;
}
.off {
background-color:#ffcccc;
width:100px;
height:26px;
margin-right:5px;
text-align:center;
}
.box
{
clear:both;
border-top:solid 10px #ff3300;
border-bottom:solid 1px #ff3300;
border-left:solid 1px #ff3300;
border-right:solid 1px #ff3300;
}
/* ダイアログの設定 */
.mask {
display:none;
position:absolute;
background-color:#000;
left:0;
top:0;
z-index:1;
width:100%;
height:100%;
}
.dialog {
display:none;
position:fixed;
background-color:#fff;
left:100;
top:100;
z-index:2;
width:300px;
height:250px;
padding:10px;
box-shadow:0 0 6px #000;
border-radius:5px;
}
-->
</style>
<script type="text/javascript">
$(function(){
//==============================================//
// 修正箇所 //
//==============================================//
// タブの最大数を設定
maxtabno = 3;
// はじめに表示するタブを設定
disptabno = 1;
//**********************************************//
// タブ関連処理 //
//**********************************************//
for(i = 1 ; i <= maxtabno ; i ++)
{
settabid = "#li" + i;
setboxid = "#box" + i;
if ( i == disptabno)
{
$(settabid).addClass("on");
$(setboxid).css("display","block");
}
else
{
$(settabid).addClass("off");
$(setboxid).css("display","none");
}
}
$('.tab').click(function(){
nowtabid = $(this).attr("id");
no = nowtabid.substring(3);
if ( disptabno == no )
{
// 現在表示されているタブをクリック
return;
}
for(i = 1 ; i <= maxtabno; i ++ )
{
chktabid = "#li" + i;
chkboxid = "#box" + i;
if ( i == no)
{
// タブをOFFからONに
$(chktabid).removeClass("off").addClass("on");
// 画面表示
$(chkboxid).css("display","block");
}
else if(i == disptabno )
{
// タブをONからOFFに
$(chktabid).removeClass("on").addClass("off");
// 画面を隠す
$(chkboxid).css("display","none");
}
}
disptabno = no;
});
});
//**********************************************//
// ダイアログ関連処理 //
//**********************************************//
// ダイアログ表示関数
function disp_dlg(dlgid)
{
var windowW = $(window).width();
var windowH = $(window).height();
var nowdlgid = "#" + dlgid;
//ダイアログの位置
$(nowdlgid).css({
'left':windowW/2-$(nowdlgid).width()/2,
'top':windowH/2-$(nowdlgid).height()/2
});
//ダイアログと背景を表示
$('.mask').fadeTo("slow",0.5);
$(nowdlgid).fadeTo("slow",1);
}
//ダイアログ非表示関数
function close_dlg()
{
$('.dialog,.mask').hide();
}
</script>
<TITLE>テスト</TITLE>
</HEAD>
<BODY>
<ul>
<li id="li1"><div class="tab" id="tab1">タブ１</div></li>
<li id="li2"><div class="tab" id="tab2">タブ２</div></li>
<li id="li3"><div class="tab" id="tab3">タブ３</div></li>
</ul>
</div>
<div class="box" id="box1">
<H1>ボックス１</H1>
参考： http://www.1uphp.com/con2/menu/tab11.html
<p/><BUTTON onclick="disp_dlg('dialog1')">１を開く</BUTTON>
</div>
<div class="box" id="box2">
<H1>ボックス２</H1>
<p/><BUTTON onclick="disp_dlg('dialog2')">２を開く</BUTTON>
</div>
<div class="box" id="box3">
<H1>ボックス３</H1>
<p/><BUTTON onclick="disp_dlg('dialog3')">３を開く</BUTTON>
</div>
<div class="mask" id="mask1"></div>
<div class="dialog" id="dialog1">
<H1>ダイアログ１</H1>
<BUTTON onclick="close_dlg()">閉じる</BUTTON>
</div>
<div class="dialog" id="dialog2">
<H1>ダイアログ２</H1>
<BUTTON onclick="close_dlg()">閉じる</BUTTON>
</div>
<div class="dialog" id="dialog3">
<H1>ダイアログ３</H1>
<BUTTON onclick="close_dlg()">閉じる</BUTTON>
</div>
</BODY>
</HTML>
|
そして、このプログラムに、タブを足すには、以下のことをすればよい
●Javascript内
・maxtabnoに、タブの数をセットする。上記の例（３つ）に１つ足すと、
maxtabno = 4;
・disptabnoに、何番目のタブを表示するかをセットする
(通常は１）
●BODY内
・タブについて
liタグのところに、１個追加する。idにli+次の番号をセットし、
divのクラスはtab,idにtab+次の番号をセットする。
例えば上記の例（３つ）に１つを足すと
＜li id="li4"＞＜div class="tab" id="tab4"＞タブの言葉＜/div＞＜/li＞
（＜＞は、本当は半角。以下同じ）
を追加する
・ボックスについて
div class=boxで、idにdiv+次の番号のものを追加する
上記のタブに対応するボックスを作成すると、
＜div class="box" id="box4"＞
追加したボックス
＜/div＞
これで、タブが追加される。
このプログラムにダイアログを追加するには、以下のようにする
●BODY内
・ダイアログを開くボタンを追加し、disp_dlg('ダイアログid')を呼ぶ
たとえば、dialog4というダイアログをつくるには
＜BUTTON onclick="disp_dlg('dialog4')"＞２を開く＜/BUTTON＞
を、どこかに書く（もちろん、開いて見えるところに）
・ダイアログを追加する
そして、開くダイアログを追加する。
クラス名dialog,idは、上記開くボタンで指定したもの（ここではdialog4）
・閉じるボタンを作成し、close_dlg()を呼ぶ
そのダイアログのどこかに記述する（そうしないと、閉じられない）
上記２つをまとめて書くと、こんなかんじ
＜div class="dialog" id="dialog3"＞
だいあろぐ４
＜BUTTON onclick="close_dlg()"＞閉じる＜/BUTTON＞
＜/div＞
このように、画面は、ほぼHTMLで簡単に作れてしまう。
この場合、ダイアログ１個を１画面とみて、１週間とか、かけるのか？
すべての(タブで表示されるのも含め）画面を１本と見るのか？
見方によって、費用が大幅に異なってしまう。
以前の開発は、前者を元にお金をとっていると思うけど・・・
そうすると、最近の画面は相当高価になってしまう。。。
（ってか、交渉上、それはないな・・・）
アクセス
トータル
ランキング
