Uproszczone skrypty typu „wszystko w jednym”.
Korzystanie z jednego skryptu:
<script src="https://aqicn.org/jswgtx/?station=A373120&size=xxl"></script>
 | 30 |
Lub używając elementu iframe:
<iframe src="https://aqicn.org/jswgtx/?station=A373120&size=xxl&iframe"></iframe>
Podczas korzystania ze skryptu możesz także określić identyfikator kontenera („div”):
<div id='widget1' style='text-align: center'></div>
<script async src="https://aqicn.org/jswgtx/?station=A373120&size=xxl&container=widget1"></script>
| 30 |
Na koniec możesz także zmienić styl wyświetlania, zmieniając parametr
size na jeden z poniższych: xxl, xlarge, large, medium, small, xsmall. (efekt wizualny można zobaczyć poniżej) Zaawansowana konfiguracja skryptów
Podstawowa integracja jest prosta i bezpośrednia. Najpierw musisz dodać następujący fragment kodu:
<script src='https://aqicn.org/widgets/js/waqi-feed.v1.js'></script>Następnie po prostu dodaj ten inny kod, aby dołączyć widżet:
<script>_waqiFeed({ size: "xxl", station:"A373120"});</script> Funkcja `_waqiFeed` przyjmuje jako argument konfigurację widgetu. Wystarczy zdefiniować stację i styl wyświetlania widżetu ( size ). Oto co produkuje:
| 30 |
Możesz także określić identyfikator kontenera (identyfikator „div”), w którym ma być wyświetlany widget:
<div id='widget2' style='text-align: center;border: 1px dashed #ccc;'></div>
<script>_waqiFeed({ size: "xxl", station:"A373120", container:"widget2" });</script>
| 30 |
Określanie formatu wyświetlania
Format wyświetlania można zmienić zmieniając parametr size na jeden z poniższych:
-
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({ |
Zaawansowany silnik szablonów
Istnieje możliwość dostosowania tekstu wyświetlanego w widżecie poprzez określenie opcji display . Na przykład, aby wyświetlić zarówno tekstową nazwę „AQI”, jak i czas aktualizacji (jak pokazano na widżecie po lewej stronie), możesz użyć następującego kodu:
_waqiFeed({ display:"%cityname AQI is <span style='%style'>%impact (%aqiv)</span> <small>on %date</small>", station:"A373120" });
display parametr jest ciągiem opartym na formacie HTML i może zawierać dowolne z następujących słów kluczowych:
- `%cityname` dla nazwy miasta (np.
Beijing), - `%aqi` dla udekorowanej wartości AQI (np.
58), - `%aqiv` dla niedekorowanej (surowego tekstu) wartości AQI (np.
58), - `%style` dla deklaracji css dekorowanych szczegółów AQI (np.
background-color: #ffde33;color:#000000;), - `%data` oznacza czas aktualizacji AQI (np.
Wed 20:00), - „%wpływ” dla powiązanego wpływu na zdrowie (np.
Good,Moderate...) - „% przypisania” dla przypisania danych AQI (np.
Beijing Environmental Protection Monitoring Center) - `%details` dla pełnych szczegółów AQI (zawartość wyskakującego okienka wyświetlanego po najechaniu myszką na wartość AQI).
Oto kilka przykładów:
| %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
|
Określanie języka
Możesz także określić używany język, ustawiając opcję lang . Na przykład, aby dołączyć widget w języku chińskim (jak pokazano po prawej), użyj następującego kodu:
<script>_waqiFeed({ size: "xxl", station:"A373120", lang:"cn"});</script> Obecnie obsługiwane języki to:
"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 Jeśli nie zostanie określony lub ustawiony na null , używany będzie język angielski.
Dalsze pytania
Przykłady
Kliknij dowolny z poniższych widżetów, aby wyświetlić powiązany kod:
