Script semplificati tutto in uno
Utilizzando un unico script:
<script src="https://aqicn.org/jswgtx/?station=A373120&size=xxl"></script>
 | 30 |
Oppure utilizzando un iframe:
<iframe src="https://aqicn.org/jswgtx/?station=A373120&size=xxl&iframe"></iframe>
Puoi anche specificare un identificatore del contenitore (id 'div') quando utilizzi lo script:
<div id='widget1' style='text-align: center'></div>
<script async src="https://aqicn.org/jswgtx/?station=A373120&size=xxl&container=widget1"></script>
| 30 |
Ultimo, ma non meno importante, puoi anche cambiare lo stile di visualizzazione cambiando il parametro
size in uno di questi: xxl, xlarge, large, medium, small, xsmall. (vedere sotto per il risultato visivo) Configurazione di scripting avanzata
L'integrazione di base è semplice e diretta. Devi prima aggiungere il seguente pezzo di codice:
<script src='https://aqicn.org/widgets/js/waqi-feed.v1.js'></script>Quindi, aggiungi semplicemente questo altro codice per includere il widget:
<script>_waqiFeed({ size: "xxl", station:"A373120"});</script> La funzione `_waqiFeed` prende come argomento la configurazione del widget. Devi solo definire la stazione e lo stile di visualizzazione del widget ( size ). Questo è ciò che viene prodotto:
| 30 |
Puoi anche specificare l'identificatore del contenitore (id 'div') in cui deve essere mostrato il widget:
<div id='widget2' style='text-align: center;border: 1px dashed #ccc;'></div>
<script>_waqiFeed({ size: "xxl", station:"A373120", container:"widget2" });</script>
| 30 |
Specifica del formato di visualizzazione
Il formato di visualizzazione può essere modificato modificando il parametro size in uno di questi:
-
Not Available
Updated on Friday, Feb 2nd 2024
| - | - Updated on Friday 1:00 | Abago BogPAranda TIB 2 18b77c, Bogota, Colombia AQI: - : Not Available | ||||
_waqiFeed({ | _waqiFeed({ | _waqiFeed({ | _waqiFeed({ | _waqiFeed({ |
Motore di modelli avanzato
È possibile personalizzare il testo da visualizzare all'interno del widget specificando l'opzione display . Ad esempio, per visualizzare sia il nome testuale "AQI" che l'orario di aggiornamento (come mostrato nel widget a sinistra), è possibile utilizzare il seguente codice:
_waqiFeed({ display:"%cityname AQI is <span style='%style'>%impact (%aqiv)</span> <small>on %date</small>", station:"A373120" });
Il parametro display è una stringa basata su HTML e può contenere una qualsiasi delle seguenti parole chiave:
- `%cityname` per il nome della città (ad esempio
Beijing), - `%aqi` per il valore AQI decorato (ad esempio
58), - "%aqiv" per il valore AQI non decorato (testo grezzo) (ad esempio
58), - `%style` per la dichiarazione css dei dettagli AQI decorati (ad esempio
background-color: #ffde33;color:#000000;), - "%date" per l'ora in cui l'AQI è stato aggiornato (ad esempio
Wed 20:00), - "%impact" per l'impatto sulla salute associato (ad es.
Good,Moderate...) - "%attribution" per l'attribuzione dei dati AQI (ad es.
Beijing Environmental Protection Monitoring Center) - "%dettagli" per i dettagli AQI completi (il contenuto del popup visualizzato quando si sposta il mouse sul valore AQI).
Ecco alcuni esempi:
| %cityname Air Quality is <b>%impact</b>. | Abago BogPAranda TIB 2 18b77c, Bogota, Colombia Air Quality is Not Available. | |||
| %aqi <small>(%impact)</small> | - (Not Available) | |||
| <span style='%style;font-size:12px;padding:5px 10px;'>%cityname AQI: %impact</span> | Abago BogPAranda TIB 2 18b77c, Bogota, Colombia AQI: Not Available | |||
| %cityname Air Quality is <span style='%style;padding:0 5px'>%impact</span> (%aqiv on %date) | Abago BogPAranda TIB 2 18b77c, Bogota, Colombia Air Quality is Not Available
( - on Friday 1:00) | |||
| %cityname Air Quality is provided by %attribution | Abago BogPAranda TIB 2 18b77c, Bogota, Colombia Air Quality is provided by Ciencia ciudadana por la Calidad del Aire | |||
| <div style='%style;max-width:180px;text-align:center;line-height:1.2;'><div style='height:30px'><small>%cityname AQI:</small></div> <div style='font-size:88px;height:110px;'>%aqiv</div> %impact</div> | Abago BogPAranda TIB 2 18b77c, Bogota, Colombia AQI:
- | |||
| <table style='width:100%;line-height:1.2'><tr><td style='width:38%;%style;text-align:center;font-size:88px;'>%aqiv</div><td style='width:62%;'>%cityname AQ<div style='font-size:32px;'>%impact</div><small>updated on %date</small></table> |
| |||
| %details | -
Not Available
Updated on Friday, Feb 2nd 2024
|
Specifica della lingua
È inoltre possibile specificare la lingua da utilizzare impostando l'opzione lang . Ad esempio, per includere il widget in cinese (come mostrato a destra), utilizza il seguente codice:
<script>_waqiFeed({ size: "xxl", station:"A373120", lang:"cn"});</script> Le lingue attualmente supportate sono:
"en": English"cn": Chinese"jp": Japanese"es": Spanish"kr": Korean"ru": Russian"hk": Traditional Chinese"fr": French"pl": Polish"de": German"pt": Portuguese"vn": Vietnamese"it": Italian"id": Indonesian"nl": Dutch"fa": Persian"th": Thai"hu": Hungarian"el": Greek"ro": Romanian"bg": Bulgarian"ur": Urdu"hi": Hindi"ar": Arabic"sr": Serbian"bn": Bangla"hu": Hungarian"bs": Bosnian"hr": Croatian"tr": Turkish"uk": Ukrainian"cs": Czech"be": Belarusian"km": Khmer"lo": Lao Se non specificato o impostato su null , viene utilizzato l'inglese.
Ulteriori domande
Esempi
Clicca su uno qualsiasi dei widget qui sotto per vedere il codice associato:
