التعليق: يُعرف HTML 5 أيضًا باسم تطبيقات الويب 1.0. لتحقيق هذا الهدف ، تتم إضافة العديد من العناصر الجديدة لتوفير تجارب تفاعلية لصفحات الويب: تفاصيل قائمة بيانات DATAGRID يمكن أن تستند هذه العناصر إلى المستخدم
يُعرف HTML 5 أيضًا باسم Web Applications 1.0. لتحقيق ذلك ، تتم إضافة العديد من العناصر الجديدة لتوفير تجارب تفاعلية لصفحات الويب:
تفاصيل
DataGrid
قائمة طعام
يأمر
يمكن أن تغير جميع العناصر المحتوى المعروض استنادًا إلى إجراءات المستخدم وتحديدات المستخدم دون تحميل صفحة جديدة من الخادم.
تفاصيل
يمثل عنصر التفاصيل التفاصيل التي قد لا يتم عرضها افتراضيًا. يمكن لعنصر الأسطورة الاختياري أن يوفر ملخصًا للتفاصيل.
أحد استخدامات عنصر التفاصيل هو توفير الحواشي والتعليقات النهائية. على سبيل المثال:
تبلغ فاتورة مرجى مرجلي حوالي 10 ٪ أرق
من فاتورة مرخى زانتوس.
<vidence>
<Legend> [Sibley ، 2000] </Legend>
<p> Sibley ، David Allen ، دليل Sibley للطيور ،
(نيويورك: مطبعة Chanticleer ، 2000) ص. 247
</p>
</تفاصيل>
لا يتم تحديد طريقة عرض محددة. يمكن للمتصفح اختيار الحواشي والتعليقات النهائية وتلميحات الأدوات.
يمكن أن يكون لكل عنصر تفاصيل خاصية مفتوحة. إذا تم تعيين هذه الخاصية ، يتم عرض التفاصيل في البداية. إذا لم يتم تعيين هذه الخاصية ، فسيتم إخفاؤها حتى يطلب من المستخدم عرضها. في كلتا الحالتين ، يمكن للمستخدمين عرض التفاصيل أو إخفاءها بالنقر فوق أيقونة أو عنصر تحكم آخر.
DataGrid
يوفر عنصر DataGrid عنصر تحكم الشبكة. يمكن استخدامه لعرض الأشجار والقوائم والجداول ، ويمكن للمستخدمين والبرامج النصية تحديث عناصر الواجهة هذه. في المقابل ، يتم استخدام الجداول التقليدية بشكل أساسي لعرض بيانات ثابتة.
يحصل DataGrid على البيانات الأولية من محتواه (جدول أو تحديد أو عنصر HTML آخر). على سبيل المثال ، يحتوي DataGrid في الرمز 9 على ورقة نقاط. في هذا المثال ، تأتي بيانات DataGrid من جدول. يمكن أن تحصل DataGrid 1D البسيطة على بيانات من العنصر المحدد. إذا كنت تستخدم عناصر HTML أخرى ، يصبح كل عنصر طفل صفًا في الشبكة.
<datagrid>
<griding>
<tr> <td> jones </td> <td> Allison </td> <td> a-</td> <td> b </td> <td> a </td> </td>
<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> </td>
<tr> <td> Wilson </td> <td> Frank </td> <td> b-</td> <td> b </td> <td> b </td> <td> a </td> </td>
</table>
</dataGrid>
الفرق بين هذا العنصر والجدول العادي هو أنه يمكن للمستخدمين اختيار الصفوف والأعمدة والخلايا ؛ صفوف الانهيار والأعمدة والخلايا ؛ تحرير الخلايا. حذف الصفوف والأعمدة والخلايا ؛ فرز الشبكات وتنفيذ عمليات بيانات أخرى مباشرة في متصفح العميل. يمكنك استخدام رمز JavaScript لمراقبة التحديثات. تتم إضافة واجهة htmldatagridelement إلى نموذج كائن المستند (DOM) لدعم هذا العنصر (الكود 10 htmldatagridelement).
واجهة htmldatagridelement: htmlelement {
سمة datagriddataprovider بيانات ؛
قرص datagridselection سمة القراءة ؛
ميزة منطقية متعددة ؛
ميزة تعطيل منطقية.
باطل تحديث () ؛
void updaterowschanged (في صف Rowspecification ، في عدد طويل غير موقّع) ؛
updaterowsinserted void (في صف Rowspecification ، في عدد طويل غير موقّع) ؛
Void UpdaterOwsRemoved (في صف Rowspecification ، في عدد طويل غير موقّع) ؛
updaterowChanged void (في صف Rowspecification) ؛
void updateColumnChanged (في العمود الطويل غير الموقّع) ؛
void updateCellChanged (في صف Rowspecification ، في العمود الطويل غير الموقّع) ؛
} ؛
يمكنك أيضًا استخدام DOM لتحميل البيانات ديناميكيًا في الشبكة. أي أن DataGrid قد لا يحتوي على أطفال يقدمون البيانات الأولية. يمكن تعيينه باستخدام كائن datagriddataprovider (رمز 11 datagriddataprovider). يتيح ذلك تحميل البيانات من أي مورد يمكن الوصول إليه بواسطة قاعدة البيانات أو XMLHTTPrequest أو JavaScript.
واجهة DataGridDataprovider {
تهيئة باطلة (في datagrid htmldatagridelement) ؛
GetRowCount Long غير موقعة (في صف Rowspecification) ؛
GetChildatposition طويلة غير موقعة (في Rowspecifice Parentrow ،
في وضع طويل غير موقّع) ؛
غير موقعة طويلة getColumnCount () ؛
domstring getCaptionText (في العمود الطويل غير الموقّع) ؛
void getCaptionClasses (في العمود الطويل غير الموقّع ، في فئات DomTokenList) ؛
domstring getRowimage (في صف Rowspecification) ؛
htmlmenuelement getRowmenu (في صف Rowspecification) ؛
void getRowClasses (في صف Rowspecification ، في فئات DomTokenList) ؛
domstring getCellData (في صف Rowspecification ، في العمود الطويل غير الموقّع) ؛
الفراغ getCellclasses (في صف Rowspecifice ، في عمود طويل غير موقّع ،
في فصول DomTokenList) ؛
void toggleColumnSortState (في العمود الطويل غير الموقّع) ؛
void setCellCheckedState (في صف Rowspecifice ، في عمود طويل غير موقّع ،
في حالة طويلة) ؛
cyclecell void (في صف Rowspecification ، في العمود الطويل غير الموقّع) ؛
void editcell (في صف Rowspecification ، في العمود الطويل غير الموقّع ، في بيانات domstring) ؛
} ؛
القائمة والأمر
يظهر عنصر القائمة بالفعل في HTML 2. تم التخلي عنه في HTML 4 ، ولكن HTML 5 استعادته وحدد معنى جديد. في HTML 5 ، تحتوي القائمة على عنصر الأوامر ، يرمي كل عنصر أمر. على سبيل المثال ، قائمة الكود 12 HTML 5 هي قائمة مع صندوق تحذير منبثق.
<Mence>
<command onClick = ALERT ('first command') label = do 1st command/>
<command onClick = ALERT ('command') label = do 2nd command/>
<command onClick = ALERT ('command') label = do 3rd command/>
</menu>
يمكنك أيضًا استخدام الخاصية المحددة = فحصها لتحويل الأمر إلى مربع الاختيار. من خلال تحديد خاصية RadiOgroup ، يمكنك تحويل خانة الاختيار إلى زر راديو ، وقيمة هذه الخاصية هي اسم مجموعة الزر الحصري المتبادل.
بالإضافة إلى قائمة أوامر بسيطة ، يمكنك أيضًا إنشاء شريط أدوات أو قائمة سياق منبثقة باستخدام عنصر القائمة ، والذي يتطلب إعداد خاصية النوع على شريط الأدوات أو المنبثقة. على سبيل المثال ، يعرض الكود 13. شريط أدوات HTML 5 شريط أدوات مشابه لمحرري المدونات مثل WordPress. يستخدم خاصية Icon لربط صورة الزر.
<نوع القائمة = شريط الأدوات>
<command onClick = insertTag (buttons ، 0) ؛ Label = chicon Strong = Bold.gif/>
<command onClick = insertTag (buttons ، 1) ؛ label = em icon = italic.gif/>
<command onClick = insertLink (buttons ، 2) ؛ Label = Link icon = link.gif/>
<command onClick = insertTag (buttons ، 3) ؛ Label = B-Quote Icon = blockquote.gif/>
<command onClick = insertTag (buttons ، 4) ؛ label = del icon = del.gif/>
<command onClick = insertTag (buttons ، 5) ؛ label = ins icon = insert.gif/>
<command onClick = insertimage (buttons) ؛ Label = IMG icon = image.gif/>
<command onClick = insertTag (buttons ، 7) ؛ label = ul icon = bullet.gif/>
<command onClick = insertTag (buttons ، 8) ؛ Label = ol icon = number.gif/>
<command onClick = insertTag (buttons ، 9) ؛ label = li icon = item.gif/>
<command onClick = insertTag (buttons ، 10) ؛ label = رمز أيقونة = code.gif/>
<command onClick = insertTag (buttons ، 11) ؛ label = icite icon = cite.gif/>
<command onClick = insertTag (buttons ، 12) ؛ label = abbr icon = abbr.gif/>
<command onClick = insertTag (buttons ، 13) ؛ Label = adlowic icon = acronym.gif/>
</menu>
توفر خاصية التسمية عنوان القائمة. على سبيل المثال ، يعرض الكود 14. HTML 5 قائمة تحرير قائمة تحرير.
<menu type = popup label = edit>
<command onClick = undo () label = undo/>
<command OnClick = Redo () label = redo/>
<command onClick = cut () label = cut/>
<command OnClick = copy () label = copy/>
<command onClick = paste () label = paste/>
<command onClick = delete () label = clear/>
</menu>
يمكن تداخل القائمة في قوائم أخرى لتشكيل بنية قائمة هرمية.