- PR -

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

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

> デバッグ実行して動作を確認する。
JavaScript の部分ってデバッグできますか？エラーや alert() などで表示すればその時点での内容は確認できますが、エラーなくやったふりなどした場合動作がつかめません。
提示されたコード自体は、理解できなくもないのですがコードを加えるとなるとＣ＃のようなデバッグのようなことができないと動きが理解できません。
この２日間進むことなく提示のサンプルの域から出られなくまいってます。
諦めるつもりはありませんが......

やってみたこと
１．ツールチップの初期スタンバイで表示を消す。-> 下記にて可
window.onload = function() {
mouseover();
hideToolTip(); // 初期表示のツールチップを消す
}
２．カレンダーを「ツールボックス」内に変更し表示 -> OK
３．ツールチップの内容を任意に変更
　　このサンプル内では、inputタグ内に書いているものを表示していて、さらに日付内に書き出されている。実際にタグ内に下記で書いたときか、ツールチップのテーブルを用意したときに、それを見つけるコードがわからない。
Calendar1_DayRender()
TableCell cell = (TableCell)e.Cell;
cell.Controls.Add(new LiteralControl("<BR>" + "abcde"));
実際は、後者ができればいいのですが...
この部分は、まったくわかりません。
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-08-03 21:24

ここまでは出来たのですね？
コード:
<%@ 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>
<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;
  visibility:hidden;
}
</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");
  
    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>
<body>
    <form id="form1" runat="server">
    <div class="calendar">
        <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 class="tooltip" id="ToolTip">
      
      </div>
    </div>
    </form>
</body>
</html>

セルレンダーで追加した項目は、どんなタグで展開されますか？
日付のアンカータグより後ですか？前ですか？
<td> タグ内の並び順はどうなっていますか？

並び順でやるなら、childNodes というのが使えます。
順不同なら、getElementsByTagName で取れます。

JavaScript のインテリセンスやデバッガは今のところ無いのかな？
VisualStudio2008ではJavaScriptのコードアシストが効くような話
をどこかで聞いたような聞かなかったような・・・です。
SL
大ベテラン
会議室デビュー日: 2008/05/02
投稿数: 183
投稿日時: 2008-08-04 08:57
お世話になります。

> 追加した項目は、どんなタグで展開されますか？ 日付のアンカータグより後ですか？前ですか？
<a href="javascript:__doPostBack('Calendar1','3135')" style="color:Black" title="8月1日">1</a><BR>ZXC</td><td align="center" style="background-color:Tan;border-width:1px;border-style:Solid;width:14%;">

<a href="javascript:__doPostBack('Calendar1','3136')" style="color:Black" title="8月2日">2</a><BR>ZXC</td></tr>
<tr><td align="center" style="background-color:Tan;border-width:1px;border-style:Solid;width:14%;">
という感じで吐き出されています。
また、ツールチップを表示すと同じタイミングでデフォルトのツールチップも表示してきます。下記の吐き出されたコードは、カレンダ部分のトップで title="カレンダー" 部分だと思うのですがこれをなくすことはできないのでしょうか？デフォルトの日付部分は、表示してもＯＫ。プロパティでの細工は、できますか？何らかの文字を入れるとそれが出るし、なくすと標準（？）のカレンダーの文字が出てしまう。
>< のようなコードみたいなものは、ないのでしょうか？

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

----- 追加
下記のように、「子要素...」から下のコードを追加することでツールチップを表示しましたが、この方法は正しいですか？１枚目のカレンダーのみで２つめ３っつ目については、まだ試してません。

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 txt;
oElements = ob.childNodes; // 子要素リスト
for (i = 0; i < oElements.length; i++) {
oElement = oElements[i];
if(oElement.nodeName == "#text") {
txt = oElement.nodeValue;
//alert(txt);
}
}

aspx.cs

int cnt=0;
protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
{
CalendarDay day = (CalendarDay)e.Day;
TableCell cell = (TableCell)e.Cell;

if (!day.IsOtherMonth)
{
if ((cnt % 2) != 0)
{
cell.BackColor = System.Drawing.Color.Tan;
cell.Controls.Add(new LiteralControl("<BR>" + "abcde"));
}
else
{
cell.BackColor = System.Drawing.Color.Tan;
cell.Controls.Add(new LiteralControl("<BR>" + "ZXC"));
}
++cnt;
}
}

