1

我正在使用构建网络应用程序，asp.net web forms并且我有一个如下SliderExtender所示的。TemplateFieldGrid View

<ajaxToolkit:SliderExtender ID="SliderExtender1" runat="server" TargetControlID="txtbox_count"
    BoundControlID="txtbox_count_BoundControl" Orientation="Horizontal" EnableHandleAnimation="true"
    RailCssClass="SliderRail" HandleCssClass="SliderHandle" HandleImageUrl="~/Images/slider_h_handle.gif"
    Minimum="0" Maximum='<%# double.Parse(Eval("VEHICLE_TYPE.MAX_AMOUNT").ToString()) %>'>
</ajaxToolkit:SliderExtender>
<asp:TextBox ID="txtbox_count" Width="25" runat="server" Text='<%# Bind("VEHICLE_AVAILABILITY.EXIST_COUNT") %>'
    Style="text-align: right"></asp:TextBox>
<asp:TextBox ID="txtbox_count_BoundControl" Width="25" runat="server" Text='<%# Bind("VEHICLE_AVAILABILITY.EXIST_COUNT") %>'
    Style="text-align: right"></asp:TextBox>

RailCssClass 和 HandleCssClass 的 CSS

.SliderHandle
{
    position: absolute;
    height: 22px;
    width: 10px;
}
.SliderRail
{
    position: relative;
    background: url('../../Images/slider_h_rail.gif') repeat-x;
    height: 22px;
    width: 125px;
}

如下所示。

默认滑块

但我需要像下面这样自定义滑块。

滑块 - jQuery UI

我怎样才能做到这一点？我应该在css课堂上改变什么？

4

4 回答 4

1

在这里，我创建了示例 从http://jqueryui.com/resources/download/jquery-ui-1.10.3.zip
下载示例 包括所有必需的资源，例如从演示到您的项目中的 jquery、CSS、图像等 

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="WebForm2.aspx.cs" Inherits="TestSf.WebForm2" %>

    <%@ Register Src="SliderControl.ascx" TagName="SliderControl" TagPrefix="uc1" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
        <asp:GridView runat="server" ID="grd" AutoGenerateColumns="False">
            <Columns>
                <asp:BoundField DataField="ID" HeaderText="ID" SortExpression="ID" />
                <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
                <asp:BoundField DataField="MaxValue" HeaderText="MaxValue" SortExpression="MaxValue" />
                <asp:TemplateField HeaderText="Slider">
                    <ItemTemplate>
                        <uc1:SliderControl ID="SliderControl1" runat="server" ctrlID='<%# Eval("ID") %>'
                            Maxvalue='<%# Eval("MaxValue") %>' Value='<%# Eval("Value") %>' />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <script type="text/javascript">
         if(arr.indexOf($(this).val())>-1)
          {
                alert('This is already selected , please select other option');
                return false;
          }
        </script>
    </asp:Content>

c# 示例代码

public partial class WebForm2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

            List<TestMax> lst = new List<TestMax>();
            lst.Add(new TestMax() { ID = 1, MaxValue = 10, Value = 4, Name = "Sandeep" });
            lst.Add(new TestMax() { ID = 2, MaxValue = 12, Value = 3, Name = "Nilesh" });
            lst.Add(new TestMax() { ID = 3, MaxValue = 11, Value = 6, Name = "Jayesh" });
            grd.DataSource = lst;
            grd.DataBind();
        }
    }
    public class TestMax
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public int MaxValue { get; set; }

        public int Value { get; set; }
    }

创建一个新的 USerControl 并使用这个标记

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SliderControl.ascx.cs"
    Inherits="TestSf.SliderControl" %>
<script>
    $(function () {
        $("#slider-range-max<%= ctrlID %>").slider({ range: "max", min: 1, max: <%= Maxvalue %>,
            value: <%= Value %>, slide: function (event, ui) { $("#amount<%= ctrlID %>").val(ui.value); } 
        });
        $("#amount<%= ctrlID %>").val($("#slider-range-max<%= ctrlID %>").slider("value"));
    });
</script>
<div id="slider-range-max<%= ctrlID %>">
</div>
<input type="text" id="amount<%= ctrlID %>" style="border: 2; color: #f6931f; font-weight: bold;" />

用户控件 C# 代码

 public partial class SliderControl : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        public int ctrlID { get; set; }
        public int Maxvalue { get; set; }
        public int Value { get; set; }
    }
于 2013-07-03T09:05:31.003 回答
0

您可以使用以下属性应用样式。

RailCssClass="ajax__slider_h_rail"

HandleCssClass="ajax__slider_h_handle"

及其样式如下，您可以根据自己的要求进行编辑。

.ajax__slider_h_rail 
{
    position:relative;
    height:20px;

}
.ajax__slider_h_handle 
{

position:absolute;
    height:20px;width:10px;

}
.ajax__slider_v_rail 
{

position:relative;
    width:20px;

}
.ajax__slider_v_handle 
{

position:absolute;
    height:10px;width:20px;

}
于 2013-07-03T05:04:13.720 回答
0

首先，您正在使用AjaxControlToolkit 滑块，同时期望 UI 作为jquery 滑块。如果您可以切换控件，它将解决您的问题。

否则，

把这些 CSS 类

.ajax__slider_h_rail {
    border: 1px solid;
    border-radius: 3px 3px 3px 3px;
    height: 8px;
    position: relative;
}
.ajax__slider_h_handle {
    height: 22px;
    position: absolute;
    top: -7px !important;
    width: 10px;
}
于 2013-07-03T06:12:22.453 回答
0

首先使用以下代码停止显示默认图像

.handleStyle img
{
    display:none;
}

然后使用您用于处理的任何样式，如下所示

.handleStyle
{
    position: absolute;
    height: 22px;
    width: 22px;
    background-color:Red;
    border-radius:8px;
}

于 2016-11-22T23:27:17.863 回答