0

私はこれを数日間理解しようとしてきたので、ここに行きます：

プログラムで複数の Web コントロールを for ループで作成するマスター カスタム コントロール (Web コントロール) があり、それぞれに jquery スライダーが含まれています。スライダーのdiv IDを変更する変数を含めて、コードビハインドからjavascript文字列を使用してスライダーを作成しようとしました。これにより、一意になり、他のスライダーと競合しなくなります。私が抱えている問題は、webcontrols が作成されても、最初の jquery スライダー (最初のコントロール内) のみが作成されることです。

そう：

主制御装置

    protected void Page_Load(object sender, EventArgs e)
    {
       //create the custom web control with sliders in each
        for (int a = 0; a < 9; a++)
        {
            CustomControl sliderControl = (CustomControl)LoadControl("CustomControl.ascx");
            sliderControl.SliderID = a;
            sliderControl.ID = "sliderControl_" + a;
            sliderControl.ClientIDMode = System.Web.UI.ClientIDMode.Static;
            thismaincontainerdiv.Controls.Add(sliderControl);

        }
    }

SliderControl - 最初はここでスライダーを作成していましたが、他のスライダー コントロール ID と競合する可能性があります。

    <script>

$(function () {
    $("#slider").slider({
        value: 1,
        min: 1,
        max: 10,
        step: 1,
        slide: function (event, ui) {
            $("#amount").val("$" + ui.value);

        }
    });
    $("#amount").val("$" + $("#slider").slider("value"));

});

    </script>

    <div id="slidercontainer" runat="server" style="width:100%; height:87px; background-color:lightgray">

<div id="sliderdescription" runat="server" style="width:100%; height:60px;">

    <div id="startblockdesc" runat="server" style="width:30px; height:100%; float:left"></div>

    <div id="descdiv" runat="server" style="position:relative; top:25px">
    <asp:Label ID="lbdescription" runat="server" style="width:100%; height:32px; font-size:20px; font-family:Helvetica" Text="Description"  ></asp:Label>
    </div>

</div>

<div id="sliderdiv" runat="server" style="width:100%; height:27px;">

    <div id="startblockslider" runat="server" style="width:40px; height:100%; float:left"></div>
    <div id="slider"></div>

</div>

次に、スライダーコントロールに上記を使用しないことで、これに進みます。Javascript を使用すると、スライダーに使用される div の ID を変更できます。

        protected void Page_Load(object sender, EventArgs e)
    {
        string stringSliderID = "slider_" + this.SliderID;

        string JavaScriptString = @"

              var sliderID = <SliderID>;

              var slider = document.getElementById('slider');
              slider.id = 'slider_' + sliderID;

              $(function () {
                  $('#slider_' + sliderID).slider({
                      value: 1,
                      min: 1,
                      max: 10,
                      step: 1,
                      slide: function (event, ui) {
                          $('#amount').val('$' + ui.value);

                      }
                  });
                  $('#amount').val('$' + $('#slider_' + sliderID).slider('value'));
              }); 


          ";

        System.Web.UI.ScriptManager.RegisterStartupScript(this, this.GetType(), "Slider", JavaScriptString.Replace("<SliderID>", this.SliderID.ToString()), true);         
    }

どんな助けでも大歓迎です。

これはより明確ですか？そのリンクを見ていきます。コメントありがとうございます。

ありがとう。

4

1 に答える 1

0

解決したリンクへ

これは、jquery を使用して 1 つのページに複数のスライダーをプログラムで作成する方法に関する私の質問に答えました。ただし、個々の Web コントロールに個々のスライダーを作成することはできませんでした。しかし、物事の壮大な計画には、有効な解決策があります。どうもありがとう。

于 2013-07-25T10:13:23.323 に答える