كلمة الإدارة |
كلمة الإدارة |
تنبيه هام جداً |
أضف رد جديد |
07-04-2019, 06:15 PM | #1 |
تاريخ التسجيل: Feb 2019
العمر: 38
المشاركات: 1,149
التقييم: 10
|
تاريخ التسجيل: Feb 2019
العمر: 38
المشاركات: 1,149
التقييم: 10
ما هي طريقة إنشاء إضافة جيكويري تجعل الصورة Fullscreen
في كثير من الأحيان نريد أن نضع صورة img في خلفية الموقع وتكون متوافقة مع أبعاد المتصفح من دون تشويه الصورة الحفاظ على تناسبية أبعادها (الطول والعرض).
هذا لم يكن متاحا فعله باستعمال ال CSS فقط ولهذا وجب تدخل الجافاسكريبت لحل الإشكالية، ومن أجل ذلك قررنا إنشاء إضافة بسيطة لمكتبة الجيكويري تقوم بالمهمة وبهذا نضرب عصفورين بحجر واحد؛ بحيث نتعلم معا كيفية إنشاء إضافات الجيكويري (jQuery plugins) وفي نفس الوقت يكون لدينا سكريبت صغير نستعمله في مشاريعنا الخاصة كلما احتجنا إلى إضافة صورة Fullscreen للموقع. *يمكن استعمال خاصية ال cover:background-size لجعل خلفية عنصر ما تأخذ جميع أبعاد هذا العنصر، ولكن في هذا الدرس سنتكلم عن الصورة وليس background. إنشاء الدالة المجردة Anonymous function أول خطوة هي إنشاء دالة مجردة أو مجهولة إذا صحت الترجمة (Anonymous function) وهي دالة لاتملك أي اسم تقبل بارامتر واحد في حالتنا وهو jQuery الذي يحل محل رمز $ في الدالة (تسمى أيضا closure) وذلك لتجنب أي تعارض مع مكتبات أخرى (إذا تم استدعاؤها في نفس الموقع أو التطبيق) ربما تستخدم رمز $ كذلك. (function($) { //يوضع الكود هنا })(jQuery) 1 2 3 (function($) { //يوضع الكود هنا })(jQuery) إضافة دالة أو Method الإضافة ثم نقوم بإضافة دالة الإضافة (fullBg) إلى أوبجكت الجيكويري : (function($) { $.fn.fullBg = function(){ // الكود هنا. }; })(jQuery) 1 2 3 4 5 6 7 (function($) { $.fn.fullBg = function(){ // الكود هنا. }; })(jQuery) في مكتبة الجيكويري، التعبير $.fn هو نفسه $.prototype ويستعمل عندما نريد إضافة دالة أو Method ل object أو كائن معين في الجافاسكريبت و في حالتنا الأوبجكت هو الجيكويري ($). الرياضيات بعد ذلك نضيف المنطق أو الكود الخاص بإضافتنا كما يلي : (function($) { $.fn.fullBg = function(){ return this.each(function(){ var _this = $(this), _width = _this.width(), _height = _this.height(), _widthw = $(window).width(), _heightw = $(window).height(); if(_width/_widthw > _height/_heightw){ _this.css({ 'height':'100%', 'width':'auto' }); }else{ _this.css({ 'width':'100%', 'height':'auto' }); } }); }; })(jQuery) 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 (function($) { $.fn.fullBg = function(){ return this.each(function(){ var _this = $(this), _width = _this.width(), _height = _this.height(), _widthw = $(window).width(), _heightw = $(window).height(); if(_width/_widthw > _height/_heightw){ _this.css({ 'height':'100%', 'width':'auto' }); }else{ _this.css({ 'width':'100%', 'height':'auto' }); } }); }; })(jQuery) قمنا بتمرير دالة مجردة أخرى (Anonymous function) لدالة الجيكويري each() وفي داخلها تدور الأحداث :
1 2 3 4 5 6 7 8 .fullbg{ position: fixed; left: 0; top: 0; } /* لا ننسى إضافة الكلاس fullbg إلى وسم الصورة. */ في الأخير نقوم باستدعاء الإضافة بعد استدعاء مكتبة الجيكويري طبعا، ونقوم بتطبيقها على الصورة كالتالي : $('.fullbg').fullBg(); 1 $('.fullbg').fullBg(); بحيث fullbg هي كلاس الصورة <img src="test.jpg" class="fullbg" > 1 <img src="test.jpg" class="fullbg" > وهنا تجدون مثالا حياًّ لصورة Fullscreen باستعمال إضافتنا التي أنشأنها من الصفر. المصدر: منتديات رحيل لكل العرب - من قسم: قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress |
اقتباس |
أضف رد جديد |
الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1) | |
|
|
المواضيع المتشابهه | ||||
الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
معجزات سورة الفاتحة | admin | قسم القرآن الكريم | 1 | 28-07-2019 04:23 AM |
إنشاء مجتمع باستخدام ووردبريس مُتعدّد المواقع | مهرة النجدية | قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress | 1 | 22-07-2019 07:19 PM |
خمس طرائق لإجراء تعديلات على قالب Twenty Seventeen في ووردبريس | مهرة النجدية | قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress | 1 | 22-07-2019 07:12 PM |
إنشاء مجتمع باستخدام ووردبريس مُتعدّد المواقع | مهرة النجدية | قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress | 1 | 22-07-2019 07:02 PM |
طرق كسب المال عبر الإنترنت باستخدام ووردبريس | raheel | قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress | 0 | 27-03-2019 07:04 PM |