Све-у-једном поједностављене скрипте
Коришћење једне скрипте:
<script src="https://aqicn.org/jswgtx/?station=A56818&size=xxl"></script>
 | 7 | |
 | 4 |
Или користећи ифраме:
<iframe src="https://aqicn.org/jswgtx/?station=A56818&size=xxl&iframe"></iframe>
Такође можете да наведете идентификатор контејнера („див“ ид) када користите скрипту:
<div id='widget1' style='text-align: center'></div>
<script async src="https://aqicn.org/jswgtx/?station=A56818&size=xxl&container=widget1"></script>
| 7 | |
| 4 |
На крају, али не и најмање важно, такође можете променити стил приказа, али променити параметар
size на један од ових: xxl, xlarge, large, medium, small, xsmall. (погледајте доле за визуелни резултат) Напредно подешавање скрипти
Основна интеграција је једноставна и директна. Прво морате да додате следећи део кода:
<script src='https://aqicn.org/widgets/js/waqi-feed.v1.js'></script>Затим само додајте овај други код да бисте укључили виџет:
<script>_waqiFeed({ size: "xxl", station:"A56818"});</script> Функција `_вакиФеед` узима као аргумент конфигурацију за виџет. Потребно је само да дефинишете станицу и стил приказа виџета ( size ). Ово је оно што производи:
| 7 | |
| 4 |
Такође можете да наведете идентификатор контејнера ('див' ид) где виџет треба да се прикаже:
<div id='widget2' style='text-align: center;border: 1px dashed #ccc;'></div>
<script>_waqiFeed({ size: "xxl", station:"A56818", container:"widget2" });</script>
| 7 | |
| 4 |
Одређивање формата приказа
Формат приказа се може променити променом параметра size у један од ових:
7
Good
Updated on Friday 22:00
| 7 | 7 Updated on Friday 22:00 | Ladenburg, Germany AQI: 7 : Good | |||||||
_waqiFeed({ | _waqiFeed({ | _waqiFeed({ | _waqiFeed({ | _waqiFeed({ |
Напредни механизам за шаблоне
Могуће је прилагодити текст који ће бити приказан у оквиру виџета тако што ћете навести опцију display . На пример, да бисте приказали и текстуални назив „АКИ“ као и време ажурирања (као што је приказано на виџету са леве стране), можете да користите следећи код:
_waqiFeed({ display:"%cityname AQI is <span style='%style'>%impact (%aqiv)</span> <small>on %date</small>", station:"A373120" });
display параметра је стринг заснован на ХТМЛ-у и може да садржи било коју од следећих кључних речи:
- `%цитинаме` за име града (нпр.
Beijing), - `%аки` за украшену АКИ вредност (нпр.
58), - `%акив` за неукрашену (необрађени текст) АКИ вредност (нпр.
58), - `%стиле` за цсс декларацију украшених АКИ детаља (нпр.
background-color: #ffde33;color:#000000;), - `%дате` за време када је АКИ ажуриран (нпр.
Wed 20:00), - `%утицај` за повезани утицај на здравље (нпр.
Good,Moderate...) - `%аттрибутион` за АКИ приписивање података (нпр.
Beijing Environmental Protection Monitoring Center) - `%детаилс` за пуне детаље АКИ-а (садржај искачућег прозора који се приказује када се мишем помери преко вредности АКИ).
Ево неколико примера:
| %cityname Air Quality is <b>%impact</b>. | Ladenburg, Germany Air Quality is Good. | ||||||
| %aqi <small>(%impact)</small> | 7 (Good) | ||||||
| <span style='%style;font-size:12px;padding:5px 10px;'>%cityname AQI: %impact</span> | Ladenburg, Germany AQI: Good | ||||||
| %cityname Air Quality is <span style='%style;padding:0 5px'>%impact</span> (%aqiv on %date) | Ladenburg, Germany Air Quality is Good
( 7 on Friday 22:00) | ||||||
| %cityname Air Quality is provided by %attribution | Ladenburg, Germany Air Quality is provided by Citizen Science project sensor.community | ||||||
| <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> | Ladenburg, Germany AQI:
7 | ||||||
| <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 | 7
Good
Updated on Friday 22:00
|
Одређивање језика
Такође можете одредити језик који ће се користити постављањем опције lang . На пример, да бисте укључили виџет на кинеском (као што је приказано десно), користите следећи код:
<script>_waqiFeed({ size: "xxl", station:"A56818", lang:"cn"});</script> Тренутно подржани језици су:
"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 Ако није наведено или постављено на null , користи се енглески.
Даља питања
Примери
Кликните на било који од виџета у наставку да бисте видели повезани код:
7 | Ladenburg, Germany AQI: 7 : Добро | 7 Updated on Friday 22:00 | 7
Добро
Updated on Friday 22:00
|
