1 / 12

Interaktívne prvky

Interaktívne prvky. Telematické služby Ing. Marián Pecko, PhD. HTML <details> tag. predstavuje widget , z ktorého môže používateľ získať ďalšie informácie alebo ovládanie

sidone
Télécharger la présentation

Interaktívne prvky

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Interaktívne prvky Telematické služby Ing. Marián Pecko, PhD.

  2. HTML <details> tag • predstavuje widget, z ktorého môže používateľ získať ďalšie informácie alebo ovládanie • prvý potomok tohto prvku by mal byť prvok summary, ktorý predstavuje súhrn alebo legendu o detailoch. Ak nie je tento prvok použitý používateľský agent by mal poskytnúť jeho vlastnú legendu (napr. „Detaily“) • atribúty • globálne • open – bool atribút; ak je prítomný bude sa súhrn a ďalšie informácie zobrazovať používateľovi; inak sa zobrazí iba súhrn @MP/TMS 2012

  3. HTML <summary> tag • predstavuje súhrn, titulok, alebo legendu pre zvyšok obsahu nadradeného prvku details • atribúty • globálne @MP/TMS 2012

  4. Príklad <details>, <summary> <section> <h1>Copying "ReallyAchievingYourChildhood Dreams"</h1> <details> <summary>Copying... <progress max="375505392" value="97543282"></progress> 25%</summary> <dl> <dt>Transfer rate:</dt> <dd>452KB/s</dd> <dt>Localfilename:</dt> <dd>/home/rpausch/raycd.m4v</dd> <dt>Remotefilename:</dt> <dd>/var/www/lectures/raycd.m4v</dd> <dt>Duration:</dt> <dd>01:16:27</dd> <dt>Color profile:</dt> <dd>SD (6-1-6)</dd> <dt>Dimensions:</dt> <dd>320×240</dd> </dl> </details> </section> @MP/TMS 2012

  5. Príklad <details>, <summary> @MP/TMS 2012

  6. HTML <command> tag • predstavuje príkaz, ktorý používateľ môže vyvolať • musí byť časťou kontextového menu (použitím prvku menu), môže definovať klávesovú skratku • atribúty • globálne • title – udáva nápovedu, ktorá popisuje príkaz (ako pomôcka pre používateľa) • icon – udáva URL obrázku, ktorý reprezentuje príkaz • disabled – bool atribút; naznačuje, že príkaz nie je dostupný • checked – bool atribút; naznačuje, že príkaz je vybraný (atribút type musí mať hodnotu checkbox, alebo radio) • command – ak je zadaný, definuje príkaz odkazom na iný; toto umožňuje definovať príkaz iba raz, nastaviť jeho stav a zmenia sa všetky príkazy odkazované na neho @MP/TMS 2012

  7. HTML <command> tag • type – určuje druh príkazu. Má 3 stavy • command (predvolené pri chýbajúcej hodnote) – prvok predstavuje normálny príkaz s priradenou akciou • checkbox – prvok predstavuje možnosť, ktorú možno prepínať • radio – prvok predstavuje výber jednej položky zo zoznamu položiek • label – meno príkazu ako sa ukazuje používateľovi; musí byť definovaný • radiogroup – meno skupiny príkazov, ktoré sa budú prepínať keď sa bude prepínať príkaz sám (atribút type musí mať hodnotu radio) @MP/TMS 2012

  8. HTML <command> tag <menu type="toolbar"> <command type="radio" radiogroup="alignment" checked="checked" label="Left" icon="icons/alL.png" onclick="setAlign('left')"> <command type="radio" radiogroup="alignment" label="Center" icon="icons/alC.png" onclick="setAlign('center')"> <command type="radio" radiogroup="alignment" label="Right" icon="icons/alR.png" onclick="setAlign('right')"> <hr> <command type="command" disabled label="Publish" icon="icons/pub.png" onclick="publish()"> </menu> @MP/TMS 2012

  9. HTML <menu> tag • predstavuje zoznam príkazov • príkazy sa definujú pomocou prvku a, button, input, option, command, prvky s atribútom accesskey • atribúty • globálne • type – druh deklarovaného menu. Má 3 stavy: • context – kontextové menu • toolbar – panel nástrojov • chýbajúca hodnota – obyčajný zoznam príkazov • label – nadpis menu @MP/TMS 2012

  10. HTML <menu> tag <menu type="toolbar"> <li> <menu label="File"> <buttontype="button" onclick="fnew()">New...</button> <buttontype="button" onclick="fopen()">Open...</button> <buttontype="button" onclick="fsave()">Save</button> <buttontype="button" onclick="fsaveas()">Saveas...</button> </menu> </li> <li> <menu label="Edit"> <buttontype="button" onclick="ecopy()">Copy</button> <buttontype="button" onclick="ecut()">Cut</button> <buttontype="button" onclick="epaste()">Paste</button> </menu> </li> <li> <menu label="Help"> <li><a href="help.html">Help</a></li> <li><a href="about.html">About</a></li> </menu> </li> </menu> @MP/TMS 2012

  11. HTML <dialog> tag • predstavuje časť aplikácie, s ktorou používateľ spolupracuje na vykonaní úlohy, napr. dialógové okno • atribúty • globálne • open – bool atribút; ak je uvedený naznačuje, že prvok dialóg je aktívny a že s ním môže používateľ spolupracovať; ak nie je uvedený, nebude sa používateľovi zobrazovať @MP/TMS 2012

  12. HTML <dialog> tag <dialogopen> <dt>Bountyhunter</dt> <dd>You'rewanted, Wales.</dd> <dt>OutlawJosey Wales</dt> <dd>ReckonI'mrightpopular. You a bountyhunter?</dd> <dt>Bountyhunter</dt> <dd>A man'sgot to do somethingfor a livingthesedays.</dd> <dt>OutlawJosey Wales</dt> <dd>Dyin' ain'tmuchof a living, boy.</dd> </dialog> @MP/TMS 2012

More Related