Sdílet prostřednictvím

Použití rozšíření ovládacího prvku ColorPicker (VB)

od Microsoftu

ColorPicker je rozšíření ASP.NET AJAX, které poskytuje funkci výběru barev na straně klienta s uživatelským rozhraním v ovládacím prvku automaticky otevíraných oken. Dá se připojit k libovolnému ovládacímu prvku TextBox ASP.NET. Je to.

Cílem tohoto kurzu je vysvětlit, jak můžete použít rozšiřující ovládací prvek ColorPicker sady nástrojů AJAX Control Toolkit. Rozšíření ovládacího prvku ColorPicker zobrazí automaticky otevírané dialogové okno, které umožňuje vybrat barvu. ColorPicker je užitečný, kdykoli chcete uživateli poskytnout intuitivní uživatelské rozhraní pro výběr barvy.

Rozšíření ovládacího prvku TextBox pomocí rozšíření ovládacího prvku ColorPicker

Představte si například, že chcete vytvořit web, který návštěvníkům umožní vytvářet přizpůsobené vizitky. Návštěvníci můžou zadat text vizitky a vybrat barvu. Stránka ASP.NET v seznamu 1 obsahuje dva ovládací prvky TextBox s názvem txtCardText a txtCardColor. Při odeslání formuláře se zobrazí vybrané hodnoty (viz obrázek 1).

Jednoduchý formulář pro vytvoření vizitky

Obrázek 01: Jednoduchý formulář pro vytvoření vizitky (kliknutím zobrazíte obrázek v plné velikosti)

Výpis 1 – CreateCard.aspx

<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        ' Show the panel
        pnlResults.Visible = true
        
        ' Show the selected values
        lblSelectedText.Text = txtCardText.Text             
        lblSelectedColor.Text = txtCardColor.Text
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <h1>Create a Business Card</h1>
    
        <asp:Label 
            ID="lblCardText" 
            Text="Card Text"
            AssociatedControlID="txtCardText"
            runat="server" />
        <br />
        <asp:TextBox
            ID="txtCardText"
            Runat="server" />
            
        <br /><br />    
    
        <asp:Label 
            ID="lblCardColor" 
            Text="Card Color"
            AssociatedControlID="txtCardColor"
            runat="server" />
        <br />
        <asp:TextBox
            ID="txtCardColor"
            Runat="server" />
            
        <br /><br />
        
        <asp:Button
            ID="btnSubmit"
            Text="Submit"
            Runat="server" OnClick="btnSubmit_Click" />

        <asp:Panel ID="pnlResults" Visible="false" runat="server">
 
            <h2>Your Selection</h2>

            Selected Card Text:
            <asp:Label
                ID="lblSelectedText"
                Runat="server" />
            <br />        
            Selected Card Color:
            <asp:Label
                ID="lblSelectedColor"
                Runat="server" />
        
        </asp:Panel>
    
    </div>
    </form>
</body>
</html>

Formulář v seznamu 1 funguje, ale neposkytuje skvělé uživatelské prostředí. Uživatel musí do textového pole zadat barvu. Pokud chce uživatel speciální barvu – například správný odstín hrášku zelené – musí bez pomoci zjistit kód barvy HTML.

Pomocí rozšiřujícího ovládacího prvku ColorPicker můžete vytvořit lepší uživatelské prostředí. ColorPicker zobrazí při přesunutí fokusu na ovládací prvek TextBox dialogové okno barvy (viz Obrázek 2).

Rozšíření ovládacího prvku ColorPicker

Obrázek 02: Rozšíření ovládacího prvku ColorPicker (kliknutím zobrazíte obrázek v plné velikosti)

Pokud chcete použít rozšiřující ovládací prvek ColorPicker s formulářem ve výpisu 1, musíte provést dva kroky:

  1. Přidání ovládacího prvku ScriptManager na stránku
  2. Přidání rozšiřujícího ovládacího prvku ColorPicker na stránku

Než budete moct použít ColorPicker, musíte na stránku přidat ScriptManager. Vhodné místo pro přidání ScriptManageru je přímo pod počáteční značkou formuláře> na straně <serveru. ScriptManager můžete přetáhnout na stránku z panelu nástrojů (scriptManager se nachází na kartě Rozšíření AJAX). Případně můžete do zobrazení zdroje pod počáteční značku formuláře na straně serveru zadat následující značku:

<asp:ScriptManager ID="ScriptManager1" runat="server" />

Nejjednodušší způsob, jak přidat rozšiřující ovládací prvek ColorPicker na stránku, je v návrhovém zobrazení. Pokud najedete myší na textové pole txtCardColor, zobrazí se možnost inteligentní úlohy, která vám umožní přidat extender (viz Obrázek 3). Pokud vyberete tuto možnost, zobrazí se Průvodce rozšířením (viz Obrázek 4).

Přidání extenderu

Obrázek 03: Přidání extenderu (kliknutím zobrazíte obrázek v plné velikosti)

Výběr rozšiřujícího ovládacího prvku pomocí Průvodce rozšířením

Obrázek 04: Výběr rozšiřujícího ovládacího prvku pomocí Průvodce extenderem (kliknutím zobrazíte obrázek v plné velikosti)

Pokud chcete rozšířit textové pole txtCardColor pomocí extenderu ColorPicker, můžete vybrat rozšíření ColorPicker. Kliknutím na OK dialogové okno zavřete.

Po provedení těchto změn bude zdroj stránky vypadat jako Výpis 2.

Výpis 2 – CreateCard.aspx (s ColorPickerem)

<%@ Page Language="VB" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        ' Show the panel
        pnlResults.Visible = true
        
        ' Show the selected values
        lblSelectedText.Text = txtCardText.Text            
        lblSelectedColor.Text = txtCardColor.Text
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        
        <h1>Create a Business Card</h1>
    
        <asp:Label 
            ID="lblCardText" 
            Text="Card Text"
            AssociatedControlID="txtCardText"
            runat="server" />
        <br />
        <asp:TextBox
            ID="txtCardText"
            Runat="server" />
        
        <br /><br />    
    
        <asp:Label 
            ID="lblCardColor" 
            Text="Card Color"
            AssociatedControlID="txtCardColor"
            runat="server" />
        <br />
        <asp:TextBox
            ID="txtCardColor"
            AutoCompleteType="None"
            Runat="server" />
            
        <cc1:ColorPickerExtender 
            ID="txtCardColor_ColorPickerExtender"  
            TargetControlID="txtCardColor"            
            Enabled="True" 
            runat="server">
        </cc1:ColorPickerExtender>
            
        <br /><br />
        
        <asp:Button
            ID="btnSubmit"
            Text="Submit"
            Runat="server" OnClick="btnSubmit_Click" />

        <asp:Panel ID="pnlResults" Visible="false" runat="server">
 
            <h2>Your Selection</h2>

            Selected Card Text:
            <asp:Label
                ID="lblSelectedText"
                Runat="server" />
            <br />        
            Selected Card Color:
            <asp:Label
                ID="lblSelectedColor"
                Runat="server" />
        
        </asp:Panel>
    
    </div>
    </form>
</body>
</html>

Všimněte si, že stránka nyní obsahuje ColorPickerExtender ovládací prvek, který se zobrazí přímo pod txtCardColor TextBox ovládací prvek. ColorPickerExtender ovládací prvek rozšiřuje txtCardColor ovládací prvek tak, aby se zobrazil dialog pro výběr barvy.

Spuštění dialogového okna Výběr barvy pomocí tlačítka

Rozšíření ColorPicker podporuje následující vlastnosti:

  • PopupButtonId – ID tlačítka na stránce, které způsobuje, že se zobrazí dialogové okno pro výběr barvy.
  • PopupPosition – pozice dialogového okna pro výběr barvy vzhledem k cílovému ovládacímu prvku. Možné hodnoty jsou Absolutní, Střed, BottomLeft, BottomRight, TopLeft, TopRight, Right a Left (výchozí hodnota je BottomLeft).
  • SampleControlId – ID ovládacího prvku, který zobrazuje vybranou barvu.
  • SelectedColor – počáteční barva vybraná nástrojem ColorPicker.

