Question

我正在使用asp.net web forms构建网络应用，并且我SliderExtender TemplateField的{{1}}如下所示。

Grid View

RailCssClass和HandleCssClass的CSS

<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>

如下所示。

default slider

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

Slider - jQuery UI

我该怎么做？我应该在.SliderHandle { position: absolute; height: 22px; width: 10px; } .SliderRail { position: relative; background: url('../../Images/slider_h_rail.gif') repeat-x; height: 22px; width: 125px; }课程中更改哪些内容？

Answer 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;" />

UserControl 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; }
    }

Answer 2

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

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;

}

Answer 3

首先，您正在使用AjaxControlToolkit slider，而期望用户界面为jquery slider。如果您可以切换控件，它将解决您的问题。

否则，

把这些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;
}

Answer 4

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

.handleStyle img
{
    display:none;
}

然后使用您正在使用的任何样式进行处理，如下所示

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

ASP.NET中的SliderExtender自定义CSS

4 个答案: