اختر لونك:
وَقُلِ اعْمَلُوا فَسَيَرَى اللَّهُ عَمَلَكُمْ وَرَسُولُهُ وَالْمُؤْمِنُونَ ۖ وَسَتُرَدُّونَ إِلَىٰ عَالِمِ الْغَيْبِ وَالشَّهَادَةِ فَيُنَبِّئُكُم بِمَا كُنتُمْ تَعْمَلُونَ [ التوبة : ( 105 )] كلمة الإدارة

يرجى إختيار القسم المناسب قبل النشر وسيعاقب المخالف بإنذار أول مرة وسيتم حظره إذا تكرر ذلك كلمة الإدارة

يُمنع كتابة مواضيع السحر والشعوذة والروحانيات والابراج بكافة الأشكال والمخالف سيعاقب بحظر مؤقت وإذا تكرر سيكون حظر دائم تنبيه هام جداً



أضف رد جديد
 
LinkBack أدوات الموضوع انواع عرض الموضوع

قديم 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() وفي داخلها تدور الأحداث :
  • أولا قمنا بإنشاء أربع متغيرات : _width عرض الصورة، _height طول الصورة،_widthw عرض نافذة المتصفح، _heightw طول نافذة المتصفح.
  • ثم قمنا بعمل شرط، وقارننا نسب العرض مقسوم على العرض و الطول على الطول للصورة ونافذة المتصفح وأضفنا الستايل الخاص بنا حسب تحقق الشروط.. هذه مسألة رياضيات ومنطق أكثر من كونها مسألة تقنيات برمجة..
    و لا ننسى إضافة الستايل التالي للصورة المراد جعلها Fullscreen حتى نضمن بقاءها دائما في خلفية الموقع مهما نزلنا أو صعدنا.
.fullbg{ position: fixed; left: 0; top: 0; } /* لا ننسى إضافة الكلاس fullbg إلى وسم الصورة. */
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 باستعمال إضافتنا التي أنشأنها من الصفر.

raheel غير متواجد حالياً   اقتباس
أضف رد جديد


الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)
 

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة
Trackbacks are متاحة
Pingbacks are متاحة
Refbacks are متاحة


المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
معجزات سورة الفاتحة 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


الساعة الآن 11:38 AM

 


Content Relevant URLs by vBSEO ©2010, Crawlability, Inc.