Fogli di stile per l'AJAX Control Toolkit
L'AJAX Toolkit Controlli ToolKit fornisce esempi di utilizzo di tutti i controlli che contiene. Per funzionare correttamente, spesso questi esempi necessitano della definizione di particolari stili in un file CSS. Ad esempio, nel caso dei controlli AutoComplete e ModalPopup, si devono indicare gli stili da utilizzare, rispettivamente, per la lista con gli elementi suggeriti e per fare in modo che la finestra visualizzata sia a tutti gli effetti "modale", ovvero lo sfondo appaia in grigio e non sia selezionabile fino a quando essa non viene chiusa. Nella pagina degli esempi, tuttavia, non è indicato come impostare questi stili: per poterli visualizzare, è necessario scaricare il sorgente dell'AJAX Control Toolkit e andare a ricercarli manualmente.
Per evitare il download dell'intero pacchetto al solo scopo di recuperare questi stili, riporto di seguito la definizione del CSS per l'AutoComplete:
/*AutoComplete flyout */
.autocomplete_completionListElement
{
visibility : hidden;
margin : 0px!important;
background-color : inherit;
color : windowtext;
border : buttonshadow;
border-width : 1px;
border-style : solid;
cursor : 'default';
overflow : auto;
height : 200px;
text-align : left;
list-style-type : none;
}
/* AutoComplete highlighted item */
.autocomplete_highlightedListItem
{
background-color: #ffff99;
color: black;
padding: 1px;
}
/* AutoComplete item */
.autocomplete_listItem
{
background-color : window;
color : windowtext;
padding : 1px;
}
Mentre il seguente è relativo al ModalPopup:
/*Modal Background */
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
/*Modal Popup */
.modalPopup {
background-color:#ffffdd;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}
Questi solo gli stili esattamente come sono definiti nel toolkit, quindi con essi è possibile ottenere gli stessi effetti mostrati nelle pagine di esempio.