- PR -

JavaScript内のASP.NET要素に関して

投稿者投稿内容
当主
会議室デビュー日: 2006/12/10
投稿数: 16
投稿日時: 2007-10-12 15:00
お世話になります、当主です。
現在WEBアプリを作成中で、件名のことで質問があったので投稿いたします。


ユーザコントロールにMenuを配置し、項目を階層的に表示しています。
その各項目においてマウスが重なったとき、ステータスバーにMenuのSelectedValueの
値を表示したいと考えています。

MenuをDivで囲み、onmouseoverでJavaScriptを動かし、Menuの項目を取得。
それをwindow.statusに設定できればいいのですが、なかなかうまくいきません。


質問の概要は以下の2点です。
 ・JavaScript内で、ASP.NETの要素の値を使うことが可能か?またその方法
 ・Divで囲んだMenuと言う条件で、onmouseoverと同じような動きをASP.NETで実装可能か?
  (statusにはJavaScriptでしか設定できないと思い、ASP.NET側からJavaScriptの動かし方は
   自力で調べております。)


以上です。
以前の質問からの流れで、新しいスレッドに分けました。
よろしければそちらも合わせて、アドバイス等よろしくお願いいたします。
Jitta
ぬし
会議室デビュー日: 2002/07/05
投稿数: 6267
お住まい・勤務地: 兵庫県・海手
投稿日時: 2007-10-12 15:24
動的なものを抜きにして、面だけ作る
それのHTMLソースを見る

まず、それからかなぁ


ステータスは、ブラウザによって変更できないから、注意が必要かも
当主
会議室デビュー日: 2006/12/10
投稿数: 16
投稿日時: 2007-10-12 17:36
Jitta様

アドバイスありがとうございます。

function onMouse()
{
window.status = <%= Menu1.SelectedValue %>;
}
 〜略〜
<div onmouseover="onMouse()">
<asp:Menu ID="Menu1" … >
</div>

こんな感じでいろいろ試したのですが、うまくできないのです。
(サーバーサイドのASPが、JavaScriptで動かないのは当たり前とも思いますが…)

ブラウザはIE6.0固定で想定しているので、大丈夫だと思います。
Jitta
ぬし
会議室デビュー日: 2002/07/05
投稿数: 6267
お住まい・勤務地: 兵庫県・海手
投稿日時: 2007-10-13 06:52
直打ち未検証
コード:

メニューアイテムの onmouseover が、HTML で次のようになるように設定する
onmouseover="onMouse(this);"

onMouse 関数
function onMouse(menuItem)
{
window.status = menuItem.text;
}



引用:

(サーバーサイドのASPが、JavaScriptで動かないのは当たり前とも思いますが…)


そのとおりです。

引用:
ブラウザはIE6.0固定で想定しているので、大丈夫だと思います。


自動強制アップデート後は?

追加:
大丈夫とは思いますが、マウスが離れたときの処理もお忘れなく。

[ メッセージ編集済み 編集者: Jitta 編集日時 2007-10-13 06:53 ]
当主
会議室デビュー日: 2006/12/10
投稿数: 16
投稿日時: 2007-10-15 15:43
Jitta様

たびたびありがとうございます。
アドバイスの通り試してみました。

まず何も加えないソースですが、静的項目(最初から画面に表示されている項目)および
動的項目(オンマウスで表示される項目)がそれぞれテーブルで囲まれております。

静的項目の抜粋コードです。
コード:

<table id="Uc_CommonMenu_Menu1">
<tr>
<td onmouseover="Menu_HoverStatic(this)">
<table>
<tr>
<td>
<a class="Uc_CommonMenu_Menu1_1 Uc_CommonMenu_Menu1_3"
href="javascript:__doPostBack('Uc_CommonMenu$Menu1','../se/send.aspx')">配送</a>
</td>
<td>
<img src="/img/img1.jpg" alt="配送 の展開" />
</td>
</tr>
</table>
</td>
<td onmouseover="Menu_HoverStatic(this)" >
〜同じように静的項目が続く
</td>



静的項目はTD要素が連なっていますが、動的項目はTR要素が連続しています。
それぞれTDとTRにonmouseover要素があり、静的なら上記のようにMenu_HoverStatic(this)
動的ならMenu_HoverDynamic(this)という風になっておりました。


そして<asp:Menu 〜 にonmouseoverを追加すると一番外側のテーブルにonmouseoverがついていました。
(上記ソースだと一番初めの行です)

そもそも、それぞれの要素に自動生成されるonmouseoverをフックして変えることは可能なのでしょうか。
さらに可能であれば、必要な部分(ソース中の太文字)だけを抜き出し、
ステータスバーに設定することは可能なのでしょうか。


イメージ的に、何かのイベントで引数をMenuにしてサーバ側イベント発生(ASP)
(もちろんonmouseoverと同等の動き・機能のイベント)
  ↓
引数からSelectedValueを取得し、JavaScriptに送る。(ASP)
  ↓
JavaScriptでステータスバーに設定(JavaScript)
 が実現できると幸せです。
(オンマウス毎にサーバ側イベントでは重いかもしれないですが、実質それしかない気がします)


引き続きアドバイス等お待ちしております。

[ メッセージ編集済み 編集者: 当主 編集日時 2007-10-15 17:26 ]
まるく
大ベテラン
会議室デビュー日: 2004/01/09
投稿数: 181
投稿日時: 2007-10-15 17:35
サーバサイドプロパティにこだわりすぎているような。。。

JavaScript を使いこなせるようになれば、もっと幸せになれると思います。
当方もまだ修行足りませんが、とりあえず関数追加のサンプル。

コード:
<HTML>
<HEAD>
<script type="text/javascript">
function init(){
	var c = document.getElementById('txtTest');
	//return;
	if (c.onfocus) {
		var f = c.onfocus;
		c.onfocus = function(){ f(); funcAdditional(); };
	}
}
function funcAdditional(){
	alert('add');
}
</script>
</HEAD>
<BODY onload="init();">
<input type="text" id="txtTest" onfocus="alert('org');" />
</BODY>
</HTML>



どのみち動的に Menu を構成しているのであれば、無理にアンカータグの中身を取得せず(文字列解析しても良いかもしれませんが)、JavaScript のジャグ配列などに吐き出して、それを利用するようにしてはどうですか?
当主
会議室デビュー日: 2006/12/10
投稿数: 16
投稿日時: 2007-10-15 18:40
まるく様

アドバイスありがとうございます。
ぜひ幸せになりたいので、調べつつ試してみているのですがいかんせんJavaScriptは
ほとんど触れたことがなかったので大変難しいです。
thisを引数にしてデバッグしながら中身を見たのですが、項目が多すぎて把握できませんでした。

申し訳ないですが、もう少し細かく優しく教えていただけますでしょうか。

何を配列に起こし、何をどのように使うことを想定しておりますか。


それから気になる点があるのですが、以下のすべてにonmouseoverを書くと、どの要素が
一番強いでしょうか?

  • DIV
  • TABLE
  • TR
  • TD
  • A

各要素は下に行くほど中に記述してあります。
(弱い要素のonmouseoverが無視されるのであれば、より強い要素にonmouseoverを設定できるように
フックしないといけないわけですね)


[ メッセージ編集済み 編集者: 当主 編集日時 2007-10-15 18:51 ]
まるく
大ベテラン
会議室デビュー日: 2004/01/09
投稿数: 181
投稿日時: 2007-10-16 11:28
引用:

申し訳ないですが、もう少し細かく優しく教えていただけますでしょうか。


んー、JavaScript の説明する訳にもいかず。頑張って習得してください。
あるいは Ajax でなんとかなったりしないですかね。。。

引用:

何を配列に起こし、何をどのように使うことを想定しておりますか。


当主さんの書き込みの HTML を元に組んでみたけど(末尾にサンプルを記載)、アンカータグからとった方がよかったかもです。。。やろうとしている事は以下。

 1.onmouseover の出現順に合致するように
  url 配列を書き出す(サンプルでは固定Index使用)
 2.onmouseover からメソッドを呼び出す
 3.2.で呼ばれたメソッドは引数を元に url をステータスバーに表示

引用:

それから気になる点があるのですが、以下のすべてにonmouseoverを書くと、どの要素が
一番強いでしょうか?


「イベントバブル」でググってみてください。





コード:
<HTML>
<HEAD>
<script type="text/javascript">
//メニューurl配列定義
var _menu = [ ["a.aspx", "b.aspx", "c.aspx"], ["d.aspx", "e.aspx"] ];
//ステータスバーへの表示
function showStatus(menuIndex, subMenuIndex){
	window.status = _menu[menuIndex][subMenuIndex];
}
//showStatusメソッドを追加
function appendShowStatus(id){
	//table要素を取得
	var p = document.getElementById(id);
	//table内のtdタグを取得
	var tds = p.getElementsByTagName('td');
	for (c in tds){
		var td = tds[c];
		if (td && td.onmouseover) {
			//tdタグとして有効かつ、
			//onmouseoverイベントが指定されている時
			var f = td.onmouseover;
			td.onmouseover = function(){ f(); eval("showStatus(0, 1);"); };
		}
	}
}
//テスト用のダミー
function Menu_HoverStatic(v){
}
//初期処理
function init(){
	appendShowStatus("Uc_CommonMenu_Menu1");
}
</script>
</HEAD>
<BODY onload="init();">
<table id="Uc_CommonMenu_Menu1">
  <tr>
    <td onmouseover="Menu_HoverStatic(this);">
      <table>
        <tr>
          <td>
            <a class="Uc_CommonMenu_Menu1_1 Uc_CommonMenu_Menu1_3"
href="javascript:__doPostBack('Uc_CommonMenu$Menu1','../se/send.aspx')">配送</a>
          </td>
          <td>
            <img src="/img/img1.jpg" alt="配送 の展開" />
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</BODY>
</HTML>

スキルアップ/キャリアアップ(JOB@IT)