تصميم الصفحة الخاصة بك حول الموضوع من واجهة المستخدم على jQuery

الافراج عن واجهة jQuery 1.5 جلب معه Themeroller ، وهي طريقة سريعة وسهلة لتخصيص وتحميل مجموعة من الحاجيات "jQuery" لاستخدامها على صفحة على شبكة الإنترنت.

مجرد اختيار من بينها واحدة من قبل بني الموضوعات ، أو ضبط الإعدادات الخاصة ترضيك وتنزيل هذا الموضوع. التحميل سوف تشمل جميع الملفات الضرورية لجميع هذه الحاجيات في العمل ، وملف عرض مع كل منهم على صفحة واحدة.

في الواقع ، يمكن لهذه بنيت قبل موضوع خدمتك كذلك نقطة انطلاق لتصميم جديد. دعونا التلاعب تحميل الموضوع الأساسي في موقع على شبكة الانترنت باستخدام علامات الجدولة وAccordian.

تنظيف البيت

نحن نذهب الى استخدام القطعة التبويبات لمنطقتنا المحتوى الرئيسي للموقع ، وعلى الأكورديون لالجانبي. خطوة أولى جيدة سيكون للحصول على مجلد المنظمة ومن ثم بدء إزالة رمز اضافي من هتمل والمغلق الملفات.

لقد بدأت من خلال إعادة تسمية الملف إلى demo.html index.html والملف المغلق لstyle.css.

ثم انني إزالة جميع المغلق من الملف المغلق الذي كان يفعل مع أي شيء آخر سوى علامات الجدولة والأكورديون. هناك الكثير من الغبار المتراكم تحت السرير الاضافي في الملف الافتراضي المغلق ، بما في ذلك إعادة تعيين على طن من العناصر التي لا تحتاج حقا أنه إذا كنت تستخدم لإعادة تعيين العالمية. تنظيف المنزل عند وسوف هنا.

ثم تفعل الشيء نفسه في ملف أتش تي أم أل ، وإزالة كافة التعليمات البرمجية التي ليست الهيكل الأساسي أو جزء من علامات أو الأكورديون. هنا هو ما يشبه صفحتي بعد عملية التنظيف :

هيكل

التبويبات معنى جيدة لاستخدام كمنطقة المحتوى الرئيسي للموقع. كل واحدة من علامات يمكن أن تكون أساسا منطقة مختلفة من الموقع. بادئ ذي بدء ، وتسمح للالتفاف على الموقع بأكمله في div بمعرف من صفحة التفاف حتى نتمكن من ذلك المركز وتعيين عرض ثابت. منذ ذلك الحين كل من علامات التبويب والأكورديون بالفعل في التفاف div ، يمكننا هدف لهم المغلق ، بعرض مجموعة ثابتة وتعويم القادرين منهم على أي من الجانبين. هذا هو ما المغلق قد تبدو مثل :

#page-wrap { width: 900px; margin: 0 auto; } #accordion { width: 280px; float: right; } #tabs { width: 600px; float: left; } 

الآن هي علامات على اتخاذ المزيد من نظرة المحتوى الرئيسي والأكورديون يشبه الشريط الجانبي. كل علامة لا يمكن أن تعمل مثل الفرع مختلفة من الموقع ، إلا انها وسيلة باردة جدا دينامية للقيام بذلك منذ صفحات التحول سيتطلب أي تحميل الصفحة على الإطلاق!

هنا هو ما يشبه صفحتي بعد قليل من إعادة الهيكلة :

بلورة مضمون

دعنا أن المحتوى الافتراضي للخروج من هناك والبدء في توصيل الاشياء الخاصة في منطقتنا. حسنا ، هذا ما زال تجريبي فأترك معظم الاشياء التي أبجد هوز... ولكن الآن بعد أن نلقي نظرة أنا إرم في الرسومات القليلة المساعد وبعض المحتوى أكثر واقعية :

النهائي

ان الموقع كله استغرق حوالي 20 دقيقة لرمي معا. انه ليس تحفة بأي وسيلة ، لكنها بداية جيدة على جميلة ونظيفة تبحث في الموقع. وغني عن لاظهار مدى السرعة التي يمكنك الحصول عليها بدأت في بناء صفحات الويب ، وحتى بعد أن تبرد وظيفة ديناميكية من خلال jQuery وthemeroller واجهة المستخدم.

عرض الفيلم

تحميل ملفات