Pannello Risultati ricerca

Ultimo aggiornamento: 2023-11-03
  • Argomenti:
  • Dynamic Media Classic
    Visualizza ulteriori informazioni su questo argomento
  • Viewers
    Visualizza ulteriori informazioni su questo argomento
  • SDK/API
    Visualizza ulteriori informazioni su questo argomento
  • eCatalog Search
    Visualizza ulteriori informazioni su questo argomento
  • Creato per:
  • Developer
    User

Il pannello dei risultati della ricerca è costituito dalla casella di immissione della ricerca nella parte superiore e dall’area principale in cui vengono visualizzati messaggi informativi o risultati della ricerca.

Proprietà CSS dell'area visualizzatore principale

Quando il pannello è attivo, l’interfaccia utente del visualizzatore è coperta da un riempimento semitrasparente. Il colore e l'opacità di questo riempimento sono controllati con il seguente selettore di classe CSS:

.s7ecatalogviewer .s7searchpanel .s7backoverlay

Proprietà CSS

Descrizione

background-color

Colore della sovrapposizione.

opacità

Opacità del colore.

Il pannello dei risultati di ricerca occupa sempre tutta l’altezza del visualizzatore disponibile. Tuttavia, è possibile configurare la larghezza. È possibile impostare la larghezza su un valore in pixel assoluto, impostazione predefinita per i punti di interruzione di dimensioni medie e grandi. In alternativa, potete impostare la larghezza su 100% per far sì che il pannello dei risultati di ricerca occupi l'intera area del visualizzatore. La larghezza del pannello è controllata dal seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7searchpanel .s7searchresultspace

Proprietà CSS dello spazio dei risultati della ricerca

width

Larghezza dello spazio dei risultati della ricerca.

Esempio: per impostare un pannello dei risultati di ricerca di 250 pixel su punti di interruzione di dimensioni medie e grandi e utilizzare un pannello di dimensioni intere su un punto di interruzione di dimensioni ridotte:

.s7ecatalogsearchviewer.s7size_large .s7searchpanel .s7searchresultspanel, .s7ecatalogsearchviewer.s7size_medium .s7searchpanel .s7searchresultspanel {
 width:250px;
}
.s7ecatalogsearchviewer.s7size_small .s7searchpanel .s7searchresultspanel {
 width:100%;
}

La parte superiore del pannello dei risultati di ricerca è dedicata alla casella di input della ricerca. La spaziatura ai lati della casella di input è controllata dal seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinputcontainer

Proprietà CSS del contenitore di input per la ricerca

riempimento

Spaziatura attorno alla casella di input.

Il campo di input della ricerca è controllato dal seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinput

Proprietà CSS del campo di input della ricerca

height

Altezza del campo di input della ricerca.

padding-left

Spaziatura interna tra i limiti del campo di input e il testo di input.

bordo

Bordo del campo di input della ricerca.

margine

Margine del campo di input della ricerca

font-size

Dimensione del carattere del testo.

Esempio: per impostare un campo di input di ricerca con un’altezza di 0 pixel e un font di testo di 14 pixel:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinput {
 padding-left:5px;
 height:30px;
 font-size:14px;
}

Per impostazione predefinita, il pulsante di ricerca a sinistra del campo di input della ricerca sotto forma di "vetro trasparente" è controllato dal seguente selettore di classe CSS:

 .s7ecatalogsearchviewer .s7searchpanel .s7searchinputbutton

Proprietà CSS del pulsante Cerca input

width

Larghezza del pulsante di input per la ricerca.

height

Altezza del pulsante di input per la ricerca.

background-image

L’URL dell’immagine dell’icona "specchio".

background-size

Dimensione dell'icona "specchio".

bordo

Bordo del pulsante di input della ricerca.

margine

Margine del pulsante di input per la ricerca.

Esempio: per impostare un pulsante di ricerca con un'icona "vetro" di 26 x 26 pixel; dimensioni di 30 pixel con un bordo di 1 pixel:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinputbutton {
 width:30px;
 height:30px;
 background-size:26px 26px;
 background-image: url(images/v2/Search_form_field.png);
 font-size:14px;
 border: 1px solid #696969;
}

Il pannello dei risultati della ricerca potrebbe visualizzare un prompt testuale al momento della prima chiamata della funzione. Inoltre, mostra un messaggio quando la ricerca di un utente non ha restituito alcun risultato. In tutti i casi, il testo viene visualizzato nella parte principale del pannello dei risultati di ricerca ed è controllato dal seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinfo

Proprietà CSS delle informazioni di ricerca

color

Colore del testo.

font-family

Nome del carattere del testo.

font-align

Allineamento orizzontale del testo.

font-size

Dimensione del testo del carattere.

NOTA

Questo pannello di testo supporta state selettore di attributi, che può essere utilizzato per applicare stili diversi a messaggi di testo diversi. In particolare: state='prompt' corrisponde al prompt di testo visualizzato quando si chiama il pannello per la prima volta. Il state='results' corrisponde al testo con informazioni sugli hit di ricerca. E infine, state='no_results' corrisponde al testo visualizzato quando la query di ricerca non ha restituito alcun risultato.

Il testo del messaggio può essere localizzato. Consulta Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.

Esempio: per impostare un pannello di testo che utilizza un font grigio da 18 pixel:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinfo {
 font-size: 18px;
 color: #696969;
}

I risultati della ricerca vengono visualizzati come una singola colonna o riga di miniature per le pagine con risultati di ricerca. La spaziatura tra le miniature dei risultati di ricerca è controllata con il seguente selettore di classe CSS:

.ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell

Proprietà CSS delle celle delle miniature

margine

Dimensione del margine verticale intorno a ciascuna miniatura. La spaziatura effettiva delle miniature è uguale alla somma dei margini superiore e inferiore impostati per .s7thumbcell .

Esempio - Per impostare una spaziatura di dieci pixel:

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell {
 margin: 5px;
}

L’aspetto delle singole miniature è controllato dal seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumb

Proprietà CSS della miniatura

width

Larghezza della miniatura.

height

Altezza della miniatura.

bordo

Bordo della miniatura.

Esempio: per impostare miniature di 215 x 129 pixel, con un bordo predefinito grigio chiaro e un bordo selezionato grigio scuro:

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumb {
 width: 215px;
 height: 129px;
}

L’aspetto dell’etichetta delle miniature è controllato dal seguente selettore di classe CSS:

 .s7ecatalogsearchviewer
.s7searchpanel .s7swatches .s7label

Proprietà CSS dell’etichetta

color

Colore testo.

font-family

Nome del carattere del testo.

font-size

Dimensione del carattere del testo.

Esempio: per impostare etichette che utilizzano un carattere Helvetica® di 12 pixel, grigio:

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7label {
 font-family: Helvetica,sans-serif;
 color: #4c4c4c;
 font-size: 12px;
}

Nei sistemi che utilizzano l'input del mouse, nella parte inferiore del pannello dei risultati di ricerca vengono visualizzati due pulsanti di scorrimento che consentono all'utente di scorrere i risultati della ricerca. L’aspetto dei pulsanti di scorrimento verso l’alto o verso il basso è controllato dai seguenti selettori di classi CSS:

.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton

Non è possibile posizionare i pulsanti di scorrimento utilizzando le proprietà CSS top, left, bottom e right. Al contrario, la logica di visualizzazione li posiziona automaticamente.

Proprietà CSS dei pulsanti scorrimento verso l'alto e verso il basso

width

Larghezza del pulsante di scorrimento.

height

Altezza del pulsante di scorrimento.

background-image

Immagine visualizzata per un determinato stato del pulsante.

background-position

Posizionate all'interno dello sprite del disegno, se vengono utilizzati gli sprite CSS.

Vedi anche Spunti CSS .

NOTA

Questo pulsante supporta state selettore di attributi, che può essere utilizzato per applicare skin diversi a "up", "down", "over", e "disabled" stati dei pulsanti.

Le descrizioni dei pulsanti possono essere localizzate. Consulta Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.

Esempio - Per impostare un pulsante di scorrimento verso l'alto di 125 x 35 pixel con immagini diverse per ogni stato:

.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton {
 width:125px;
 height:35px;
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='up'] {
 background-image:url(images/sdk/searchpanel_scroll_up_up.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='over'] {
 background-image:url(images/sdk/searchpanel_scroll_up_over.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='down'] {
 background-image:url(images/sdk/searchpanel_scroll_up_down.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='disabled'] {
 background-image:url(images/sdk/searchpanel_scroll_up_disabled.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton {
 width:125px;
 height:35px;
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='up'] {
 background-image:url(images/sdk/searchpanel_scroll_down_up.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='over'] {
 background-image:url(images/sdk/searchpanel_scroll_down_over.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='down'] {
 background-image:url(images/sdk/searchpanel_scroll_down_down.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/sdk/searchpanel_scroll_down_disabled.png);

In questa pagina