ความคิดเห็น: HTML 5 เรียกว่าเว็บแอปพลิเคชัน 1.0 เพื่อให้บรรลุเป้าหมายนี้มีการเพิ่มองค์ประกอบใหม่หลายอย่างเพื่อให้ประสบการณ์แบบโต้ตอบสำหรับหน้าเว็บ: รายละเอียดคำสั่งเมนู DataGrid องค์ประกอบเหล่านี้สามารถขึ้นอยู่กับผู้ใช้
HTML 5 เป็นที่รู้จักกันว่าเว็บแอปพลิเคชัน 1.0 เพื่อให้บรรลุเป้าหมายนี้มีการเพิ่มองค์ประกอบใหม่หลายอย่างเพื่อมอบประสบการณ์การโต้ตอบสำหรับหน้าเว็บ:
รายละเอียด
สิ่งที่ระบุไว้
เมนู
สั่งการ
องค์ประกอบเหล่านี้สามารถเปลี่ยนเนื้อหาที่แสดงตามการกระทำของผู้ใช้และการเลือกโดยไม่ต้องโหลดหน้าใหม่จากเซิร์ฟเวอร์
รายละเอียด
องค์ประกอบรายละเอียดแสดงรายละเอียดที่อาจไม่แสดงโดยค่าเริ่มต้น องค์ประกอบตำนานเสริมสามารถให้ข้อมูลสรุปของรายละเอียด
หนึ่งในการใช้องค์ประกอบรายละเอียดคือการจัดหาเชิงอรรถและจุดสิ้นสุด ตัวอย่างเช่น:
บิลของ murlet ของ Craveri นั้นบางลงประมาณ 10%
กว่าบิลของเมอร์เร็ตของ Xantus
<betice>
<Sorgend> [Sibley, 2000] </legend>
<p> Sibley, David Allen, Sibley Guide to Birds,
(นิวยอร์ก: Chanticleer Press, 2000) p. 247
</p>
</รายละเอียด>
ไม่ได้ระบุวิธีการแสดงผลเฉพาะ เบราว์เซอร์สามารถเลือกเชิงอรรถ endnotes และคำแนะนำเครื่องมือ
แต่ละองค์ประกอบรายละเอียดสามารถมีคุณสมบัติแบบเปิด หากตั้งค่าคุณสมบัตินี้รายละเอียดจะปรากฏขึ้นในขั้นต้น หากคุณสมบัตินี้ไม่ได้ตั้งค่าไว้พวกเขาจะถูกซ่อนไว้จนกว่าผู้ใช้จะขอให้พวกเขาแสดง ไม่ว่าในกรณีใดผู้ใช้สามารถแสดงหรือซ่อนรายละเอียดได้โดยคลิกที่ไอคอนหรือตัวควบคุมอื่น ๆ
สิ่งที่ระบุไว้
องค์ประกอบ DataGrid ให้การควบคุมกริด สามารถใช้เพื่อแสดงต้นไม้รายการและตารางและผู้ใช้และสคริปต์สามารถอัปเดตองค์ประกอบอินเทอร์เฟซเหล่านี้ได้ ในทางตรงกันข้ามตารางแบบดั้งเดิมส่วนใหญ่จะใช้เพื่อแสดงข้อมูลคงที่
DataGrid ได้รับข้อมูลเริ่มต้นจากเนื้อหา (ตารางเลือกหรือองค์ประกอบ HTML อื่น ๆ ) ตัวอย่างเช่น DataGrid ในรหัส 9 มีแผ่นคะแนน ในตัวอย่างนี้ข้อมูลของ DataGrid มาจากตาราง DataGrid 1D ที่ง่ายกว่าสามารถรับข้อมูลจากองค์ประกอบที่เลือกได้ หากคุณใช้องค์ประกอบ HTML อื่น ๆ องค์ประกอบของเด็กแต่ละคนจะกลายเป็นแถวในกริด
<dataGrid>
<table>
<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> วิลลิส </td> <td> ซิดนีย์ </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>
</table>
</dataGrid>
ความแตกต่างระหว่างองค์ประกอบนี้และตารางปกติคือผู้ใช้สามารถเลือกแถวคอลัมน์และเซลล์ การยุบแถวคอลัมน์และเซลล์; แก้ไขเซลล์; ลบแถวคอลัมน์และเซลล์ จัดเรียงกริด; และดำเนินการข้อมูลอื่น ๆ โดยตรงในเบราว์เซอร์ไคลเอนต์ คุณสามารถใช้รหัส JavaScript เพื่อตรวจสอบการอัปเดต อินเทอร์เฟซ HTMLDATAGRIDELEMENT ถูกเพิ่มลงในโมเดลวัตถุเอกสาร (DOM) เพื่อรองรับองค์ประกอบนี้ (รหัส 10 HTMLDATAGRIDELEMENT)
อินเตอร์เฟส htmldatagridelement: htmlelement {
ข้อมูล DataGridDataprovider;
การเลือก DataGridSelection แบบอ่านอย่างเดียว
แอตทริบิวต์บูลีนหลายตัว;
แอตทริบิวต์บูลีนปิดใช้งาน;
เป็นโมฆะ UpdateSideverything ();
เป็นโมฆะ updaterowsChanged (ในแถว rowspecification ในการนับยาวที่ไม่ได้ลงชื่อ);
เป็นโมฆะ updaterowsIstred (ในแถว rowspecification ในการนับยาวที่ไม่ได้ลงชื่อ);
เป็นโมฆะ updaterowsremoved (ในแถว rowspecification ในการนับยาวที่ไม่ได้ลงชื่อ);
เป็นโมฆะ updaterOwChanged (ในแถวแถว);
โมฆะ updateColumnChanged (ในคอลัมน์ยาวที่ไม่ได้ลงชื่อ);
เป็นโมฆะ updateCellChanged (ในแถว rowspecification ในคอลัมน์ยาวที่ไม่ได้ลงชื่อ);
-
คุณยังสามารถใช้ DOM เพื่อโหลดข้อมูลแบบไดนามิกในกริด นั่นคือ DataGrid อาจไม่มีเด็กที่ให้ข้อมูลเริ่มต้น สามารถตั้งค่าได้ด้วยวัตถุ DataGridDataprovider (รหัส 11 DataGridDataprovider) สิ่งนี้ช่วยให้ข้อมูลสามารถโหลดได้จากทรัพยากรใด ๆ ที่สามารถเข้าถึงได้โดยฐานข้อมูล XMLHTTPREQUEST หรือรหัส JavaScript
อินเตอร์เฟส dataGridDataprovider {
เป็นโมฆะเริ่มต้น (ใน htmldataGridelement dataGrid);
GetRowCount ที่ไม่ได้ลงนามยาว (ในแถว Rowspecification);
GetChildatposition ที่ไม่ได้ลงชื่อ (ใน Rowspecification Parentrow
อยู่ในตำแหน่งที่ไม่ได้ลงชื่อ);
GetColumnCount () ที่ไม่ได้ลงนามนาน ();
domstring getCaptionText (ในคอลัมน์ยาวที่ไม่ได้ลงชื่อ);
เป็นโมฆะ getCaptionClasses (ในคอลัมน์ยาวที่ไม่ได้ลงชื่อในคลาส DomtokenList);
Domstring getRowimage (ในแถว rowspecification);
HTMLMENUELEMENT GETROWMENU (ในแถวแถว);
เป็นโมฆะ getrowclasses (ในแถว rowspecification ในคลาส domtokenlist);
Domstring getcelldata (ในแถว rowspecification ในคอลัมน์ยาวที่ไม่ได้ลงนาม);
เป็นโมฆะ getcellclasses (ในแถวแถวในคอลัมน์ยาวที่ไม่ได้ลงชื่อ
ในชั้นเรียน DomtokenList);
เป็นโมฆะ Togglecolumnsortstate (ในคอลัมน์ยาวที่ไม่ได้ลงชื่อ);
เป็นโมฆะ SetCellCheckedState (ในแถว Rowspecification ในคอลัมน์ยาวที่ไม่ได้ลงนาม
ในสถานะยาว);
โมฆะ cyclecell (ในแถวแถวในคอลัมน์ยาวที่ไม่ได้ลงชื่อ);
เป็นโมฆะ editcell (ในแถว rowspecification ในคอลัมน์ยาวที่ไม่ได้ลงชื่อในข้อมูล domstring);
-
เมนูและคำสั่ง
องค์ประกอบเมนูปรากฏขึ้นจริงใน HTML 2 มันถูกทิ้งไว้ใน HTML 4 แต่ HTML 5 ได้รับการคืนค่าและระบุความหมายใหม่ ใน HTML 5 เมนูประกอบด้วยองค์ประกอบคำสั่งแต่ละองค์ประกอบคำสั่งจะส่งการดำเนินการ ตัวอย่างเช่นเมนูรหัส 12 HTML 5 เป็นเมนูพร้อมป๊อปอัพกล่องเตือน
<เมนู>
<คำสั่ง onClick = Alert ('คำสั่งแรก') label = ทำคำสั่งที่ 1/>>
<คำสั่ง onClick = Alert ('คำสั่งที่สอง') label = ทำคำสั่ง 2nd/>>
<คำสั่ง onClick = การแจ้งเตือน ('คำสั่งที่สาม') label = ทำคำสั่ง 3rd/>>
</เมนู>
คุณยังสามารถใช้คุณสมบัติตรวจสอบ = ตรวจสอบเพื่อแปลงคำสั่งเป็นช่องทำเครื่องหมาย โดยการระบุคุณสมบัติ Radiogroup คุณสามารถแปลงช่องทำเครื่องหมายเป็นปุ่มตัวเลือกและค่าของคุณสมบัตินี้คือชื่อกลุ่มของปุ่มพิเศษร่วมกัน
นอกเหนือจากรายการคำสั่งอย่างง่ายคุณยังสามารถสร้างแถบเครื่องมือหรือเมนูบริบทป๊อปอัพโดยใช้องค์ประกอบเมนูซึ่งต้องตั้งค่าคุณสมบัติประเภทเป็นแถบเครื่องมือหรือป๊อปอัพ ตัวอย่างเช่นรหัส 13 แถบเครื่องมือ HTML 5 แสดงแถบเครื่องมือคล้ายกับตัวแก้ไขบล็อกเช่น WordPress มันใช้คุณสมบัติไอคอนเพื่อเชื่อมโยงไปยังรูปภาพของปุ่ม
<เมนูประเภท = แถบเครื่องมือ>
<คำสั่ง onclick = insertTag (ปุ่ม, 0); label = strong icon = bold.gif/>
<คำสั่ง onclick = insertTag (ปุ่ม, 1); label = em icon = italic.gif/>
<คำสั่ง onClick = insertLink (ปุ่ม 2); label = link icon = link.gif/>
<คำสั่ง onClick = insertTag (ปุ่ม, 3); label = b-quote icon = blockquote.gif/>
<คำสั่ง onclick = insertTag (ปุ่ม, 4); label = del icon = del.gif/>
<คำสั่ง onclick = insertTag (ปุ่ม, 5); label = Icon ins = insert.gif/>
<คำสั่ง onClick = insertImage (ปุ่ม); label = img icon = image.gif/>
<คำสั่ง onclick = insertTag (ปุ่ม, 7); label = ul icon = bullet.gif/>
<คำสั่ง onclick = insertTag (ปุ่ม, 8); label = ol icon = number.gif/>
<คำสั่ง onclick = insertTag (ปุ่ม, 9); LABEL = LI ICON = item.gif/>
<คำสั่ง onclick = insertTag (ปุ่ม, 10); label = code icon = code.gif/>
<คำสั่ง onclick = insertTag (ปุ่ม, 11); label = cite icon = cite.gif/>
<คำสั่ง onclick = insertTag (ปุ่ม, 12); label = abbr icon = abbr.gif/>
<คำสั่ง onclick = insertTag (ปุ่ม, 13); LABEL = ACRONYM ICON = ACRONYM.GIF/>
</เมนู>
คุณสมบัติฉลากให้ชื่อของเมนู ตัวอย่างเช่นรหัส 14. เมนูแก้ไข HTML 5 แสดงเมนูแก้ไข
<เมนูประเภท = ฉลากป๊อปอัพ = แก้ไข>
<คำสั่ง onclick = undo () label = undo/>
<คำสั่ง onclick = redo () label = redo/>
<คำสั่ง onclick = cut () label = cut/>
<คำสั่ง onclick = copy () label = copy/>
<คำสั่ง onclick = paste () label = paste/>
<คำสั่ง onclick = delete () label = clear/>
</เมนู>
เมนูสามารถซ้อนกันในเมนูอื่น ๆ เพื่อสร้างโครงสร้างเมนูแบบลำดับชั้น