Nota
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare ad accedere o modificare le directory.
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare a modificare le directory.
Il controllo DropShadow nel toolkit dei controlli AJAX estende un pannello con un'ombreggiatura. Le proprietà di questo extender possono essere modificate anche usando il codice JavaScript client.
Informazioni generali
Il controllo DropShadow nel toolkit dei controlli AJAX estende un pannello con un'ombreggiatura. Le proprietà di questo extender possono essere modificate anche usando il codice JavaScript client.
Gradi
Il codice inizia con un pannello contenente alcune righe di testo:
<asp:Panel ID="panelShadow" runat="server" CssClass="panel" Width="300px">
ASP.NET AJAX is a free framework for quickly creating a new generation of more
efficient, more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of more
efficient, more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of more
efficient, more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
</asp:Panel>
La classe CSS associata fornisce al pannello un bel colore di sfondo:
<style type="text/css">
.panel {background-color: navy;}
</style>
Viene aggiunto DropShadowExtender per estendere il pannello con un effetto ombra, impostando l'opacità al 50%.
<ajaxToolkit:DropShadowExtender ID="dse1" runat="server"
TargetControlID="panelShadow"
Opacity="0.5" Rounded="true" />
Il controllo ASP.NET AJAX ScriptManager consente quindi al toolkit di controllo di funzionare:
<asp:ScriptManager ID="asm" runat="server" />
Un altro pannello contiene due link JavaScript per impostare l'opacità dell'ombra: il link meno riduce l'opacità dell'ombra, il link più la aumenta.
<asp:Panel ID="panelControl" runat="server">
<br />
<label id="txtOpacity" runat="server">0.5</label>
<a href="#" onclick="changeOpacity(-0.1); return false;">-</a>
<a href="#" onclick="changeOpacity(+0.1); return false;">+</a>
</asp:Panel>
La funzione changeOpacity() JavaScript deve quindi prima trovare il DropShadowExtender controllo nella pagina. ASP.NET AJAX definisce il metodo $find() per questo compito.
get_Opacity() Il metodo recupera quindi l'opacità corrente, il set_Opacity() metodo lo imposta. Il codice JavaScript inserisce quindi il valore di opacità corrente nell'elemento <label> :
<script type="text/javascript">
function changeOpacity(delta)
{
var dse = $find("dse1");
var o = dse.get_Opacity();
o += delta;
o = Math.round(10 * o) / 10;
if (o <= 1.0 && o >= 0.0)
{
dse.set_Opacity(o);
$get("txtOpacity").firstChild.nodeValue = o;
}
}
</script>
L'opacità viene modificata sul lato client (fare clic per visualizzare l'immagine a dimensione intera)
