自定义CSS来SliderExtender在ASP.NET [英] Custom CSS to SliderExtender in ASP.NET

问题描述

我用 asp.net web表单构建Web应用程序和我有一个 SliderExtender 在模板列 网​​格视图如下图所示。

I'm building web app using asp.net web forms and i have a SliderExtender in a TemplateField of a Grid View as below.

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

这看起来像下面。

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

But i need to customize slider like below.

我怎样才能做到这一点？什么是改变我应该在 CSS 类呢？

How can i do this ? what are the changes should i do in my css class ?

推荐答案

下面我创建的例子

从 http://jqueryui.com/resources/download/jquery-下载样本ui-1.10.3.zip


包括像jQuery，CSS，图像等来自试玩所有资源练琴到项目

Here I have created example
Download sample from http://jqueryui.com/resources/download/jquery-ui-1.10.3.zip
include all necessory resource like jquery, CSS, images etc from demo into your project

<%@ 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＃示例code

c# Sample code

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

创建一个新的用户控件，并使用此标记

Create a new USerControl and use this markup

<%@ 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＃code

UserControl C# code

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

这篇关于自定义CSS来SliderExtender在ASP.NET的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！