- PR -

こんなことできますか？

1|2 次のページへ»
投稿者投稿内容
ニッシー
常連さん
会議室デビュー日: 2008/05/21
投稿数: 28
投稿日時: 2008-07-08 22:29
変なタイトルですみません。
初心者でございます。
この会議室のメンバー様のおかげで、DBの最新状況をUpdatePanel内のGridViewでちらつかせずに表示できるようになりました！大感謝です。
つきましては・・・

■やりたいこと
UpdatePanel内のGridViewでデータが変わった事をビジュアル的に表現したく、その項目の背景色をアニメーション使って緑→白へフェードアウトさせたい。
■やってみたこと
UpdatePanelAnimationExtenderにてUpdatePanel内にあるラベルの色を変えることは、例にあったのでできました。ただ、GridView内のLabelにアクセスすることはできませんでした。ただ、GridView内のLabelにアクセスできても行数までコントロールできるのかなど、考えると普通にやってはできそうに無い気もしています。

代替方法含めてアイディアをいただければ幸いです。
よろしくお願いいたします。

ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-07-09 01:44
なんだかよくわからないのですが、

<div id="ok" style="background-color:#FFFF00">
あいうおえ
</div>
を背景を数秒秒掛けてブルーにするのはこんな感じです。
AnimationPanelExtenderの中身もこれとそう変わらないはずです。

function FadeBlue() {
var red = 255;
var green = 255;
var blue = 0;
setTimeout(function(red,green,blue) {
return function() {
if (blue < 255) {
var color = "rgb("+red + "," + green + "," + blue + ")";
red--;
green--;
blue++;
ok.style.backgroundColor= color;
setTimeout(arguments.callee, 50);
}
}
}(255,255,0), 50);
}

別にUpdatePanelのコンテンツならうまく行くからってUpdatePanel自体に掛けて
うまく行かないわけがないと思いますが・・・

コピペで動くので開始するボタンでもこさえて実行してみてください。


＞変なタイトルですみません。
＞初心者でございます。

＃狙って初心者ってのはあんまりなんじゃ・・・
Access
ぬし
会議室デビュー日: 2002/04/08
投稿数: 829
投稿日時: 2008-07-09 07:26
引用:

UpdatePanel内のGridViewでデータが変わった事をビジュアル的に表現したく、その項目の背景色をアニメーション使って緑→白へフェードアウトさせたい。

GridViewのイベントでJavaScriptを生成してScriptManagerの
・RegisterClientScriptBlock()
・RegisterStartupScript()
メソッドで埋め込むのはどうでしょうか。

私ならjQueryのfadeIn(),fadeOut(),fadeTo()を利用しますけどね。

こんな感じ！
http://jsajax.com/jQueryEffectsFadeToArticle1009.aspx

_________________
ASP.NET+Ajaxサンプル集 | JavaScript+Ajaxサンプル集
ニッシー
常連さん
会議室デビュー日: 2008/05/21
投稿数: 28
投稿日時: 2008-07-09 07:58
ぴあちゃん様、
返信ありがとうゴザイマス。

うまく説明ができていなくて申し訳ありません。
まずは、ぴあちゃん様にて例示を実行してみました。が、エラー：型または名前空間名 'function' が見つかりませんでした。using ディレクティブまたはアセンブリ参照が不足しています。と表示されてしまいました。貼り付ける場所が悪かったのかナ？

ただ、コードを拝見する限りできそうな事は想像できます。私も以下のＵＲＬで紹介されている内容をそのままやってみましたので。
http://www.atmarkit.co.jp/fdotnet/dotnettips/692aspajaxupanim/aspajaxupanim.html
じゃぁ何をやりたいの？を改めてまとめると、、、
①ＤＢの情報をGridViewで表示したい。
②ＤＢを５秒間隔でポーリングして、変化していたらGridViewには最新の情報を表示したい
②その際にページの再読み込みではなく、変更のあった項目だけ変えたい
------ここまでは UpdatePanel使ってできました。

③ただ、このUIでは変化のあった項目の内容がいつの間にか変わっているだけなので、この変化を目立たせたい。例えばその行の背景色を青色にして白にフェードアウトさせてゆく感じ
④UpdatePanelAnimationExtenderを使うと、情報が更新されたイベントを取得してアニメーションを利用できるらしい。
⑤URLの例では、UpdatePanelの中にあるラベルの色は変化させられた
⑥UpdatePanleの中にある、更にGridViewの中にある、更にItemTemplateの中にあるLabelの背景色を変えるところがうまくゆかない

こんな感じでしょうか。
アドバイスいただけるところがありましたら返信いただきたくよろしくお願いいたします。

PS
＞＃狙って初心者ってのはあんまりなんじゃ・・・
スミマセン。困っていると助けて欲しくてつい強調したくなっちゃいマス。控えます。
ニッシー
常連さん
会議室デビュー日: 2008/05/21
投稿数: 28
投稿日時: 2008-07-09 08:14
Access様
アドバイスありがとうゴザイマス。

＞こんな感じ！
＞http://jsajax.com/jQueryEffectsFadeToArticle1009.aspx

まさにそんな感じで変更のあった行の背景色を変えたいんです。
ご紹介いただきました、
＞GridViewのイベントでJavaScriptを生成してScriptManagerの
＞・RegisterClientScriptBlock()
＞・RegisterStartupScript()
＞メソッドで埋め込むのはどうでしょうか。
は、GridViewの「変化のあった行のみ」背景色をアニメーション的に変えることはできそうでしょうか？（スミマセン。最初の質問の書き方がへぼくて、意図が伝わっているか心配で）

よろしくお願いいたします。





ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-07-09 23:51
サンプルかいていたらエディタが落ちたので載せるの辞めます。

ヒントだけ書くのでがんばって完成させてください。

”よくある”　やり方
その１
　・変更された行をあらわすためにアンカーの rel を使う。
　　document.getElementsByTagName("a")
として、rel プロパティが 設定した値と同じものだけ集める。
　　アンカーの設定例） <td> 要素の第一子に、<a rel="modify" /> とか
　　やるだけ。id とか name とか href とか要らないです。

　・集めた A タグリストの先頭から順番に、parentNode.parentNode
すると tr タグが得られる。

　・tr タグをアニメーションエクステンダーに設定する。

その２
　jQuery は詳しい人が居るので省略します。

以上


こっそりサンプル：
コード:

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

.mod_color {

	background-color:#0000FF;

}

</style>

<script>

<!--

function FadeOut() {

	var as = document.getElementsByTagName("a");

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

		var a = as[i];

		if (a.rel.toLowerCase() == "mod") {

			var tr = a.parentNode.parentNode;

			var m = function(o, blue, inc) {

				return function() {

					if (blue + inc < 0xFFFFFF) {

						blue += inc;

						var r = blue / 65536;

						var g = (blue & 0x0000FFFF) / 256;

						var b = blue & 0x000000ff;

						var color = "rgb("+r+","+g+","+b+")";

						o.style.backgroundColor = color;

						setTimeout(arguments.callee, 50);

					}

					else {

						o.style.backgroundColor = "white";

					}

				}

			} (tr, 0x0000FF, 0x060600);

			

			m();

		}

	}



}

attachEvent("onload" ,FadeOut);

//-->

</script>



</HEAD>

<BODY>



<table border>



	<tr><th>魚</th><th>生息地</th></tr>

	

	<tr><td>いわし</td><td>どこでも</td></tr>

	<tr><td>まぐろ</td><td>黒海</td></tr>

	<tr class="mod_color"><td>くじら</td><td><a rel="mod" />南氷洋</td></tr>

	<tr class="mod_color"><td><a rel="mod" />いるか</td><td>汽水</td></tr>

	<tr><td>あゆ</td><td>淡水</td></tr>

	<tr class="mod_color"><td>みみず</td><td><a rel="mod" />餌</td></tr>









</table>





</BODY>

</HTML>






[ メッセージ編集済み 編集者: ぴあちゃん 編集日時 2008-07-10 23:58 ]
ニッシー
常連さん
会議室デビュー日: 2008/05/21
投稿数: 28
投稿日時: 2008-07-10 16:20
びあちゃん様
ヒントありがとうございます。

現在の実力でヒントを全く理解できません。が、トライしてみます。
現在は以下のURLを参考に、変化のあった行の背景色を変える方法で凌いでみました。
http://www.microsoft.com/japan/msdn/net/aspnet/GridViewEx03.aspx

ただ、個人的にはアニメーションをあきらめきれないのでヒントの解読に励みます。
完成したら報告します。

ありがとうございました。


Access
ぬし
会議室デビュー日: 2002/04/08
投稿数: 829
投稿日時: 2008-07-11 06:29
サンプルを作成しましたのでよろしければ参考にしてください。

GridViewにフェイド効果を適用したライブデモ：
http://asp35.com/samples/080710VB-2.aspx?it=demo

サンプルの[View Code]ボタンをクリックするとソースコードが表示されます。
_________________
ASP.NET+Ajaxサンプル集 | JavaScript+Ajaxサンプル集
1|2 次のページへ»

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