Minden az egyben egyszerűsített szkriptek
Egyetlen szkript használatával:
<script src="https://aqicn.org/jswgtx/?station=A373120&size=xxl"></script>
 | 30 |
Vagy iframe használatával:
<iframe src="https://aqicn.org/jswgtx/?station=A373120&size=xxl&iframe"></iframe>
A szkript használatakor megadhat egy tárolóazonosítót ('div' id) is:
<div id='widget1' style='text-align: center'></div>
<script async src="https://aqicn.org/jswgtx/?station=A373120&size=xxl&container=widget1"></script>
| 30 |
Végül, de nem utolsósorban módosíthatja a megjelenítési stílust is, de módosíthatja a
size paramétert az alábbiak valamelyikére: xxl, xlarge, large, medium, small, xsmall. (lásd alább a vizuális eredményt) Speciális szkriptbeállítás
Az alapvető integráció egyszerű és egyértelmű. Először hozzá kell adnia a következő kódrészletet:
<script src='https://aqicn.org/widgets/js/waqi-feed.v1.js'></script>Ezután adja hozzá ezt a másik kódot a widget felvételéhez:
<script>_waqiFeed({ size: "xxl", station:"A373120"});</script> A `_waqiFeed` függvény a widget konfigurációját veszi argumentumként. Csak meg kell határoznia az állomást és a widget megjelenítési stílusát ( size ). Ez az, amit termel:
| 30 |
Megadhatja azt a tárolóazonosítót ('div' id) is, ahol a widgetet meg kell jeleníteni:
<div id='widget2' style='text-align: center;border: 1px dashed #ccc;'></div>
<script>_waqiFeed({ size: "xxl", station:"A373120", container:"widget2" });</script>
| 30 |
A megjelenítési formátum megadása
A megjelenítési formátum megváltoztatható a size paraméter módosításával az alábbiak valamelyikére:
-
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({ |
Fejlett sablonmotor
Lehetőség van a widgeten belüli szöveg testreszabására a display opció megadásával. Például a szöveges "AQI" név és a frissítési idő (a bal oldali widgeten látható) megjelenítéséhez a következő kódot használhatja:
_waqiFeed({ display:"%cityname AQI is <span style='%style'>%impact (%aqiv)</span> <small>on %date</small>", station:"A373120" });
A display egy HTML-alapú karakterlánc, és a következő kulcsszavak bármelyikét tartalmazhatja:
- "%cityname" a város nevéhez (pl.
Beijing), - "%aqi" a díszített AQI értékhez (pl.
58), - "%aqiv" a díszítetlen (nyers szöveg) AQI értékhez (pl.
58), - `%style` a díszített AQI részletek css deklarációjához (pl.
background-color: #ffde33;color:#000000;), - "%dátum" az AQI frissítésének időpontjára (pl.
Wed 20:00), - "%impact" a kapcsolódó egészségügyi hatásra (pl.
Good,Moderate...) - "%attribúció" az AQI adatok hozzárendeléséhez (pl.
Beijing Environmental Protection Monitoring Center) - "%részletek" a teljes AQI részlethez (a felugró ablak tartalma, amely akkor jelenik meg, amikor az egeret az AQI érték fölé viszi).
Íme néhány példa:
| %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
|
A nyelv megadása
A használandó nyelvet a lang beállításával is megadhatja. Ha például a widgetet kínai nyelven szeretné beilleszteni (amint a jobb oldalon látható), használja a következő kódot:
<script>_waqiFeed({ size: "xxl", station:"A373120", lang:"cn"});</script> A jelenleg támogatott nyelvek a következők:
"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 Ha nincs megadva, vagy null van állítva, az angol nyelvet használjuk.
További kérdések
Példák
Kattintson az alábbi widgetek bármelyikére a kapcsolódó kód megtekintéséhez:
