0

这几天我一直在尝试解决这个问题，所以这里是：

我有一个主自定义控件（Web 控件），它以编程方式在 for 循环中创建多个 Web 控件，每个控件都包含一个 jquery 滑块。我尝试从后面的代码中使用 javascript 字符串创建滑块，方法是包含一个变量来更改滑块 div id，以便它是唯一的并且不与其他滑块冲突。我遇到的问题是，虽然创建了 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

To link that resolved

This answered my question on how to create multiple sliders programmatically, on one page through jquery. However, I was unable to create an individual slider in a individual web control. But in the grand scheme of things there is a working solution. Many thanks.

于 2013-07-25T10:13:23.323 回答