Scripturi simplificate all-in-one
Folosind un singur script:
<script src="https://aqicn.org/jswgtx/?station=A467173&size=xxl"></script>
 | 0 | |
 | 1 |
Sau folosind un iframe:
<iframe src="https://aqicn.org/jswgtx/?station=A467173&size=xxl&iframe"></iframe>
De asemenea, puteți specifica un identificator de container (id-ul „div”) atunci când utilizați scriptul:
<div id='widget1' style='text-align: center'></div>
<script async src="https://aqicn.org/jswgtx/?station=A467173&size=xxl&container=widget1"></script>
| 0 | |
| 1 |
Nu în ultimul rând, puteți modifica și stilul de afișare, dar modificând parametrul
size la unul dintre acestea: xxl, xlarge, large, medium, small, xsmall. (vezi mai jos pentru rezultatul vizual) Configurare avansată de scripting
Integrarea de bază este simplă și directă. Mai întâi trebuie să adăugați următoarea bucată de cod:
<script src='https://aqicn.org/widgets/js/waqi-feed.v1.js'></script>Apoi, trebuie doar să adăugați acest alt cod pentru a include widget-ul:
<script>_waqiFeed({ size: "xxl", station:"A467173"});</script> Funcția `_waqiFeed` ia ca argument configurația pentru widget. Trebuie doar să definiți stația și stilul de afișare a widgetului ( size ). Acesta este ceea ce se produce:
| 0 | |
| 1 |
De asemenea, puteți specifica identificatorul containerului (id-ul „div”) unde trebuie afișat widget-ul:
<div id='widget2' style='text-align: center;border: 1px dashed #ccc;'></div>
<script>_waqiFeed({ size: "xxl", station:"A467173", container:"widget2" });</script>
| 0 | |
| 1 |
Specificarea formatului de afișare
Formatul de afișare poate fi modificat prin schimbarea parametrului size la unul dintre acestea:
1
Good
Updated on Sunday 12:00
| 1 | 1 Updated on Sunday 12:00 | Eshkolot, Palestinian Territories AQI: 1 : Good | |||||||
_waqiFeed({ | _waqiFeed({ | _waqiFeed({ | _waqiFeed({ | _waqiFeed({ |
Motor avansat de șabloane
Este posibil să personalizați textul care urmează să fie afișat în cadrul widget-ului prin specificarea opțiunii display . De exemplu, pentru a afișa atât numele textual „AQI”, cât și timpul de actualizare (așa cum se arată în widgetul din stânga), puteți utiliza următorul cod:
_waqiFeed({ display:"%cityname AQI is <span style='%style'>%impact (%aqiv)</span> <small>on %date</small>", station:"A373120" });
display parametrului este un șir bazat pe HTML și poate conține oricare dintre următoarele cuvinte cheie:
- `%cityname` pentru numele orașului (de exemplu
Beijing), - `%aqi` pentru valoarea AQI decorată (de ex.
58), - `%aqiv` pentru valoarea AQI nedecorată (text brut) (de ex.
58), - `%style` pentru declarația css a detaliilor AQI decorate (de exemplu
background-color: #ffde33;color:#000000;), - `%date` pentru ora la care a fost actualizat AQI (de exemplu
Wed 20:00), - `%impact` pentru impactul asociat asupra sănătății (de exemplu,
Good,Moderate...) - `%attribution` pentru atribuirea datelor AQI (de exemplu
Beijing Environmental Protection Monitoring Center) - `%details` pentru detaliile complete AQI (conținutul pop-up-ului afișat când deplasați mouse-ul peste valoarea AQI).
Iată câteva exemple:
| %cityname Air Quality is <b>%impact</b>. | Eshkolot, Palestinian Territories Air Quality is Good. | ||||||
| %aqi <small>(%impact)</small> | 1 (Good) | ||||||
| <span style='%style;font-size:12px;padding:5px 10px;'>%cityname AQI: %impact</span> | Eshkolot, Palestinian Territories AQI: Good | ||||||
| %cityname Air Quality is <span style='%style;padding:0 5px'>%impact</span> (%aqiv on %date) | Eshkolot, Palestinian Territories Air Quality is Good
( 1 on Sunday 12:00) | ||||||
| %cityname Air Quality is provided by %attribution | Eshkolot, Palestinian Territories 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> | Eshkolot, Palestinian Territories AQI:
1 | ||||||
| <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 | 1
Good
Updated on Sunday 12:00
|
Specificarea Limbii
De asemenea, puteți specifica limba care va fi utilizată setând opțiunea lang . De exemplu, pentru a include widget-ul în chineză (așa cum se arată în dreapta), utilizați următorul cod:
<script>_waqiFeed({ size: "xxl", station:"A467173", lang:"cn"});</script> Limbile acceptate în prezent sunt:
"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 Dacă nu este specificat sau setat la null , se folosește limba engleză.
Alte intrebari
Exemple
Faceți clic pe oricare dintre widget-urile de mai jos pentru a vedea codul asociat:
1 | Eshkolot, Palestinian Territories AQI: 1 : Bun | 1 Updated on Sunday 12:00 | 1
Bun
Updated on Sunday 12:00
|