Pomocí těchto vlastností můžete přizpůsobit zobrazení dialogového okna pro výběr barvy a zobrazení vybrané barvy. Na stránce výpisu 3 je znázorněno, jak můžete použít několik z těchto vlastností.

Výpis 3 – CreateCardButton.aspx

<%@ Page Language="VB" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        ' Show the panel
        pnlResults.Visible = true
        
        ' Show the selected values
        lblSelectedText.Text = txtCardText.Text             
        lblSelectedColor.Text = txtCardColor.Text
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        
        <h1>Create a Business Card</h1>
    
        <asp:Label 
            ID="lblCardText" 
            Text="Card Text"
            AssociatedControlID="txtCardText"
            runat="server" />
        <br />
        <asp:TextBox
            ID="txtCardText"
            Runat="server" />
            
        <br /><br />    
    
        <asp:Label 
            ID="lblCardColor" 
            Text="Card Color"
            AssociatedControlID="txtCardColor"
            runat="server" />
        <br />
        <asp:TextBox
            ID="txtCardColor"
            AutoCompleteType="None"
            Runat="server" />
        <asp:Button
            ID="btnPickColor"
            Text="Pick Color"
            Runat="server" />
        <asp:Label
            ID="lblSample"
            Runat="Server"> Sample </asp:Label>        
        <cc1:ColorPickerExtender 
            ID="txtCardColor_ColorPickerExtender"  
            TargetControlID="txtCardColor"
            PopupButtonID="btnPickColor"
            PopupPosition="TopRight"
            SampleControlID="lblSample"            
            Enabled="True" 
            runat="server">
        </cc1:ColorPickerExtender>
            
        <br /><br />
        
        <asp:Button
            ID="btnSubmit"
            Text="Submit"
            Runat="server" OnClick="btnSubmit_Click" />

        <asp:Panel ID="pnlResults" Visible="false" runat="server">
 
            <h2>Your Selection</h2>

            Selected Card Text:
            <asp:Label
                ID="lblSelectedText"
                Runat="server" />
            <br />        
            Selected Card Color:
            <asp:Label
                ID="lblSelectedColor"
                Runat="server" />
        
        </asp:Panel>
    
    </div>
    </form>
</body>
</html>

Stránka v seznamu 3 obsahuje tlačítko Vybrat barvu (viz Obrázek 5). Po kliknutí na toto tlačítko se nad textovým polem zobrazí dialogové okno pro výběr barvy. Pokud vyberete barvu z dialogového okna, vybraná barva se zobrazí jako barva pozadí ovládacího prvku lblSample Popisek.

Vlastnost ColorPicker PopupButtonID slouží k přidružení tlačítka Vybrat barvu k extenderu ColorPicker. Když zadáte hodnotu vlastnosti PopupButtonID, dialogové okno pro výběr barvy se již nezobrazí, pokud je fokus na cílovém ovládacím prvku. Kliknutím na tlačítko zobrazíte dialogové okno.

Vlastnost SampleControlID se používá k přidružení ovládacího prvku, který zobrazuje vybranou barvu s ColorPicker. ColorPicker změní barvu pozadí tohoto ovládacího prvku na aktuálně vybranou barvu.

Zobrazení dialogového okna pro výběr barvy pomocí tlačítka

Obrázek 05: Zobrazení dialogového okna pro výběr barvy pomocí tlačítka (kliknutím zobrazíte obrázek v plné velikosti)

Souhrn

V tomto kurzu jste se naučili používat rozšiřující ovládací prvek ColorPicker k zobrazení dialogového okna pro výběr barvy automaticky otevírané obrazovky. Nejprve jsme prozkoumali, jak můžete zobrazit dialogové okno při přesunutí fokusu na ovládací prvek TextBox. Dále jste zjistili, jak vytvořit tlačítko, které při kliknutí na tlačítko zobrazí dialogové okno pro výběr barvy.

Předchozí

  • Last updated on