All-in-one zjednodušené skripty
Použití jediného skriptu:
<script src="https://aqicn.org/jswgtx/?station=A373120&size=xxl"></script>
 | 30 |
Nebo pomocí prvku iframe:
<iframe src="https://aqicn.org/jswgtx/?station=A373120&size=xxl&iframe"></iframe>
Při použití skriptu můžete také zadat identifikátor kontejneru (id 'div'):
<div id='widget1' style='text-align: center'></div>
<script async src="https://aqicn.org/jswgtx/?station=A373120&size=xxl&container=widget1"></script>
| 30 |
V neposlední řadě můžete také změnit styl zobrazení, ale změnou parametru
size na jeden z těchto: xxl, xlarge, large, medium, small, xsmall. (Vizuální výsledek viz níže) Pokročilé nastavení skriptování
Základní integrace je jednoduchá a přímočará. Nejprve musíte přidat následující část kódu:
<script src='https://aqicn.org/widgets/js/waqi-feed.v1.js'></script>Poté stačí přidat tento další kód, abyste zahrnuli widget:
<script>_waqiFeed({ size: "xxl", station:"A373120"});</script> Funkce `_waqiFeed` bere jako argument konfiguraci widgetu. Stačí definovat stanici a styl zobrazení widgetu ( size ). To je to, co se vyrábí:
| 30 |
Můžete také zadat identifikátor kontejneru („div“ id), kde se má widget zobrazit:
<div id='widget2' style='text-align: center;border: 1px dashed #ccc;'></div>
<script>_waqiFeed({ size: "xxl", station:"A373120", container:"widget2" });</script>
| 30 |
Určení formátu zobrazení
Formát zobrazení lze změnit změnou parametru size na jeden z těchto:
-
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({ |
Pokročilý šablonový engine
Je možné upravit text, který se má zobrazit v rámci widgetu, zadáním možnosti display . Chcete-li například zobrazit textový název „AQI“ i čas aktualizace (jak je znázorněno na widgetu vlevo), můžete použít následující kód:
_waqiFeed({ display:"%cityname AQI is <span style='%style'>%impact (%aqiv)</span> <small>on %date</small>", station:"A373120" });
Parametr display je řetězec založený na HTML a může obsahovat libovolné z následujících klíčových slov:
- `%cityname` pro název města (např.
Beijing), - `%aqi` pro dekorovanou hodnotu AQI (např.
58), - `%aqiv` pro hodnotu AQI bez zdobení (surový text) (např
58), - `%style` pro deklaraci css dekorovaných detailů AQI (např.
background-color: #ffde33;color:#000000;), - `%date` pro čas, kdy bylo AQI aktualizováno (např.
Wed 20:00), - `%impact` pro související zdravotní dopad (např.
Good,Moderate...) - `%attribution` pro atribuci dat AQI (např.
Beijing Environmental Protection Monitoring Center) - `%details` pro úplné detaily AQI (obsah vyskakovacího okna zobrazený při najetí myší na hodnotu AQI).
Zde je několik příkladů:
| %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
|
Určení jazyka
Můžete také určit jazyk, který se má použít, nastavením možnosti lang . Chcete-li například zahrnout widget v čínštině (jak je znázorněno vpravo), použijte následující kód:
<script>_waqiFeed({ size: "xxl", station:"A373120", lang:"cn"});</script> Aktuálně podporované jazyky jsou:
"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 Pokud není zadáno nebo nastaveno na null , použije se angličtina.
Další otázky
Příklady
Kliknutím na kterýkoli z níže uvedených widgetů zobrazíte související kód:
