- PR -

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

«前のページへ 1|2|3|4|5|6|7 次のページへ»
投稿者投稿内容
SL
大ベテラン
会議室デビュー日: 2008/05/02
投稿数: 183
投稿日時: 2008-07-30 08:59
お世話になります。

もう一度、このサンプルのコードをコピペしててすとしてみました。
「Microsoft JScript 実行時エラー: 'jQuery' は宣言されていません。」
というエラーが出ます。このエラーの解決もですが、jQuery そのものがわかりません。
基本的なこと、必要なライブラリなど説明しているページなどご存じありませんか？
今回、初めて見たものですので対処がわかりません。よろしくお願いします。
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-07-31 01:58
私のサンプルは結局挫折したの？

まず、AjaxToolkit　でカレンダー表示したのでしょう？
なんで、jQueryが簡単って言葉に惑わされて安易にjQuery を使おうとしているの？

（１）横に３つ１ヶ月のカレンダー表示する
（２）各日付セルにマウスポイントするとツールチップを出す
（３）セルによっては隠し詳細メッセージがあり、ある時はそれをツールチップに表示する

確かこんな要件でしたよね？

作りこんでいないので　センタリングに多少難がありますが・・・


＞リンクで反応しない
これね、td タグのmouseover イベントだから反応しないんだよ。
a でも、td でもマウスオーバーしたら同じように動くようにし
ないとダメですね。



[ メッセージ編集済み 編集者: ぴあちゃん 編集日時 2008-07-31 02:13 ]
SL
大ベテラン
会議室デビュー日: 2008/05/02
投稿数: 183
投稿日時: 2008-07-31 10:43
お世話になります。

> まず、AjaxToolkit　でカレンダー表示したのでしょう？
Ajax でなくツールボックスに最初からあるカレンダーを使用しています。

> jQueryが簡単って言葉に惑わされて.....
というわけではないのですが、このようなツールがあるなら、今後のために少しかじってみようかなって思った具合です。
ただ、コードを削除されたので何か問題又は、これ以上フォローなし？という意味だと.....

ただ、 JavaScript でこう言うコード書いたことないので意味がよくわかりません。
本で調べてますが、getElementsByTagNameなど載ってないのもありますね。

> position: absolute;
カレンダーが２個（２個でテスト中）あって上記属性が指定されていると２個目のツールチップが１個目の上にきます。relative だとどこか行ってしまう。
これは、複数の場合い自分で位置を取得して.....などしなければなりませんか？
教えてください
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-07-31 12:59
＞ただ、コードを削除されたので何か問題又は、これ以上フォローなし？という意味だと.....

フォロー無しってんじゃなくて、コピペで動くような完成形を求めているからですよ。
ここがどーしたい、あれしたいけどこーしても全然動かないって具体的に例示してく
れないとわからんでしょう。
自分で書いたコードの提示も無しじゃコピペで動くものを求められていると思われて
も仕方無いでしょう。

どーゆー風に組み込んだのか、どこをどういじってとかレスしてくださいね。

＃jQuery を理解したいなら、jQuery を配布しているHPでダウンロードした
＃方がいいです。圧縮されたものでは無いちゃんとインデントが付いたちゃんと
＃名前がある奴がありますから。圧縮コードを理解できる人はあまり居ません
＃よ。

コード:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>

<HEAD> 

<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<TITLE></TITLE>

<style>

div.calendar {

	position:relative;

	border:dotted 1px lime;

	left:0px;

	width:800px;

	height:140px;

}



div.calendar th, div.calendar td {

	width:30px;

	height:20px;

	background-color:pink;

}

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;

}

div.yoko1 {

	position:absolute;

	left:0px;

	top:0px;

}

div.yoko2 {

	position:absolute;

	left:270px;

	top:0px;

}

div.yoko3 {

	position:absolute;

	left:540px;

	top:0px;

}

</style>

<script>

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 yoko = tbls[z].parentNode.offsetLeft;

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

		var tds = tbody.getElementsByTagName("td");

	

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

			var td = tds[i];

			td.onmouseover = function(dx,dy) {

				return function() {

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

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

				}

			}(yoko,0);

		}

	}

}

window.onload = function() {

	mouseover();

}

</script>

</HEAD>

<BODY>



<center>

<div class="calendar">

	<div class="yoko1">

	<table border>

	<thead>

		<tr><td colspan=7>2007/10</td></tr>

	</thead>

	<tbody>

		<tr>

			<th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th>

		</tr>

		<tr>

			<td></td><td></td><td><a href="javascript:void(0)" onmouseover="this.parentNode.onmouseover()">1</a></td><td>2</td><td>3</td><td>4</td><td>5</td>

		</tr>

		<tr>

			<td>6</td><td>7</td><td>8</td><td>9</td><td>10<input type=hidden value="今日は定休日"></td><td>11</td><td>12</td>

		</tr>

		<tr>

			<td>13</td><td>14</td><td>15</td><td>16</td><td>17<input type=hidden value="授業参観日"></td><td>18</td><td>19</td>

		</tr>

	</tbody>

	</table>

	</div>

	<div class="yoko2">

	<table border>

	<thead>

		<tr><td colspan=7>2007/10</td></tr>

	</thead>

	<tbody>

		<tr>

			<th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th>

		</tr>

		<tr>

			<td></td><td></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>

		</tr>

		<tr>

			<td>6</td><td>7</td><td>8</td><td>9<input type=hidden value="体育の日"></td><td>10</td><td>11</td><td>12</td>

		</tr>

		<tr>

			<td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td>

		</tr>

	</tbody>

	</table>

	</div>

	<div class="yoko3">

	<table border>

	<thead>

		<tr><td colspan=7>2007/10</td></tr>

	</thead>

	<tbody>

		<tr>

			<th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th>

		</tr>

		<tr>

			<td></td><td></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>

		</tr>

		<tr>

			<td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td>

		</tr>

		<tr>

			<td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18<input type=hidden value="給料日"></td><td>19</td>

		</tr>

	</tbody>

	</table>

	</div>

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

	

	</div>

</div>

</center>

<br>

<hr />



</BODY>

</HTML>


#CSS 名前が違ってた・・・


[ メッセージ編集済み 編集者: ぴあちゃん 編集日時 2008-07-31 15:15 ]
SL
大ベテラン
会議室デビュー日: 2008/05/02
投稿数: 183
投稿日時: 2008-08-01 09:21
お世話になります。

ただ今、試行錯誤中です。
カレンダーは、ツールボックスから標準のカレンダーを使用したくまた、縦に３枚並べ手使用したいと思います。とりあえず下記のようにコードを変更し、実行すると縦に３枚並びます。ツールチップは、表示しますが、位置があってるのは、いちばん上のみ。
tbls[z].parentNode.offsetTop がそれぞれのTableタグにある縦位置？と思いますがこの考えでいいですか？値がうまく反映されていないようですけど。

それと、リンクに乗ったときツールチップを消したくCSSにこれを追加しましたが変化なし。
div.a:hover {
visibility:hidden;
}

<script type="text/javascript">
function mouseover() {
　　　　　　　　：
　　　　　　　　：
　for (var z=0 ; z < tbls.length ; z++) {
var yoko = tbls[z].parentNode.offsetLeft;
var tate = tbls[z].parentNode.offsetTop;　<= これを追加

}
}(yoko, tate); <= ここも変更

<form id="form1" runat="server">
<div>
<div class="calendar" style="width: 357px; height: 540px; left: 0px; top: 0px;">
<table>
<tr>
<td>
<table border="1">
<tr class="yoko1">
<tbody>
<asp:Calendar ID="Calendar1" runat="server" Width="384px" style="left: -1px; top: 157px"></asp:Calendar>
</tbody>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr class="yoko2" style="left: 495px; top: 0px">
<tbody>
<asp:Calendar ID="Calendar2" runat="server" Width="360px"></asp:Calendar>
</tbody>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr class="yoko3" style="left: 495px; top: 0px">
<tbody>
<asp:Calendar ID="Calendar3" runat="server" Width="337px" Height="207px"></asp:Calendar>
</tbody>
</tr>
</table>
</td>
</tr>

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

