- PR -

カレンダーコントロールで

«前のページへ 1|2|3|4|5|6|7 次のページへ»
投稿者投稿内容
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-08-01 16:56
> <a href="javascript:void(0)" onmouseover="">

これはただの残骸です。

リンクにマウス乗ったらツールチップ消すのでしょ。
結構めんどくさいから実装やめました。

アンカーの上に乗っている間はツールチップを非表示にする。
アンカーが画像とかなら一定の範囲があるのでそれも可能で
しょうけど、文字だと隙間の部分で TD タグの onmouseover
が動いてしまうので少々厄介ですね。
<div style="width:12px;height:12px"><a href="...">13</a></div>
とかやってあげて、アンカーの糊しろみたいな部分を div で補って
あげる必要がありますね。
TD タグは、20*20 px だとすると、ツールチップが出る領域は、
div の占有部分を除く 幅8px の領域限定となります。

がんばってください。
意味が分からない場合は、タグの背景色を全て違う色にしてやってみると
いいでしょう。DIV,A,TABLE,TABLE-TR, TABLE-TR-TD 全部違う色と枠線を
付けてあげるとそのタグの占有領域が視覚化できます。

＃カレンダーコントロールの展開結果を　1ヶ月分、日曜日・月曜日・火曜日
＃の列だけ残してあとの曜日は全部除去して、貼り付けてもらいましょうか。
＃４２マス分だと大量になりそうなので遠慮します。

ちゃんと理解しながら移植すれば、jQuery のコードも幾分見やすくなると
思います。まぁ、今回はやらないのでしょうけど、これが完成したら、
jQuery での実装も視野に入れるとよいでしょう。でも、その前に、上司（
が居るなら）にカレンダーのポップアップのためだけに jQuery を使う許可
を貰う必要があるでしょうけど、あなたが作ってるWebページって趣味の
ページですか？お仕事で作っているなら、普通 ある機能のためだけにjQuery
を使うなどという暴挙は通らないと思いますが。。。
jQuery を使わないと実現できない、っていう判断なら良しでしょうけどね。



[ メッセージ編集済み 編集者: ぴあちゃん 編集日時 2008-08-01 17:56 ]
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-08-02 00:49
VisualWebDeveloper2005Expで試してみました。

以下のASPX を実行した時のブラウザ表示の右クリック@ソースを見る
で表示したコードに対して修正を入れます。

巨大になりますが、コピペして HTML で保存して実行して確認したら
ソースから レンダリングされる部分とそうでない部分を見極めて
ご自分のコードに反映してください。

コードは、
コード:

<%@ Page Language="VB" AutoEventWireup="false" 

    CodeFile="Default.aspx.vb" Inherits="_Default" %>



<!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" >

<head runat="server">

    <title>無題のページ</title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:Calendar ID="Calendar1" runat="server" 

             Width="300" Height="200" BorderStyle="Solid" 

             BorderColor="Aqua" DayStyle-BackColor="AliceBlue" 

             DayStyle-BorderStyle="Solid" DayStyle-BorderWidth="1">

        </asp:Calendar>

        <asp:Calendar ID="Calendar2" runat="server" 

             Width="300" Height="200" BorderStyle="Solid" 

             BorderColor="Azure" DayStyle-BackColor="CadetBlue" 

             DayStyle-BorderWidth="1" DayStyle-BorderStyle="Solid">

        </asp:Calendar>

        <asp:Calendar ID="Calendar3" runat="server" 

             Width="300" Height="200" BorderStyle="Solid" 

             BorderColor="Bisque" DayStyle-BackColor="Aquamarine" 

             DayStyle-BorderWidth="1" >

        </asp:Calendar>

    </div>

    </form>

</body>

</html>


カレンダーコントロールを３つ並べただけです。
これに JavaScript でツールチップを表示する仕掛けを組み込みます。


[ メッセージ編集済み 編集者: ぴあちゃん 編集日時 2008-08-02 00:56 ]
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-08-02 01:14
長すぎたようです。

投稿に失敗です。

