من احدى هواياتي المفضلة التي أتمنى ان تكتسبها حتى و لو كنت لا تختص بعالم تصميم المواقع مثلي, أن تتصفح دائماً جديد ابتكارات هذا المجال عبر أسواق بيع الثيمات Themes المشهورة في العالم كـ Themeforset و woothemes و Themefuse.
و ان كنت بالفعل من مهتمي تصفح الجديد عبر هذه الأسواق, فلا بد انك لاحظت منذ حوالي السنة تكرار نموذج تصميم لاقى القبول لدى الزبائن, خاصة اولئك الباحثين عن التصميمات من النوع Responsive themes أو التي يتناسب حجمها طبقاً لمقاس شاشة التصفح لدى المستخدم أو حجم المتصفح نفسه.
هذه الاضافة تأتي لمربعات عرض المواضيع أو الصور, و وظيفتها تعيين عدد المربعات في كل صف تلقائياً حسب عرض المتصفح, و اعادة ترتيب المربعات في حالة اعادة تعيين حجم المتصفح. حاول مثلاً أن تزور هذا الموقع, و تحاول أن تغير حجم المتصفح لديك, و كلما غيرت أبعاد المتصفح, ستلاحظ أن المربعات يتم اعادة ترتيبها تلقائياً كل مرة, لتصبح Responsive دائماً.
ربما يكون هناك العديد من الاضافات Javascript ألمختصة بهذه الحيلة, لكن أقواها على الاطلاق في رأيي, هي اضافة Isotope التي رأيت أستخداماها في العديد من المتصفحات الاحترافية خاصة في متجر Themeforest.
الاضافة تتميز انها تتبع رخصة MIT مجانية بالنسبة للمطورين الفرديين, و كما أنها تأتي تحت رخصة تجارية للمطورين الراغبين استخدامها في مشاريعهم التجارية فقط بـ25 دولار أمريكي. في رأيي انها صفقة رابحة للغاية.
لتحميل الاضافة معززة بعدد من الأمثلة الحية من هنا
في الـ Head ابدأ باضافة هذه الملفات عبر الكود
|
1 2 3 4 |
<head> <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <link rel="stylesheet" href="../css/style.css" /> </head> |
في الـ body, ابدأ باضافة مربعات المحتوى داخل div مخصصة للتطبيق عليها بالكامل, مثال :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<div id="container"> <div class="element other nonmetal " data-symbol="H" data-category="other"> <p class="number">1</p> <h3 class="symbol">H</h3> <h2 class="name">Hydrogen</h2> <p class="weight">1.00794</p> </div> <div class="element noble-gas nonmetal " data-symbol="He" data-category="noble-gas"> <p class="number">2</p> <h3 class="symbol">He</h3> <h2 class="name">Helium</h2> <p class="weight">4.002602</p> </div> <div class="element alkali metal " data-symbol="Li" data-category="alkali"> <p class="number">3</p> <h3 class="symbol">Li</h3> <h2 class="name">Lithium</h2> <p class="weight">6.941</p> </div> <div class="element alkaline-earth metal " data-symbol="Be" data-category="alkaline-earth"> <p class="number">4</p> <h3 class="symbol">Be</h3> <h2 class="name">Beryllium</h2> <p class="weight">9.012182</p> </div> </div> |
و في نهاية الـ body, سنضيف ملفات js حسب الكود
|
1 2 |
<script src="../js/jquery-1.7.1.min.js"></script> <script src="../jquery.isotope.min.js"></script> |
و من ثم نصبح قادرين على استخدام دالة isotope مباشرة على الـ div المحتوية على المربعات, حسب الكود
|
1 2 3 4 5 6 7 |
<script> $(function(){ $('#container').isotope({ itemSelector: '.element' }); }); </script> |
كما يمكنك من خلال المجلد demos, رؤية العديد من الامثلة الحية لاستخدام الاضافة, أو توجه الى المجلد docs لتحصل على دليل استخدام كامل للاضافة
أتمنى ان تحظى الاضافة على اعجابكم, و نتمنى ان ننال شرف كتابة مقال عن اضافة أفضل من هذه بيد تطوير عربية عما قريب. في الانتظار.
رائعه, أحسنت يا أبو بكر
انتظر جديدك.
تسلم ايدك يا ابو بكر, بس ليه مجبتش سيرة موقع starware.net كمثال حى انضف من الموقع اللى انت حطيته ده 🙂