</form>
よろしくお願いします。
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-08-01 11:21

いきなり自分のプログラムに応用しないで下さい。
横に３つ並ぶサンプルをそのまま縦に応用できるとは
考えないで下さい。コピペでは動かないですから。

「アンカーの上にある間はツールチップを表示しない」
ようにするにはどーすればいいですか？
アンカーの上にマウスが乗ったらフラグONして、マウス
が離れたらフラグOFFする。ツールチップを表示する部分
をフラグで囲ってあげれば良さそうですね。
コード:
if (flag=="OFF") {
   //ツールチップ表示処理
}


コード:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD> 
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE></TITLE>
<style>
div.calendar {
	position:relative;
	border:dotted 1px lime;
/*	left:0px;
	width:800px;
	height:140px;*/
}

a {
	background-color:violet;
}

div.calendar th, div.calendar td {
	width:30px;
	height:20px;
	background-color:pink;
}
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>
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 tds = tbody.getElementsByTagName("td");
	
		for (var i=0;i < tds.length;i++) {
			var td = tds[i];
			td.onmouseover = function(dx,dy) {
				return function() {
					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();
			}
		}
	}
}
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>
<BODY>

<Qcenter>
<div class="calendar">
	<table border>
	<thead>
		<tr><td colspan=7>2007/10</td></tr>
	</thead>
	<tbody>
		<tr>
			<th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th>
		</tr>
		<tr>
			<td></td><td></td><td><a href="javascript:void(0)" onmouseover="">1</a></td><td>2</td><td>3</td><td>4</td><td>5</td>
		</tr>
		<tr>
			<td>6</td><td>7</td><td>8</td><td>9</td><td>10<input type=hidden value="今日は定休日"></td><td>11</td><td>12</td>
		</tr>
		<tr>
			<td>13</td><td>14</td><td>15</td><td>16</td><td>17<input type=hidden value="授業参観日"></td><td>18</td><td>19</td>
		</tr>
	</tbody>
	</table>
	<table border>
	<thead>
		<tr><td colspan=7>2007/10</td></tr>
	</thead>
	<tbody>
		<tr>
			<th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th>
		</tr>
		<tr>
			<td></td><td></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
		</tr>
		<tr>
			<td>6</td><td>7</td><td>8</td><td>9<input type=hidden value="体育の日"></td><td>10</td><td>11</td><td>12</td>
		</tr>
		<tr>
			<td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td>
		</tr>
	</tbody>
	</table>
	<table border>
	<thead>
		<tr><td colspan=7>2007/10</td></tr>
	</thead>
	<tbody>
		<tr>
			<th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th>
		</tr>
		<tr>
			<td></td><td></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
		</tr>
		<tr>
			<td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td>
		</tr>
		<tr>
			<td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18<input type=hidden value="給料日"></td><td>19</td>
		</tr>
	</tbody>
	</table>
	<div class="tooltip" id="ToolTip">
	
	</div>
</div>
</center>
<br>
<hr />

</BODY>
</HTML>


がんばってくださいね。
SL
大ベテラン
会議室デビュー日: 2008/05/02
投稿数: 183
投稿日時: 2008-08-01 12:17

> がんばってくださいね。

本当にお世話になってます。この言葉は、励みになります。
コードについては、これからの検討になります。まずは、お礼まで。
SL
大ベテラン
会議室デビュー日: 2008/05/02
投稿数: 183
投稿日時: 2008-08-01 16:33
お世話になります。

> <a href="javascript:void(0)" onmouseover="">
table内にある上記リンク部分は、どういう意味ですか？このリンクにマウスが乗ったらこのコードは、JavaScript の何を呼び出していますか？

それと<a href="javascript:void(0)" onmouseover="">1</a>では、ツールチップが消え同様の処理を他の日付に書いても消えない、手の形のままというのはなぜですか？
特に違いはないように見えますが.....

[ メッセージ編集済み 編集者: SL 編集日時 2008-08-01 17:19 ]
«前のページへ 1|2|3|4|5|6|7 次のページへ»

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