تقدم هذه المقالة بشكل أساسي استخدام تأثيرات تبديل الصفحات المختلفة ومربعات الحوار الوسيطة لك. يقدم تقنيات استخدام عناصر الصفحات المختلفة من HTML5 بمزيد من التفصيل. إنه عملي للغاية. يمكن للأصدقاء الذين يحتاجون إليها الرجوع إليها.
تلخص هذه المقالة تأثيرات تبديل الصفحات المختلفة واستخدام الحوار الوسيط لـ HTML5 بالتفصيل. شاركه للرجوع إليه. التحليل المحدد هو كما يلي:
الرسوم المتحركة الصفحة :يمكن لخاصية نقل البيانات تحديد تأثير الرسوم المتحركة لتبديل الصفحة.
على سبيل المثال: <a href = index.html data transition = pop> سأبثق </a>
جدول معلمة نقل البيانات:
وصف المعلمة
انزلاق من اليمين إلى اليسار إلى الصفحة
Slideup ينزلق من القاع
ينزل المنزل من أعلى إلى أسفل في
يتوسع البوب تدريجياً من المركز
يتلاشى تدريجيا
قلب الوجه
ملاحظة: إذا كنت ترغب في عرض زر العودة في صفحة الهدف ، فيمكنك إضافة اتجاه البيانات = السمة العكسية إلى الرابط. هذه السمة هي نفس ظهور البيانات الأصلي = صحيح. لا أعرف أي السمة التي سيتم الاحتفاظ بها في الإصدار الرسمي.
مربع الحوار الوسيطمربع الحوار الوسيط هو طبقة عائمة الزائفة مع شريط عنوان مستدير وزر إغلاق للأحداث الحصرية. يمكن استخدام أي صفحة منظمة لتنفيذ تطبيقات مربع الحوار الوسيطة باستخدام رابط مربع الحوار Data-Rel =.
على سبيل المثال: <a href = foo.html data-rel = dialog> فتح مربع حوار افتح </a>
يمكن أن تستخدم تأثير تبديل هذه الصفحة تأثير معلمة نقل البيانات للصفحة القياسية. يوصى باستخدام المعلمات البوب والانزلاق والوجه لتحقيق نتائج أفضل.
سيقوم مربع الحوار الوسيط هذا بإنشاء زر إغلاق افتراضيًا ، والذي يتم استخدامه للعودة إلى الصفحة الأصل. على الأجهزة ذات إمكانات البرمجة النصية الضعيفة ، يمكنك أيضًا إضافة رابط باستخدام Data-Rel = مرة أخرى لتنفيذ زر الإغلاق.
بالنسبة للأجهزة التي تدعم البرامج النصية ، يمكنك استخدام HREF =# أو Data-Rel = مرة أخرى لتحقيق إيقاف التشغيل. يمكنك أيضًا استخدام طريقة الإغلاق المدمجة لإغلاق مربع الحوار الوسيط ، مثل: $ ('. ui-dialog'). مربع الحوار ("إغلاق").
نظرًا لأن مربع الحوار الوسيط عبارة عن صفحة مؤقتة يتم عرضها ديناميكيًا ، فلن يتم حفظ هذه الصفحة في جدول التجزئة ، مما يعني أنه لا يمكننا التراجع إلى هذه الصفحة. على سبيل المثال ، إذا قمت بالنقر فوق رابط في الصفحة A لفتح مربع الحوار B ، يتم الانتهاء من العملية وإغلاق مربع الحوار ، ثم القفز إلى الصفحة C. في هذا الوقت ، يمكنك النقر فوق الزر مرة أخرى للمتصفح ، وستعود إلى الصفحة A ، وليس الصفحة B.
شريط الأدواتتُستخدم أشرطة الأدوات بشكل أساسي في الرأس والتذييل وغيرها من المناطق ، وتستخدم لدعم وتنفيذ تطبيق وظائف العمل في الصفحة. يوفر JQuery Mobile حلًا كاملاً نسبيًا.
ينقسم شريط الأدوات إلى ثلاثة تطبيقات: شريط رأس ، شريط تذييل والملاحة (NAV BAR).
من بينها ، يتم تطبيق العنوان والتذييل بطرق مختلفة في الصفحة. يتم وضع شريط الأدوات الافتراضي بطريقة مضمنة. يمكن أن تحقق طريقة تحديد المواقع هذه أقصى قدر من التوافق ، بما في ذلك التحسين الجيد للأجهزة ذات السيناريو السيئ وتوافق CSS.
طريقة أخرى هي إصلاحها ، والتي يمكن أن تكون ثابتة أيضًا. تتيح طريقة تحديد المواقع هذه أن يتم الحفاظ على شريط الأدوات دائمًا في الجزء العلوي أو أسفل الشاشة. ويمكنك قبول النقر فوق أحداث عرض/إخفاء شريط الأدوات ، الذي حقق هدف تعظيم استخدام مساحة الشاشة.
طريقة التنفيذ: أضف موقع البيانات = سمة ثابتة إلى مناطق العنوان والتذييل.
حاوية العنوانحاوية العنوان عبارة عن عنصر تحكم في العرض لمنطقة رأس الصفحة ، والتي تستخدم بشكل أساسي لعرض العنوان ومنطقة التشغيل الرئيسية.
رمز الهيكل:
انسخ الرمز