４つ連続投稿します。１つに繋げて MonthCalendar.html で保存して
ASPXの元のコードと、展開後のコードとを見比べて、更にこのソース
の内容を吟味した上でご自分のコードに実装してください。

コード:

<!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" >

<head><title>

	無題のページ

</title>

<style>

div.calendar {

	position:relative;

	border:dotted 1px lime;

}



a {

	background-color:violet;

}



div.tooltip {

	position:absolute;

	width:100px;

	height:60px;

	border:outset 2px blue;

	background-color:orange;

	filter:alpha(opacity=75);

	left:0px;

	top:0px;

	z-index:4;

}

</style>

<script>

var anchorFlag = false;

function mouseover() {

	

	var divs = document.getElementsByTagName("div");

	var div = null;

	for (var i=0;i < divs.length;i++) {

		if (divs[i].className == "calendar") {

			div = divs[i];

			break;

		}

	}



	if (div == null) return ;

	

	var tbls = div.getElementsByTagName("table");



	for (var z=0;z < tbls.length;z++) {

		var tate = tbls[z].offsetTop;//parentNode.offsetLeft;

		var tbody = tbls[z].getElementsByTagName("tbody")[0];

		var trs = tbody.getElementsByTagName("tr");

	

		//カレンダーのレンダリングを見ると td が７つある行のみ

		//実装すれば良いことがわかります。最初の２行は飛ばします。

		//thead , tbody がレンダリングされませんので td を集めると

		//全部で４６個取得できてしまいます。tbody はレンダリング

		//されませんが、tr は全て tbody 配下にぶら下がります。

		//行単位に読み直し、最初の２行を読み飛ばします。

		for (var q=0;q < trs.length;q++) {

			

			var tds = trs[q].getElementsByTagName("td");

			var ass = trs[q].getElementsByTagName("a");

		

			if (tds.length == 7) {

				for (var i=0;i < tds.length;i++) {

					var td = tds[i];

					td.onmouseover = function(dx,dy) {

						return function() {

						

							if (!anchorFlag) {

								var tt = showToolTip();

								var ob = event.srcElement;

								

								var hdn = ob.getElementsByTagName("input");

								var txt = "";

								if (hdn && hdn.length == 1) {

									txt = hdn[0].value;

								}

								

								var sx = dx + ob.offsetWidth + ob.offsetLeft;

								var sy = dy + ob.offsetHeight + ob.offsetTop;

								tt.style.left = sx + "px";

								tt.style.top  = sy + "px";

								

								tt.innerHTML = 

									"<b>" + sx + "::" + sy + "</b><br>" +

									"<i>" + dx + "::" + dy + "</i><br>" + 

									"<span style='color:white'>" + txt + "</span>";

							}

						}

					}(0,tate);

					td.onmouseout = function() {

						hideToolTip();

					}

				}

				for (var i=0;i < ass.length;i++) {

					var aa = ass[i];

					aa.onmouseover = function() {

						anchorFlag = true;

						hideToolTip();

					}

					aa.onmouseout = function() {

						anchorFlag = false;

					}

				}

			}

		}

	}

}

function hideToolTip() {

	var tt = document.getElementById("ToolTip");

	tt.style.visibility = "hidden";

	return tt;

}

function showToolTip() {

	var tt = document.getElementById("ToolTip");

	tt.style.visibility = "visible";

	return tt;

}

window.onload = function() {

	mouseover();

}

</script>



</head>



[ メッセージ編集済み 編集者: ぴあちゃん 編集日時 2008-08-02 01:17 ]
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-08-02 01:18
2/4

コード:
<body>
    <form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" 
value="/wEPDwULLTIwNzUzODUwNDEPZBYCAgMPZBYCAgUPPCsACgEADxYCHgtWaXNpYmxlRGF0ZQYAAFDjXiHLCGRkZD8qV+sXGUNa9i+7fDnwq9n0lOyf" />
</div>

<script type="text/javascript">
<!--
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
// -->
</script>


<div class="calendar">
	<table id="Calendar1" cellspacing="0" cellpadding="2" title="カレンダー" border="0" 
	style="border-color:Aqua;border-width:1px;border-style:Solid;height:200px;width:300px;border-collapse:collapse;">
	<tr>
		<td colspan="7" style="background-color:Silver;">
			<table cellspacing="0" border="0" style="width:100%;border-collapse:collapse;">
			<tr>
				<td style="width:15%;">
				<a href="javascript:__doPostBack('Calendar1','V3104')" style="color:Black" title="先月へ移動">&lt;</a></td>
				<td align="center" style="width:70%;">2008年8月</td>
				<td align="right" style="width:15%;">
				<a href="javascript:__doPostBack('Calendar1','V3166')" style="color:Black" title="来月へ移動">&gt;</a></td>
			</tr>
			</table>
		</td>
	</tr>
	<tr>
		<th align="center" abbr="日曜日" scope="col">日</th>
		<th align="center" abbr="月曜日" scope="col">月</th>
		<th align="center" abbr="火曜日" scope="col">火</th>
		<th align="center" abbr="水曜日" scope="col">水</th>
		<th align="center" abbr="木曜日" scope="col">木</th>
		<th align="center" abbr="金曜日" scope="col">金</th>
		<th align="center" abbr="土曜日" scope="col">土</th>
	</tr>
	<tr>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		  <a href="javascript:__doPostBack('Calendar1','3130')" style="color:Black" title="7月27日">27</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		  <a href="javascript:__doPostBack('Calendar1','3131')" style="color:Black" title="7月28日">28</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		  <a href="javascript:__doPostBack('Calendar1','3132')" style="color:Black" title="7月29日">29</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		  <a href="javascript:__doPostBack('Calendar1','3133')" style="color:Black" title="7月30日">30</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		  <a href="javascript:__doPostBack('Calendar1','3134')" style="color:Black" title="7月31日">31</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		  <a href="javascript:__doPostBack('Calendar1','3135')" style="color:Black" title="8月1日">1</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		  <a href="javascript:__doPostBack('Calendar1','3136')" style="color:Black" title="8月2日">2</a></td>
	</tr>
	<tr>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		  <a href="javascript:__doPostBack('Calendar1','3137')" style="color:Black" title="8月3日">3</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		  <a href="javascript:__doPostBack('Calendar1','3138')" style="color:Black" title="8月4日">4</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		  <a href="javascript:__doPostBack('Calendar1','3139')" style="color:Black" title="8月5日">5</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		  <a href="javascript:__doPostBack('Calendar1','3140')" style="color:Black" title="8月6日">6</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		  <a href="javascript:__doPostBack('Calendar1','3141')" style="color:Black" title="8月7日">7</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		  <a href="javascript:__doPostBack('Calendar1','3142')" style="color:Black" title="8月8日">8</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		  <a href="javascript:__doPostBack('Calendar1','3143')" style="color:Black" title="8月9日">9</a></td>
	</tr>
	<tr>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('Calendar1','3144')" style="color:Black" title="8月10日">10</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('Calendar1','3145')" style="color:Black" title="8月11日">11</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('Calendar1','3146')" style="color:Black" title="8月12日">12</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('Calendar1','3147')" style="color:Black" title="8月13日">13</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('Calendar1','3148')" style="color:Black" title="8月14日">14</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('Calendar1','3149')" style="color:Black" title="8月15日">15</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('Calendar1','3150')" style="color:Black" title="8月16日">16</a></td>
	</tr>
	<tr>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('Calendar1','3151')" style="color:Black" title="8月17日">17</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('Calendar1','3152')" style="color:Black" title="8月18日">18</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('Calendar1','3153')" style="color:Black" title="8月19日">19</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('Calendar1','3154')" style="color:Black" title="8月20日">20</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('Calendar1','3155')" style="color:Black" title="8月21日">21</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('Calendar1','3156')" style="color:Black" title="8月22日">22</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('Calendar1','3157')" style="color:Black" title="8月23日">23</a></td>
	</tr>
	<tr>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('Calendar1','3158')" style="color:Black" title="8月24日">24</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('Calendar1','3159')" style="color:Black" title="8月25日">25</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('Calendar1','3160')" style="color:Black" title="8月26日">26</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('Calendar1','3161')" style="color:Black" title="8月27日">27</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('Calendar1','3162')" style="color:Black" title="8月28日">28</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('Calendar1','3163')" style="color:Black" title="8月29日">29</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('Calendar1','3164')" style="color:Black" title="8月30日">30</a></td>
	</tr>
	<tr>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('Calendar1','3165')" style="color:Black" title="8月31日">31</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('Calendar1','3166')" style="color:Black" title="9月1日">1</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('Calendar1','3167')" style="color:Black" title="9月2日">2</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('Calendar1','3168')" style="color:Black" title="9月3日">3</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('Calendar1','3169')" style="color:Black" title="9月4日">4</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('Calendar1','3170')" style="color:Black" title="9月5日">5</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('Calendar1','3171')" style="color:Black" title="9月6日">6</a></td>
	</tr>
	</table>

ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-08-02 01:19
3/4

