Struktur dan semantik HTML5 (5): interaksi_html5 kemahiran tutorial

http://www.jb51.net/html_xhtml/20080306/html_xhtml_4688.html
　HTML 5 juga dikenali sebagai Aplikasi Web 1.0. Untuk mencapai matlamat ini, beberapa elemen baharu telah ditambah yang memberikan pengalaman interaktif untuk halaman web:
butiran
datagrid
menu
arahan
Elemen ini boleh menukar kandungan yang dipaparkan mengikut operasi dan pilihan pengguna tanpa memuatkan halaman baharu daripada pelayan.
butiran
Elemen butiran mewakili maklumat terperinci yang mungkin tidak dipaparkan secara lalai. Elemen legenda pilihan boleh memberikan ringkasan maklumat terperinci.
Salah satu kegunaan elemen butiran adalah untuk menyediakan nota kaki dan nota hujung. Contohnya:
Bil Murrelet Craveri adalah kira-kira 10% lebih nipis
berbanding bil Murrelet Xantus

[Sibley, 2000]

Sibley, David Allen, The Sibley Guide to Birds,

(New York: Chanticleer Press, 2000) ms 247

Tiada kaedah paparan khusus dinyatakan. Penyemak imbas boleh memilih daripada nota kaki, nota hujung dan petua alat.
Setiap elemen butiran boleh mempunyai atribut terbuka. Jika sifat ini ditetapkan, butiran akan dipaparkan pada mulanya. Jika sifat ini tidak ditetapkan, ia akan disembunyikan sehingga pengguna meminta untuk menunjukkannya. Dalam mana-mana kes, pengguna boleh menunjukkan atau menyembunyikan butiran dengan mengklik ikon atau kawalan lain.
datagrid
Elemen datagrid menyediakan kawalan grid. Anda boleh menggunakannya untuk memaparkan pokok, senarai dan jadual, dan pengguna serta skrip boleh mengemas kini elemen antara muka ini. Sebaliknya, jadual tradisional digunakan terutamanya untuk memaparkan data statik.
Datagrid mendapat data awal daripada kandungannya (jadual, pilih atau elemen HTML lain). Sebagai contoh, grid data dalam Kod 9 mengandungi jadual gred. Dalam contoh ini, datagrid datang daripada jadual. Datagrid satu dimensi yang lebih ringkas boleh mendapatkan data daripada elemen terpilih. Jika elemen HTML lain digunakan, setiap elemen anak menjadi satu baris dalam grid.

Jones

Allison

A-

B

A

Jones	Allison	A-	B	A
Smith	Johnny	A	C	A
Willis	Sydney	C-	D	F
Wilson	Frank	B-	B	A

Smith Johnny A C A Willis Sydney C- D td> F Wilson Frank B- B A

Perbezaan antara elemen ini dan jadual biasa ialah pengguna boleh memilih baris, lajur dan sel hapuskan; operasi data secara langsung dalam pelayar klien. Kemas kini boleh dipantau menggunakan kod JavaScript. Antara muka HTMLDataGridElement telah ditambahkan pada Model Objek Dokumen (DOM) untuk menyokong elemen ini (Kod 10 HTMLDataGridElement).
antara muka HTMLDataGridElement : HTMLElement {
atribut DataGridDataProvider data;
atribut baca sahaja pemilihan DataGridSelection;
atribut berbilang boolean;
atribut boolean dilumpuhkan;
void updateEverything(>); batal kemas kiniRowsInserted(dalam baris RowSpecification, dalam kiraan panjang yang tidak ditandatangani);
batal kemas kiniRowsRemoved(dalam baris RowSpecification, dalam kiraan panjang yang tidak ditandatangani);
batal kemas kiniRowChanged Baris RowSpecification);
batal kemas kiniColumnChanged(dalam lajur panjang yang tidak ditandatangani);
batal kemas kiniCellChanged(dalam baris RowSpecification, dalam lajur panjang yang tidak ditandatangani);
};
Anda juga boleh menggunakan DOM untuk memuatkan data secara dinamik dalam grid. Iaitu, grid data mungkin tidak mengandungi elemen anak yang menyediakan data awal. Anda boleh menetapkannya dengan objek DataGridDataProvider (Penyenaraian 11 | DataGridDataProvider). Ini membolehkan anda memuatkan data daripada pangkalan data, XmlHttpRequest atau mana-mana sumber yang boleh diakses oleh kod JavaScript anda.
antara muka DataGridDataProvider {
void initialize(dalam HTMLDataGridElement datagrid);
unsigned long getRowCount(dalam RowSpecification row);
unsigned long getChildAtPosition(dalam RowSpecification unsigned longRow, dalam
); . HTMLMenuElement getRowMenu(dalam baris RowSpecification);
batalkan getRowClasses(dalam baris RowSpecification, dalam kelas DOMTokenList);
DOMString getCellData(dalam baris RowSpecification, dalam lajur panjang yang tidak ditandatangani);
RowSpecification dalam lajur panjang yang tidak ditandatangani;
RowSpecification tidak ditandatangani dalam getCellData lajur panjang yang tidak ditandatangani,
dalam kelas DOMTokenList);
batal toggleColumnSortState(dalam lajur panjang yang tidak ditandatangani);
batal setCellCheckedState(dalam baris RowSpecification, dalam lajur panjang yang tidak ditandatangani,
dalam keadaan panjang);
void cycleCell(dalam baris RowSpecification, dalam lajur panjang yang tidak ditandatangani);
void editCell(dalam baris RowSpecification, dalam lajur panjang yang tidak ditandatangani, dalam data DOMString);
};
menu dan arahan
Elemen menu sebenarnya muncul dalam HTML 2. Ia telah ditamatkan dalam HTML 4, tetapi HTML 5 menghidupkannya semula dan memberikan makna baharu. Dalam HTML 5, menu mengandungi elemen arahan dan setiap elemen arahan mencetuskan tindakan. Contohnya, kod 12 HTML 5 Menu ialah menu yang muncul kotak amaran.







Anda juga boleh menggunakan atribut checked="checked" untuk menukar arahan ke dalam kotak pilihan. Kotak pilihan boleh ditukar kepada butang radio dengan menentukan atribut kumpulan radio, yang nilainya ialah nama kumpulan butang yang saling eksklusif.
Selain senarai arahan ringkas, anda juga boleh menggunakan elemen menu untuk mencipta bar alat atau menu konteks pop timbul, yang memerlukan menetapkan atribut jenis kepada bar alat atau pop timbul. Contohnya, Kod 13. HTML 5 Toolbar memaparkan bar alat yang serupa dengan editor blog seperti WordPress. Ia memaut ke imej butang menggunakan atribut ikon.
















Atribut label memberikan tajuk menu. Contohnya, Kod 14. HTML 5 Edit Menu memaparkan menu Edit.








Menu boleh bersarang dalam menu lain untuk membentuk struktur menu hierarki.