Komentar: HTML 5 juga dikenal sebagai Aplikasi Web 1.0. Untuk mencapai tujuan ini, beberapa elemen baru ditambahkan untuk memberikan pengalaman interaktif untuk halaman web: detail perintah menu datagrid elemen -elemen ini dapat didasarkan pada pengguna
HTML 5 juga dikenal sebagai Aplikasi Web 1.0. Untuk mencapai hal ini, beberapa elemen baru ditambahkan untuk memberikan pengalaman interaktif untuk halaman web:
Detail
datagrid
menu
Memerintah
Semua elemen ini dapat mengubah konten yang ditampilkan berdasarkan tindakan pengguna dan pilihan tanpa memuat halaman baru dari server.
Detail
Elemen detail mewakili detail yang mungkin tidak ditampilkan secara default. Elemen legenda opsional dapat memberikan ringkasan detailnya.
Salah satu penggunaan elemen detail adalah untuk menyediakan catatan kaki dan catatan akhir. Misalnya:
Bill of a Craveri's Murrelet sekitar 10% lebih tipis
dari tagihan murrelet Xantus.
<detail>
<Mregend> [Sibley, 2000] </Grend>
<p> Sibley, David Allen, The Sibley Guide to Birds,
(New York: Chanticleer Press, 2000) hal. 247
</p>
</betail>
Tidak ada metode tampilan khusus yang ditentukan. Browser dapat memilih catatan kaki, catatan akhir, dan tooltips.
Setiap elemen detail dapat memiliki properti terbuka. Jika properti ini diatur, detailnya ditampilkan pada awalnya. Jika properti ini tidak diatur, mereka disembunyikan sampai pengguna meminta mereka untuk ditampilkan. Dalam kedua kasus tersebut, pengguna dapat menampilkan atau menyembunyikan detail dengan mengklik ikon atau kontrol lainnya.
datagrid
Elemen Datagrid menyediakan kontrol grid. Ini dapat digunakan untuk menampilkan pohon, daftar, dan tabel, dan pengguna dan skrip dapat memperbarui elemen antarmuka ini. Sebaliknya, tabel tradisional terutama digunakan untuk menampilkan data statis.
Datagrid mendapatkan data awal dari kontennya (tabel, pilih, atau elemen HTML lainnya). Misalnya, datagrid dalam kode 9 berisi lembar skor. Dalam contoh ini, data datagrid berasal dari tabel. Datagrid 1D yang lebih sederhana bisa mendapatkan data dari elemen pilih. Jika Anda menggunakan elemen HTML lainnya, setiap elemen anak menjadi baris di jaringan.
<datagrid>
<able>
<tr> <td> jones </td> <td> allison </td> <td> a-</td> <td> B </td> <td> a </td> </tr>
<tr> <td> Smith </td> <td> Johnny </td> <td> a </td> <td> c </td> <td> a </td> </tr>
<tr> <td> Willis </td> <td> Sydney </td> <td> c-</td> <td> d </td> <td> f </td> </tr>
<tr> <td> Wilson </td> <td> frank </td> <td> b-</td> <td> B </td> <td> B </td> <td> a </td> </tr>
</boable>
</datagrid>
Perbedaan antara elemen ini dan tabel reguler adalah bahwa pengguna dapat memilih baris, kolom, dan sel; keruntuhan baris, kolom, dan sel; Edit sel; hapus baris, kolom, dan sel; Urutkan kisi -kisi; dan melakukan operasi data lain secara langsung di browser klien. Anda dapat menggunakan kode JavaScript untuk memantau pembaruan. Antarmuka htmldataGridElement ditambahkan ke model objek dokumen (DOM) untuk mendukung elemen ini (kode 10 htmldataGridElement).
Antarmuka htmldataGridElement: htmlelement {
Atribut Data DatagridDataProvider;
Atribut Readonly Pilihan DatagridSelection;
Atribut Boolean Multiple;
atribut boolean dinonaktifkan;
void updateEverything ();
void updaterowschanged (dalam baris spesifikasi, dalam hitungan panjang yang tidak ditandatangani);
void Updaterowsertlert (dalam baris spesifikasi, dalam hitungan panjang yang tidak ditandatangani);
void updaterowsremoved (dalam baris spesifikasi, dalam hitungan panjang yang tidak ditandatangani);
void updaterowchanged (dalam barisan spesifikasi);
void UpdateColumnChanged (dalam kolom panjang yang tidak ditandatangani);
void updateCellChanged (di baris spesifikasi, di kolom panjang yang tidak ditandatangani);
};
Anda juga dapat menggunakan DOM untuk memuat data secara dinamis di grid. Artinya, Datagrid mungkin tidak berisi anak -anak yang menyediakan data awal. Ini dapat diatur dengan objek DatagridDataProvider (kode 11 datagridDataProvider). Ini memungkinkan data dimuat dari sumber daya apa pun yang dapat diakses oleh database, XMLHTTPREQUEST, atau kode JavaScript.
antarmuka datagridDataProvider {
void initialize (dalam htmldataGridElement datagrid);
GetrowCount Long Long (dalam barisan spesifikasi);
GetChildatPosition Long Unsigned (di Rowspecification Parentrow,
dalam posisi panjang yang tidak ditandatangani);
unsigned long getColumnCount ();
DomString getCaptionText (di kolom panjang yang tidak ditandatangani);
void getCaptionClasses (dalam kolom panjang yang tidak ditandatangani, di kelas DomtokenList);
DomString getrowimage (dalam barisan spesifikasi);
HtmlMenuelement getrowmenu (dalam barisan spesifikasi);
void getRowClasses (dalam barisan spesifikasi, di kelas DomTokenList);
DomString getCellData (di baris rowspecification, di kolom panjang yang tidak ditandatangani);
void getCellClasses (dalam barisan spesifikasi, di kolom panjang yang tidak ditandatangani,
di kelas DomTokenList);
membatalkan toggleColumnsortState (di kolom panjang yang tidak ditandatangani);
void setCellCheckedState (di baris rowspecification, di kolom panjang yang tidak ditandatangani,
dalam keadaan panjang);
void cyclecell (dalam baris spesifikasi, di kolom panjang yang tidak ditandatangani);
void editcell (dalam baris spesifikasi, di kolom panjang yang tidak ditandatangani, dalam data domString);
};
menu dan perintah
Elemen menu sebenarnya muncul di HTML 2. Itu ditinggalkan dalam HTML 4, tetapi HTML 5 memulihkannya dan menentukan makna baru. Dalam HTML 5, menu berisi elemen perintah, setiap elemen perintah melempar operasi. Misalnya, menu kode 12 HTML 5 adalah menu dengan popup kotak peringatan.
<u menu>
<Command OnClick = Alert ('Command First') Label = Do Command 1st/>
<command onClick = alert ('command kedua') label = do command 2nd/>
<Command OnClick = Alert ('Command Third') Label = lakukan perintah ke -3/>
</u menu>
Anda juga dapat menggunakan properti yang diperiksa = diperiksa untuk mengonversi perintah ke kotak centang. Dengan menentukan properti RadioGroup, Anda dapat mengonversi kotak centang ke tombol radio, dan nilai properti ini adalah nama grup dari tombol yang saling eksklusif.
Selain daftar perintah sederhana, Anda juga dapat membuat menu konteks toolbar atau pop-up menggunakan elemen menu, yang memerlukan pengaturan properti Type ke toolbar atau popup. Misalnya, kode 13. HTML 5 Toolbar menampilkan bilah alat yang mirip dengan editor blog seperti WordPress. Ini menggunakan properti Icon untuk menautkan ke gambar tombol.
<type menu = toolbar>
<command onClick = insertTag (tombol, 0); label = ikon kuat = bold.gif/>
<command onClick = insertTag (tombol, 1); Label = EM Icon = Italic.gif/>
<command onClick = insertLink (tombol, 2); label = tautan ikon = link.gif/>
<command onClick = insertTag (tombol, 3); label = ikon b-quote = blockquote.gif/>
<command onClick = insertTag (tombol, 4); label = del ikon = del.gif/>
<command onClick = insertTag (tombol, 5); Label = INS ICON = INSERT.gif/>
<command onClick = insertImage (tombol); Label = IMG ICON = Image.gif/>
<command onClick = insertTag (tombol, 7); Label = UL Icon = Bullet.gif/>
<command onClick = insertTag (tombol, 8); label = ol icon = number.gif/>
<command onClick = insertTag (tombol, 9); Label = Li icon = item.gif/>
<command onClick = insertTag (tombol, 10); label = kode ikon = code.gif/>
<command onClick = insertTag (tombol, 11); Label = CITE ICON = CITE.GIF/>
<command onClick = insertTag (tombol, 12); Label = ABBR ICON = ABBR.GIF/>
<command onClick = insertTag (tombol, 13); label = akronim ikon = acronm.gif/>
</u menu>
Properti Label menyediakan judul menu. Misalnya, kode 14. HTML 5 Edit menu menampilkan menu Edit.
<type menu = label popup = Edit>
<command onClick = undo () label = undo/>
<command onclick = redo () label = redo/>
<command onclick = cut () label = cut/>
<Command OnClick = COPY () Label = Salin/>
<command onclick = pasta () label = pasta/>
<command onClick = delete () label = clear/>
</u menu>
Menu dapat bersarang di menu lain untuk membentuk struktur menu hierarkis.