コード:
	<table id="Calendar2" cellspacing="0" cellpadding="2" title="カレンダー" border="0" 
	style="border-color:Aqua;border-width:1px;border-style:Solid;height:200px;width:300px;border-collapse:collapse;">
	<tr>
		<td colspan="7" style="background-color:Silver;">
			<table cellspacing="0" border="0" style="width:100%;border-collapse:collapse;">
			<tr>
				<td style="width:15%;">
				<a href="javascript:__doPostBack('Calendar2','V3104')" style="color:Black" title="先月へ移動">&lt;</a></td>
				<td align="center" style="width:70%;">2008年8月</td>
				<td align="right" style="width:15%;">
				<a href="javascript:__doPostBack('Calendar2','V3166')" style="color:Black" title="来月へ移動">&gt;</a></td>
			</tr>
			</table>
		</td>
	</tr>
	<tr>
		<th align="center" abbr="日曜日" scope="col">日</th>
		<th align="center" abbr="月曜日" scope="col">月</th>
		<th align="center" abbr="火曜日" scope="col">火</th>
		<th align="center" abbr="水曜日" scope="col">水</th>
		<th align="center" abbr="木曜日" scope="col">木</th>
		<th align="center" abbr="金曜日" scope="col">金</th>
		<th align="center" abbr="土曜日" scope="col">土</th>
	</tr>
	<tr>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		  <a href="javascript:__doPostBack('calendar2','3130')" style="color:Black" title="7月27日">27</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		  <a href="javascript:__doPostBack('calendar2','3131')" style="color:Black" title="7月28日">28</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		  <a href="javascript:__doPostBack('calendar2','3132')" style="color:Black" title="7月29日">29</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		  <a href="javascript:__doPostBack('calendar2','3133')" style="color:Black" title="7月30日">30</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		  <a href="javascript:__doPostBack('calendar2','3134')" style="color:Black" title="7月31日">31</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		  <a href="javascript:__doPostBack('calendar2','3135')" style="color:Black" title="8月1日">1</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		  <a href="javascript:__doPostBack('calendar2','3136')" style="color:Black" title="8月2日">2</a></td>
	</tr>
	<tr>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		  <a href="javascript:__doPostBack('calendar2','3137')" style="color:Black" title="8月3日">3</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		  <a href="javascript:__doPostBack('calendar2','3138')" style="color:Black" title="8月4日">4</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		  <a href="javascript:__doPostBack('calendar2','3139')" style="color:Black" title="8月5日">5</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		  <a href="javascript:__doPostBack('calendar2','3140')" style="color:Black" title="8月6日">6</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		  <a href="javascript:__doPostBack('calendar2','3141')" style="color:Black" title="8月7日">7</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		  <a href="javascript:__doPostBack('calendar2','3142')" style="color:Black" title="8月8日">8</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		  <a href="javascript:__doPostBack('calendar2','3143')" style="color:Black" title="8月9日">9</a></td>
	</tr>
	<tr>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('calendar2','3144')" style="color:Black" title="8月10日">10</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('calendar2','3145')" style="color:Black" title="8月11日">11</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('calendar2','3146')" style="color:Black" title="8月12日">12</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('calendar2','3147')" style="color:Black" title="8月13日">13</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('calendar2','3148')" style="color:Black" title="8月14日">14</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('calendar2','3149')" style="color:Black" title="8月15日">15</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('calendar2','3150')" style="color:Black" title="8月16日">16</a></td>
	</tr>
	<tr>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('calendar2','3151')" style="color:Black" title="8月17日">17</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('calendar2','3152')" style="color:Black" title="8月18日">18</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('calendar2','3153')" style="color:Black" title="8月19日">19</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('calendar2','3154')" style="color:Black" title="8月20日">20</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('calendar2','3155')" style="color:Black" title="8月21日">21</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('calendar2','3156')" style="color:Black" title="8月22日">22</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('calendar2','3157')" style="color:Black" title="8月23日">23</a></td>
	</tr>
	<tr>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('calendar2','3158')" style="color:Black" title="8月24日">24</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('calendar2','3159')" style="color:Black" title="8月25日">25</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('calendar2','3160')" style="color:Black" title="8月26日">26</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('calendar2','3161')" style="color:Black" title="8月27日">27</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('calendar2','3162')" style="color:Black" title="8月28日">28</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('calendar2','3163')" style="color:Black" title="8月29日">29</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('calendar2','3164')" style="color:Black" title="8月30日">30</a></td>
	</tr>
	<tr>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('calendar2','3165')" style="color:Black" title="8月31日">31</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('calendar2','3166')" style="color:Black" title="9月1日">1</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('calendar2','3167')" style="color:Black" title="9月2日">2</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('calendar2','3168')" style="color:Black" title="9月3日">3</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('calendar2','3169')" style="color:Black" title="9月4日">4</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('calendar2','3170')" style="color:Black" title="9月5日">5</a></td>
		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">
		<a href="javascript:__doPostBack('calendar2','3171')" style="color:Black" title="9月6日">6</a></td>
	</tr>
	</table>

ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-08-02 01:23
4/4

たぶん jQuery 使うと劇的にコードが小さくなります。
が、４つくらい前のレスで余計なおせっかいなこと書いています。
業務なのか遊びなのか分かりませんが、
たったこれだけの機能のために jQuery なんぞ使う必要はありません。
もっともプロジェクトの前提条件として jQuery を利用した画面設計が
可能なら別ですが。

#jQuery は便利です。使うことに対して批判しているわけではありません。


巨大すぎました；；

コード:

	<table id="calendar3" cellspacing="0" cellpadding="2" title="カレンダー" border="0" 

	style="border-color:Aqua;border-width:1px;border-style:Solid;height:200px;width:300px;border-collapse:collapse;">

	<tr>

		<td colspan="7" style="background-color:Silver;">

			<table cellspacing="0" border="0" style="width:100%;border-collapse:collapse;">

			<tr>

				<td style="width:15%;">

				<a href="javascript:__doPostBack('calendar3','V3104')" style="color:Black" title="先月へ移動"><</a></td>

				<td align="center" style="width:70%;">2008年8月</td>

				<td align="right" style="width:15%;">

				<a href="javascript:__doPostBack('calendar3','V3166')" style="color:Black" title="来月へ移動">></a></td>

			</tr>

			</table>

		</td>

	</tr>

	<tr>

		<th align="center" abbr="日曜日" scope="col">日</th>

		<th align="center" abbr="月曜日" scope="col">月</th>

		<th align="center" abbr="火曜日" scope="col">火</th>

		<th align="center" abbr="水曜日" scope="col">水</th>

		<th align="center" abbr="木曜日" scope="col">木</th>

		<th align="center" abbr="金曜日" scope="col">金</th>

		<th align="center" abbr="土曜日" scope="col">土</th>

	</tr>

	<tr>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		  <a href="javascript:__doPostBack('calendar3','3130')" style="color:Black" title="7月27日">27</a></td>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		  <a href="javascript:__doPostBack('calendar3','3131')" style="color:Black" title="7月28日">28</a></td>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		  <a href="javascript:__doPostBack('calendar3','3132')" style="color:Black" title="7月29日">29</a></td>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		  <a href="javascript:__doPostBack('calendar3','3133')" style="color:Black" title="7月30日">30</a></td>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		  <a href="javascript:__doPostBack('calendar3','3134')" style="color:Black" title="7月31日">31</a></td>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		  <a href="javascript:__doPostBack('calendar3','3135')" style="color:Black" title="8月1日">1</a></td>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		  <a href="javascript:__doPostBack('calendar3','3136')" style="color:Black" title="8月2日">2</a></td>

	</tr>

	<tr>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		  <a href="javascript:__doPostBack('calendar3','3137')" style="color:Black" title="8月3日">3</a></td>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		  <a href="javascript:__doPostBack('calendar3','3138')" style="color:Black" title="8月4日">4</a></td>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		  <a href="javascript:__doPostBack('calendar3','3139')" style="color:Black" title="8月5日">5</a></td>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		  <a href="javascript:__doPostBack('calendar3','3140')" style="color:Black" title="8月6日">6</a></td>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		  <a href="javascript:__doPostBack('calendar3','3141')" style="color:Black" title="8月7日">7</a></td>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		  <a href="javascript:__doPostBack('calendar3','3142')" style="color:Black" title="8月8日">8</a></td>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		  <a href="javascript:__doPostBack('calendar3','3143')" style="color:Black" title="8月9日">9</a></td>

	</tr>

	<tr>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		<a href="javascript:__doPostBack('calendar3','3144')" style="color:Black" title="8月10日">10</a></td>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		<a href="javascript:__doPostBack('calendar3','3145')" style="color:Black" title="8月11日">11</a></td>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		<a href="javascript:__doPostBack('calendar3','3146')" style="color:Black" title="8月12日">12</a></td>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		<a href="javascript:__doPostBack('calendar3','3147')" style="color:Black" title="8月13日">13</a></td>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		<a href="javascript:__doPostBack('calendar3','3148')" style="color:Black" title="8月14日">14</a></td>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		<a href="javascript:__doPostBack('calendar3','3149')" style="color:Black" title="8月15日">15</a></td>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		<a href="javascript:__doPostBack('calendar3','3150')" style="color:Black" title="8月16日">16</a></td>

	</tr>

	<tr>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		<a href="javascript:__doPostBack('calendar3','3151')" style="color:Black" title="8月17日">17</a></td>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		<a href="javascript:__doPostBack('calendar3','3152')" style="color:Black" title="8月18日">18</a></td>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		<a href="javascript:__doPostBack('calendar3','3153')" style="color:Black" title="8月19日">19</a></td>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		<a href="javascript:__doPostBack('calendar3','3154')" style="color:Black" title="8月20日">20</a></td>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		<a href="javascript:__doPostBack('calendar3','3155')" style="color:Black" title="8月21日">21</a></td>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		<a href="javascript:__doPostBack('calendar3','3156')" style="color:Black" title="8月22日">22</a></td>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		<a href="javascript:__doPostBack('calendar3','3157')" style="color:Black" title="8月23日">23</a></td>

	</tr>

	<tr>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		<a href="javascript:__doPostBack('calendar3','3158')" style="color:Black" title="8月24日">24</a></td>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		<a href="javascript:__doPostBack('calendar3','3159')" style="color:Black" title="8月25日">25</a></td>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		<a href="javascript:__doPostBack('calendar3','3160')" style="color:Black" title="8月26日">26</a></td>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		<a href="javascript:__doPostBack('calendar3','3161')" style="color:Black" title="8月27日">27</a></td>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		<a href="javascript:__doPostBack('calendar3','3162')" style="color:Black" title="8月28日">28</a></td>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		<a href="javascript:__doPostBack('calendar3','3163')" style="color:Black" title="8月29日">29</a></td>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		<a href="javascript:__doPostBack('calendar3','3164')" style="color:Black" title="8月30日">30</a></td>

	</tr>

	<tr>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		<a href="javascript:__doPostBack('calendar3','3165')" style="color:Black" title="8月31日">31</a></td>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		<a href="javascript:__doPostBack('calendar3','3166')" style="color:Black" title="9月1日">1</a></td>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		<a href="javascript:__doPostBack('calendar3','3167')" style="color:Black" title="9月2日">2</a></td>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		<a href="javascript:__doPostBack('calendar3','3168')" style="color:Black" title="9月3日">3</a></td>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		<a href="javascript:__doPostBack('calendar3','3169')" style="color:Black" title="9月4日">4</a></td>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		<a href="javascript:__doPostBack('calendar3','3170')" style="color:Black" title="9月5日">5</a></td>

		<td align="center" style="background-color:AliceBlue;border-width:1px;border-style:Solid;width:14%;">

		<a href="javascript:__doPostBack('calendar3','3171')" style="color:Black" title="9月6日">6</a></td>

	</tr>

	</table>



	<div>

		<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWhQEC9

/PtkA8C0a7zvg4C766LgQoCyNPryAUCyNPH4w4CyNOznwYCyNOvug8CyNObVQLI0

/fwCQLI0+OrAQLI09

/GCgLI04uvDwLI0+dKAqPpidMDAqPp5Y4LAqPp0akMAqPpzcQFAqPpueAOAqPplZsGAqPpgbYPAqPp

/VECo+mpugUCo+mF1Q4CnoaX/gkCnoaDmQECnob/tAoCnobr7wMCnobHigsCnoazpgwCnoavwQUCnoab

/A4Cnoa3xQMCnoaj4AQC+Z+1iQYC+Z+hpA8C+Z+dXwL5n4n6CQL5n+WVAQL5n9GwCgL5n83rAwL5n7mHCwL5n9XvCQL5n8GKAQLUtNOTDALUtM

/OBQLSrvO+DgLsrouBCgLL0+vIBQLL08fjDgLL07OfBgLL06+6DwLL05tVAsvT9

/AJAsvT46sBAsvT38YKAsvTi68PAsvT50oCoOmJ0wMCoOnljgsCoOnRqQwCoOnNxAUCoOm54A4CoOmVmwYCoOmBtg8CoOn9UQKg6am6BQKg6YXVDgKdhpf+CQKdhoOZAQKdhv+0CgKdhuvvAwKdhseKCwKdhrOmDAKdhq

/BBQKdhpv8DgKdhrfFAwKdhqPgBAL6n7WJBgL6n6GkDwL6n51fAvqfifoJAvqf5ZUBAvqf0bAKAvqfzesDAvqfuYcLAvqf1e8JAvqfwYoBAte005MMAte0z84FAsvH5p8FArrEvpAOApyGq8EFApyGh

/wOApyGs8UDApyGr+AEAvufsYkGAvufraQPAvufmV8C+5/1+gkC+5/hlQEC+5/dsAoC+5

/J6wMC+5+lhwsC+5/R7wkC+5

/NigEC1rTfkwwC1rTLzgUC1rSn6g4C1rSThQYC1rSPoA8C1rT7WwLWtNf2CQLWtMORAQLWtP

/6BwLWtOuVDwL93p

/SBQL93ouNDQL93ueoBgL93tPDDwL93s9+Av3eu5oIAv3el7UBAv3eg9AKAv3ev7kPAv3eq1QC2Pe9

/QMC2PepmAsC2PeFswwC2Pfx7gUC2PftiQ0C2PfZpAYC2Pe1wA8C2Pehe31SXWYDDsZqDPXB4rpXcoGNHy1O" 

/>

	</div>



	<div class="tooltip" id="ToolTip">

	

	</div>

</div>





</form>

</body>

</html>




[ メッセージ編集済み 編集者: ぴあちゃん 編集日時 2008-08-02 01:28 ]

[ メッセージ編集済み 編集者: ぴあちゃん 編集日時 2008-08-02 01:34 ]

[ メッセージ編集済み 編集者: ぴあちゃん 編集日時 2008-08-02 01:41 ]
SL
大ベテラン
会議室デビュー日: 2008/05/02
投稿数: 183
投稿日時: 2008-08-02 07:20
大変なご苦労をおかけしたことに感謝いたします。

このコードを見ても私には、「おまじない」的な部分が多くありどこまで理解できるか疑問ですが、少しずつでも検証してみたいと思います。

疑問が２つ、
１つは、これからの確認になりますが、<body>タグ部分のカレンダーは、ツールボックス内のカレンダーと差し替え可能？それとも毎月、ここに書いてあるようにカレンダーを作成する？または、私への教育のためのコード記載？
もう一つは、
> jQuery を使う許可を貰う必要があるでしょうけど
とありますが、この意味は、これを使用すると何らかのリスクなどあるという意味でしょうか？私の場合、これは、仕事の一つですがこの部分に関し上司はいません。またいわゆるソフトハウスではなく一人で社内で使用するアプリを作成しています。
大そうなものは、できませんが.....今までは、VC++ でウインドウズアプリでしたが最近、Ｗｅｂあぷりも..ということになり、構造や動作、環境など大きく異なり、新たなことが多く（JavaScript もよくわからん）結構たいへんです。
またお聞きすることがあると思いますが、よろしくお願いいたします。
まずは、提示コードをこれから調べます。時間がかかると思います。
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-08-02 16:22
＞私の場合、これは、仕事の一つですがこの部分に関し上司はいません。
＞またいわゆるソフトハウスではなく一人で社内で使用するアプリを作成しています。

一人でやってるなら勉強がてらjQuery に手を出すのもいいかもしれませんね。
でも君が一人でやってるなんて知りません。

＞１つは、これからの確認になりますが、<body>タグ部分のカレンダーは、
＞ツールボックス内のカレンダーと差し替え可能？

だから、<ASP:Calendar> を３つ並べたASPXコード載せたでしょう。
ASPXを実行すると上記の長ったらしいコードになるのですよ。
<ASP:Calendar> は、<table>〜</table>に展開されるのです。

コード展開は内部的なルールがあるのでこのルールをうまく利用しないと
ただ闇雲にJavaScript書いたって動くわけないでしょう。

jQuery の実装にしたって同じやり方になりますよ。
ASPタグから出来上がりを想像できる人なんてまず居ません。
僕はCalendarは見た目からいかにも table タグで出力される
と思い込んで・・・まぁたまたま当たっただけですね。

ASPタグを使ったWebページにJavaScriptなりjQuery でコードを追加する場合
大抵は以下のような手順を踏みます。
（１）Webdeveloper等でASPXコードを記述する。
（２）デバッグ実行してみる。
（３）ブラウザ上で表示確認できたら、「右クリック−＞ソースを表示する」で
　　　ASPタグの展開されたHTMLを見る。
（４）展開されるHTMLコードの特徴をつかむ。
（５）表示したHTMLソースを別ファイルに保存する。
（６）保存したHTMLファイルに対してJavaScript/jQueryを埋め込む。
（７）動作確認する。・・・
（８）動作確認終わったら、追加したコード部分だけをASPXファイルに移植する。
（９）デバッグ実行して動作を確認する。

なれてくれば、（５）（６）（７）は無しでいきなりASPXにコード書き込むなり
で済むでしょうけど。

僕の場合は以下のような手順になりました。
（１）カレンダーコントロールというのが標準のものなのかAjaxtolkitのものなのか
　　　わからんかったのでとりあえずカレンダーといえばテーブルだから、テーブルで
　　　適当にカレンダーらしきものを用意してそれに対して希望の動作をするJavaScript
　　　を書いた。
（２）君が標準のカレンダーコントロールって書いたから、自宅のWebdeveloperを
　　　使ってカレンダーコントロールのデモを作って実行し、HTMLソースを見たらほぼ
　　　思っていた通りのコードが生成されていた。
（３）上に書いた、（５）（６）（７）の手順を踏んで動くようにした。
（４）ASPXにコピペ移植するのが面倒だったので掲示板に長ったらしいコードを全部
　　　書いた。

«前のページへ 1|2|3|4|5|6|7 次のページへ»

スキルアップ／キャリアアップ（JOB@IT）