[ メッセージ編集済み 編集者: SL 編集日時 2008-08-04 09:50 ]
Access
ぬし
会議室デビュー日: 2002/04/08
投稿数: 829
投稿日時: 2008-08-04 11:24
サンプルを作成しましたので
よろしければ参考にしてください。

ライブデモ：
http://asp35.com/samples/080804VB-1.aspx?it=demo

[View Code]ボタンをクリックするとソースコードが表示されます。
_________________
ASP.NET+Ajaxサンプル集 | JavaScript+Ajaxサンプル集
SL
大ベテラン
会議室デビュー日: 2008/05/02
投稿数: 183
投稿日時: 2008-08-04 16:00
お世話になります。

> サンプルを作成しましたので....
ＡｊａｘとｊＱｕｅｒｙを使用されたサンプルですね。
まだ、この両者を使って作成していないので構成等よくわかりません。今の JavaScript の学習が上記を生かすことになると思いますので後ほどトライしてみます。


JavaScript について教えてください。

セルにマウスがポイントしたとき、ツールチップが表示されるときのそこにある日付を取得したいのですがどうしたらできますか？
教えてください。


[ メッセージ編集済み 編集者: SL 編集日時 2008-08-04 21:19 ]
Jitta
ぬし
会議室デビュー日: 2002/07/05
投稿数: 6267
お住まい・勤務地: 兵庫県・海手
投稿日時: 2008-08-04 21:21
引用:

SLさんの書き込み (2008-08-04 16:00) より:
id="GridView1"が拾えません。getElementsByTagNameなどで拾えるのですか？教えてください。

　それくらい、本を買ってきて勉強しましょうよ。。。getElementById
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-08-05 00:45
＞サンプルを作成しましたので
jQuery だとやっぱり劇的に小さくなるんですね〜。
ある程度できたら jQuery に切り替えようかなぁ、と思っていたのですが・・・
そこでAccessさんのご登場を願おうかと思っていた次第ですｗ痺れ切らせて
しまい申し訳ないです；；

全然進まないんですよね。。。

デフォルトのツールチップは title だったかそこらへんを細工すれば
出なく出来ます。

イベント発生オブジェクトは　ｔｄ要素なんで、
event.srcElement.getElementsByTagName("a")[0].title = "";
で消せます。並び順を意識するならば、[0] きめ打ちです。
jQuery だと便利なメソッドで find ってのがあるようですね。

＞この方法は正しいですか？
大丈夫です。

＞それくらい、本を買ってきて勉強しましょうよ。。。getElementById
本じゃなくても、「とほほ」なりDOMリファレンスなり参考ページを見ている
と思っていたのですけどね・・・

＞今の JavaScript の学習が上記を生かすことになると思います
一応、jQuery のコードで言うと、タグを探すところとかは、
$("#Calendar1 tr td ").
ここですかね。こちらのコードだとなんだか３重のループ回したり
していますが、あっさり書けちゃいますね、jQuery だと。
でもやっていることを理解した上で jQuery でコード書くと応用の
幅が広がりますから、たぶん。

どっちでやるにせよ、がんばって理解してください。
SL
大ベテラン
会議室デビュー日: 2008/05/02
投稿数: 183
投稿日時: 2008-08-05 09:13
お世話になります。

> event.srcElement.getElementsByTagName("a")[0].title = "";で消せます
これだと日付部分が消えますね。できれば”カレンダー”と表示される部分を消したいのでが......

> >それくらい、本を買ってきて勉強しましょうよ。。。getElementById
>　本じゃなくても、「とほほ」なり.....
その通りです。これでやってました。ただ、getElementById ももちろん試していたのですが、null になりうまく取得できませんでした。それできいた次第です。

> どっちでやるにせよ、がんばって理解してください。
そうですね。JavaScript やスタイルシートなしでは、コードが書けないと思いますのでもう少し勉強してから、jQuery,Ajax に手を出してみます。
«前のページへ 1|2|3|4|5|6|7 次のページへ»

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