0

テキスト ボックスに Ajax Slider Extender があり、スタイル シートを使用してレールの色を緑色に変更しています。これがスライダーの私のコードです...

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
<div>
    <asp:TextBox ID="SliderID" runat="server"></asp:TextBox>
    <asp:SliderExtender ID="SliderExtender1" runat="server" 
        TargetControlID="SliderID" 
        BehaviorID="BoundControl" 
        Minimum="0" 
        Maximum="100" 
        RailCssClass="SliderRail" 
        Orientation="Horizontal"
        EnableHandleAnimation="true" 
        Steps="100">
    </asp:SliderExtender>
</div>

ここに私のCSSがあります...

.SliderRail {
position: relative;
height: 18px;
width: 100%; 
background-color:green;

}

ハンドルに画像を追加する方法は知っていますが、把握しようとしているのは、ハンドルをステップ 0 からステップ 50 に移動するときに、これらのステップを濃い灰色でマスクする必要があり、実際にはできないことです。それを理解してください。

ハンドルに画像を追加して、幅を 100% に設定しようとしましたが、まったくうまくいきませんでした。

私の最終的な結果は、この問題を理解し、どちらかの端に両方のハンドルがある場合にマルチハンドルエクステンダーを使用してこれを複製しようとすることです。次に、ハンドルが相互に実行できることを確認する必要があります...しかし、それは私がしなければならない最終結果です。私は JQuery や JavaScript を使用したくありません。厳密に css を維持したいだけです。マルチハンドルの使用に関するドキュメントはあまりありません。

この質問が 100 万回も聞かれている場合は、申し訳ありませんが、これを行う方法を教えてくれるものが何も見つからないため、間違った検索用語を使用していたに違いありません。

すべての助けに感謝します

4

1 に答える 1

1

http://dotnetslackers.com/Ajax/re-70082_SliderExtender_layout_and_custom_appearance.aspx

カスタムの外観 スライダーの外観をカスタマイズするには、次のことを行う必要があります。

レールに CSS クラスを提供する ハンドルに CSS クラスを提供する ハンドルの画像の画像 URL を提供します。実行する手順:

  1. スライダーのレールの CSS クラスを作成します。CSS クラスには、次の属性が含まれている必要があります。

position 属性は relative に設定する必要があります。高さと幅の属性のデフォルト値を指定する必要があります。幅の値は、SliderExtender の Length プロパティでオーバーライドできます。レールの背景画像を埋め込むには、background 属性を使用します。2. スライダーのハンドルの CSS クラスを作成します。CSS クラスには、次の属性が含まれている必要があります。

位置属性は絶対に設定する必要があります。高さと幅の属性の値を指定する必要があります。3. スライダーのハンドルの画像を提供します。画像の高さと幅のサイズは、ハンドルの CSS クラスで指定された高さと幅の値と等しくなければなりません。

  1. SliderExtender インスタンスの RailCssClass プロパティをレール CSS クラスの名前に設定します。

  2. SliderExtender インスタンスの HandleCssClass プロパティをハンドル CSS クラスの名前に設定します。

  3. SliderExtender インスタンスの HandleImageUrl プロパティをハンドルの画像の URL に設定します。

于 2014-10-08T20:47:44.843 に答える