- PR -

SliderExtenderについて

1
投稿者投稿内容
ボルビ
ベテラン
会議室デビュー日: 2007/05/23
投稿数: 52
投稿日時: 2007-09-25 20:56
いつもお世話になっています。

環境：Visual Studio2005
ASP.NET C#
　　　AjaxControlToolkit-Release Date 2007/9/20

SliderExtenderについて質問です。

Sliderボタンを選択した時にJavaScriptを実行させてラベルを表示し、
ボタンを離したときにラベルを非表示にする処理を考えているんですが、

現状、TextBoxにonDragStartでラベルを表示、onchangeでラベルを非表示と
処理を作ってみたんですが、なぜかonDragStartが実行されなくてラベルを
表示することができません。

このやり方自体が間違っているのか、それともSliderBehavior.jsを
変更しないと実現できないのか？

分かる方いましたらご教授御願い致します。

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<script type="text/javascript">

function dragstart(){
setVisibility("visible");
}

function setVisibility(str)
{
var divTooltip = document.getElementById("tooltip");
if(divTooltip != null)
divTooltip.style.visibility = str;
}

function pageChanged()
{
setTooltipVisibility("hidden");
return false;
}

</script>

</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager2" runat="server" EnableScriptGlobalization="true" EnableScriptLocalization="true">
</asp:ScriptManager>

<br />
<div id="tooltip" runat="server" style="visibility: hidden;">
<asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>
</div>
<asp:TextBox ID="txtSlider" runat="server" Width="180px" onDragStart="dragstart()" onchange="pageChanged()" AutoPostBack="true" Text="0"></asp:TextBox>

<ajaxToolkit:SliderExtender ID="pageSlider" runat="server" TargetControlID="txtSlider"
　　　　　　　BoundControlID="Label4" Maximum="100" Minimum="1" BehaviorID="pageSlider">
</ajaxToolkit:SliderExtender>
</div>
</form>
</body>
</html>
かるあ
ぬし
会議室デビュー日: 2003/11/16
投稿数: 1190
お住まい・勤務地: センガワ→ムサシノ
投稿日時: 2007-09-26 00:13
引用:

ボルビさんの書き込み (2007-09-25 20:56) より:

コード:

        <asp:TextBox ID="txtSlider" runat="server" Width="180px" onDragStart="dragstart()" onchange="pageChanged()" AutoPostBack="true" Text="0"></asp:TextBox>


これではテキストボックスのサーバ側のイベントとして登録されてしまいます。
Extender に対してのイベントは Javascript で記述してあげる必要があります。
＃たぶんそのうち XML で定義できるようになる

こんな感じで Extender のインスタンスを取得して、イベントの定義をしてあげる。
コード:

        var slider = $find("pageSlider");

        slider.add_slideStart(function() { 

          var boundControl = $get(slider.get_BoundControlID());

          boundControl.style.display = "block"; 

        });

        

        slider.add_slideEnd(function() {

          var boundControl = $get(slider.get_BoundControlID());

          boundControl.style.display = "none"; 

        });


どんなイベントを Extender が持っているかはドキュメント化されていないので、ソースを読むか、AjaxClassBrowser などを使って調べる必要があります。
http://ajaxclassbrowser.utils.drundo.net/
_________________
かるあ のメモ
http://karua.at.webry.info/

[ メッセージ編集済み 編集者: かるあ 編集日時 2007-09-26 00:17 ]
ボルビ
ベテラン
会議室デビュー日: 2007/05/23
投稿数: 52
投稿日時: 2007-09-26 10:35
回答有難うございます。

Scriptの記述が間違っていたので訂正します。
コード:
     function pageChanged()
     {
        setVisibility("hidden");
        return false;
     }


引用:

かるあさんの書き込み (2007-09-26 00:13) より:
こんな感じで Extender のインスタンスを取得して、イベントの定義をしてあげる。
コード:
　　　　function slideStart(){←追加
         var slider = $find("pageSlider");
         slider.add_slideStart(function() { 
           var boundControl = $get(slider.get_BoundControlID());
           boundControl.style.display = "block"; 
         });
        }
        
        function slideEnd(){←追加
　　　　 var slider = $find("pageSlider");
         slider.add_slideEnd(function() {
           var boundControl = $get(slider.get_BoundControlID());
           boundControl.style.display = "none"; 
         });
        }


上記のようにslideStartとslideEndの関数を作成して
呼び出すということであっていますか？
add_slideEndの方はonchange実行時に呼ぶとして、
add_slideStartの方がどのイベントを使って呼び出せばいいのかが分かりません。
スライダーをクリックしたというイベントはどうやって取得すればいいのでしょうか？

宜しく御願い致します。
かるあ
ぬし
会議室デビュー日: 2003/11/16
投稿数: 1190
お住まい・勤務地: センガワ→ムサシノ
投稿日時: 2007-09-26 12:46
引用:

ボルビさんの書き込み (2007-09-26 10:35) より:

上記のようにslideStartとslideEndの関数を作成して
呼び出すということであっていますか？

違います。
ページのロード時に slideStart と slideEnd のイベントハンドラを登録します。
登録するのは クライアントの pageLoad か Sys.Application.load 時かな。（未検証）
http://asp.net/AJAX/Documentation/Live/ClientReference/Sys/ApplicationClass/SysApplicationLoadEvent.aspx

引用:

add_slideEndの方はonchange実行時に呼ぶとして、
add_slideStartの方がどのイベントを使って呼び出せばいいのかが分かりません。
スライダーをクリックしたというイベントはどうやって取得すればいいのでしょうか？

なので、 onchange 時に呼ばれるのではなく、slider をつまんだ時に slideStart で登録した function() が呼ばれるし、話したときに slideEnd に登録した function() が呼ばれます。

_________________
かるあ のメモ と スニペット
かるあ
ぬし
会議室デビュー日: 2003/11/16
投稿数: 1190
お住まい・勤務地: センガワ→ムサシノ
投稿日時: 2007-09-26 13:02
こんな感じか pageLoad() として定義
コード:
function pageLoad() {
  var slider = $find("pageSlider");
  slider.add_slideStart(function() { 
    var boundControl = $get(slider.get_BoundControlID());
    boundControl.style.display = "block"; 
  });
  
  slider.add_slideEnd(function() {
    var boundControl = $get(slider.get_BoundControlID());
    boundControl.style.display = "none"; 
  });
}


Sys.Application.load に登録 ScriptManager より後で定義しないとスクリプトエラーになります。まぁ Script.RegisterStartupScript で書き出せば大丈夫か。
コード:
Sys.Application.add_load(function() {
  var slider = $find("pageSlider");
  slider.add_slideStart(function() { 
    var boundControl = $get(slider.get_BoundControlID());
    boundControl.style.display = "block"; 
  });
  
  slider.add_slideEnd(function() {
    var boundControl = $get(slider.get_BoundControlID());
    boundControl.style.display = "none"; 
  });
});

_________________
かるあ のメモ と スニペット
ボルビ
ベテラン
会議室デビュー日: 2007/05/23
投稿数: 52
投稿日時: 2007-09-26 13:51
Sys.Application.loadで試してみて思ったとおりの動きになりました。
こういうやり方があるんですね〜勉強になります。
Script.RegisterStartupScriptでの書き出しかたは
やった事がないのでちょっと調べて試してみます。

詳しく書いて頂いて有難うございました。


1

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