Всичко в едно опростени скриптове
Използване на един скрипт:
<script src="https://aqicn.org/jswgtx/?station=A373120&size=xxl"></script>
 | 30 |
Или с помощта на iframe:
<iframe src="https://aqicn.org/jswgtx/?station=A373120&size=xxl&iframe"></iframe>
Можете също така да посочите идентификатор на контейнер („div“ id), когато използвате скрипта:
<div id='widget1' style='text-align: center'></div>
<script async src="https://aqicn.org/jswgtx/?station=A373120&size=xxl&container=widget1"></script>
| 30 |
И накрая, но не на последно място, можете също да промените стила на показване, но да промените параметъра
size на един от тези: xxl, xlarge, large, medium, small, xsmall. (вижте по-долу за визуалния резултат) Разширена настройка на скриптове
Основната интеграция е проста и ясна. Първо трябва да добавите следната част от кода:
<script src='https://aqicn.org/widgets/js/waqi-feed.v1.js'></script>След това просто добавете този друг код, за да включите джаджата:
<script>_waqiFeed({ size: "xxl", station:"A373120"});</script> Функцията `_waqiFeed` приема като аргумент конфигурацията на джаджата. Просто трябва да дефинирате станцията и стила на показване на джаджата ( size ). Това е, което произвежда:
| 30 |
Можете също така да посочите идентификатора на контейнера („div“ id), където трябва да се показва приспособлението:
<div id='widget2' style='text-align: center;border: 1px dashed #ccc;'></div>
<script>_waqiFeed({ size: "xxl", station:"A373120", container:"widget2" });</script>
| 30 |
Задаване на формата на дисплея
Форматът на дисплея може да бъде променен чрез промяна на параметъра size на един от тези:
-
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({ |
Разширена машина за шаблони
Възможно е да персонализирате текста, който да се показва в изпълнимия модул, като посочите опцията display . Например, за да покажете както текстовото име „AQI“, така и времето за актуализиране (както е показано на изпълнимия модул вляво), можете да използвате следния код:
_waqiFeed({ display:"%cityname AQI is <span style='%style'>%impact (%aqiv)</span> <small>on %date</small>", station:"A373120" });
display на параметъра е базиран на HTML низ и може да съдържа всяка от следните ключови думи:
- `%cityname` за името на града (напр.
Beijing), - `%aqi` за украсената стойност на AQI (напр.
58), - `%aqiv` за неукрасената (суров текст) стойност на AQI (напр.
58), - `%style` за css декларацията на декорираните AQI подробности (напр.
background-color: #ffde33;color:#000000;), - `%date` за часа, в който AQI е актуализиран (напр.
Wed 20:00), - `%impact` за свързаното въздействие върху здравето (напр.
Good,Moderate...) - `%attribution` за приписване на данни за AQI (напр.
Beijing Environmental Protection Monitoring Center) - `%details` за пълните подробности за AQI (съдържанието на изскачащия прозорец, показван при преместване на мишката върху стойността на AQI).
Ето няколко примера:
| %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
|
Посочване на езика
Можете също да посочите езика, който да се използва, като зададете опцията lang . Например, за да включите джаджата на китайски (както е показано вдясно), използвайте следния код:
<script>_waqiFeed({ size: "xxl", station:"A373120", 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 , се използва английски.
Още въпроси
Примери
Щракнете върху някоя от джаджите по-долу, за да видите свързания код:
