شرح تكبير و تصغير الخطوط باستخدام jquery بالتفصيل + مثال

[raptor tech]

بسم الله الرحمن الرحيم
نبدأ اليوم فى سلسلة الدروس المتميزة للمكتبة الرائعة jquery
درس اليوم هو كيفية التحكم فى حجم الخط الموجود بالصفحة ( تكبير - و تصغير )

اهداء من الأكاديمية العربية للتصميم و برمجة تطبيقات الانترنت

مثال على الدرس

رابط الموضوع على موقع الأكاديمية


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

متطلبات الدرس :

محرر اكواد - مكتبة jquery احصل عليها من الموقع الرسمى((( رابط ) رابط ) رابط ) (( رابط ) رابط ) ( رابط ) http://jquery.com/

سوف ينقسم الدرس الى ثلاثة مراحل تتوقف على نوع اللغات المستخدمة و فى درسنا اليوم سوف نستخدم لغة :
HTML : لعمل الهيكل الاساسى للصفحة و لوحة التحكم فى حجم الخطوط
CSS : سيتم استخدامها لتنسيق النصوص و لوحة التحكم .
JAVASCRIPT : سيتم استخدامها للتحكم فى حجم الخطوط

افتح ملف HTML جديد و اكتب بداخله الكود التالى :

       <a href="#" class="fontSizePlus">A+</a> |
      <a href="#" class="fontReset">استعادة</a> |
      <a href="#" class="fontSizeMinus">A-</a>

شرح الكود :

       <a href="#" class="fontSizePlus">A+</a> |

عبارة عن رابط بسيط باستخدام html و +A هو اسم الرابط . و الخاصية href هنا قيمتها # و معنى ذلك انه عند الضغط على الرابط لن يتم الانتقال الى صفحة اخرى و لكن تنفيذ امر ما فى نفس الصفحة .
الأهم هنا هو الفئة class :و هنا قيمتها fontsizeplus و هى قيمة يتم تعيينها فى كود الجافا سكريب و هى لتكبير حجم الخط
لاحظ ان الجزء المتبقى من الكود ايضا عبارة عن روابط html بسيطة جدا و لكن مع اختلاف الفئات الخاصة لكل خط و كذلك اسم الخط
حيث تم عمل ثلاثة روابط احدهم لتكبير الخط و الآخر لتصغير الخط و آخرهم لاستعادة حجم الخط الافتراضى و الفئات تم تعيينها حسب وظيفة كل رابط .
الآن نستخدم css لتنسيق الروابط و اضافة لمسة بسيطة عليها

لاحظ : ان هذا درس بسيط جدا و لن نحتاج الى عمل ملف css منفرد او ملف جافا منفرد و سوف نكتفى بكتابة الاكواد فى نفس الملف .

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

كود التنسيق :

 body {
 font-size:14px;
 font-family:tahoma;
}

a {
 color:#c00;
 text-decoration:none;
}

a:hover {
 color:#f00;
 text-decoration:underline;
}

و الآن كود الجافا سكريبت المستخدم

  $(document).ready(function () {

    //تحديد اصغر حجم للخط
    var min=9;

    //تحديد اكبر حجم للخط
    var max=16;

    //الحصول على حجم الخط الافتراضى من كود التنسيق
    var reset = $('p').css('fontSize');

    //تحديد العناصر التى يتم التحكم فى حجم الخط داخلها
    var elm = $('p.intro, p.ending');

    //تعيين حجم الخط الافتراضى و ازالة قيمة البكسل منها
    var size = str_replace(reset, 'px', '');

    //تكبير حجم الخط
    $('a.fontSizePlus').click(function() {

        //تحديد حجم الخط اذا كان مساوى او اقل من اقصى حجم مسموح
        if (size<=max) {

            //تكبير حجم الخط
            size++;

            //تعيين الحجم الاخير فى كود التنسيق
            elm.css({'fontSize' : size});
        }

        //الغاء التعديل على الحجم
        return false;

    });

    $('a.fontSizeMinus').click(function() {

        //تحديد ما اذا كان حجم الخط اكبر او مساوى لاصغر قيمة للحجم
        if (size>=min) {

            //تصغير حجم الخط
            size--;

            //تعيين حجم الخط فى كود التنسيق
            elm.css({'fontSize' : size});
        }

        //الغاء التعديل فى حجم الخط
        return false;

    });

    //استعادة الحجم الافتراضى للخ
    $('a.fontReset').click(function () {

        //تعيين الحجم الاصلى للخط
         elm.css({'fontSize' : reset});
    });

});

//دالة الاستبدال
function str_replace(haystack, needle, replacement) {
    var temp = haystack.split(needle);
    return temp.join(replacement);
}

لقد تم كتابة شرح لكل خطوة فى الكود السابق كما ترى فى المثال

و للبدء فى استخدام خاصية التحكم فى حجم الخطوط و التى قمنا ببرمجتها منذ قليل كل ما عليك فعله هو كتابة اى فقرة نصية فى الصفحة التى تريد . و قم بوضع الفقرة النصية داخل الوسم <P></P> كما ذكرنا فهو مخصص لتعيين الفقرات النصية و قم بتحديد فئتها كالتالى:

<p class="intro">الأكاديمية العربية للتصميم و برمجة تطبيقات الانترنت </p>
<p class="ending">الأكاديمية العربية للتصميم و برمجة تطبيقات الانترنت </p>

ملحوظة : الفئة intro و الفئة ending هما الفئتين التى تم تحديدهما فى كود الجافا سكريبت ليتم تغيير حجمهما بالضغط على الروابط الموجودة فى لوحة التحكم البسيطة .
و الآن الكود بالكامل كالتالى :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title>change font size using jquery</title>
  <meta http-equiv="content-type" content="text/html; charset=windows-1256" />
  <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
  $(document).ready(function () {

    //تحديد اصغر حجم للخط
    var min=9;

    //تحديد اكبر حجم للخط
    var max=16;

    //الحصول على حجم الخط الافتراضى من كود التنسيق
    var reset = $('p').css('fontSize');

    //تحديد العناصر التى يتم التحكم فى حجم الخط داخلها
    var elm = $('p.intro, p.ending');

    //تعيين حجم الخط الافتراضى و ازالة قيمة البكسل منها
    var size = str_replace(reset, 'px', '');

    //تكبير حجم الخط
    $('a.fontSizePlus').click(function() {

        //تحديد حجم الخط اذا كان مساوى او اقل من اقصى حجم مسموح
        if (size<=max) {

            //تكبير حجم الخط
            size++;

            //تعيين الحجم الاخير فى كود التنسيق
            elm.css({'fontSize' : size});
        }

        //الغاء التعديل على الحجم
        return false;

    });

    $('a.fontSizeMinus').click(function() {

        //تحديد ما اذا كان حجم الخط اكبر او مساوى لاصغر قيمة للحجم
        if (size>=min) {

            //تصغير حجم الخط
            size--;

            //تعيين حجم الخط فى كود التنسيق
            elm.css({'fontSize' : size});
        }

        //الغاء التعديل فى حجم الخط
        return false;

    });

    //استعادة الحجم الافتراضى للخ
    $('a.fontReset').click(function () {

        //تعيين الحجم الاصلى للخط
         elm.css({'fontSize' : reset});
    });

});

//دالة الاستبدال
function str_replace(haystack, needle, replacement) {
    var temp = haystack.split(needle);
    return temp.join(replacement);
}
/*]]>*/
</script>
  <style type="text/css">
  /*<![CDATA[*/
  body {
    font-size:14px;
    font-family:tahoma;
  text-align: right
}

a {
    color:#c00;
    text-decoration:none;
}

a:hover {
    color:#f00;
    text-decoration:underline;
}
  /*]]>*/
  </style>
</head>

<body>
      <a href="#" class="fontSizePlus">A+</a> |
      <a href="#" class="fontReset">استعادة</a> |
      <a href="#" class="fontSizeMinus">A-</a>

      <p class="intro">الأكاديمية العربية للتصميم و برمجة تطبيقات الانترنت <br />واحد من اكبر المواقع العربية المتخصصة فى تقديم دروس مجانية<br /> و شرح كامل لمجموعة كبيرة من لغات برمجة مواقع الانترنت بمعايير عالمية</p>
</body>

</html>

الآن انتهى الشرح و نتمنى الافادة لكم جميعا و اليكم مراجعة سريعة على الكود بالكامل :
1- تم استدعاء مكتبة jquery التى قمنا بتحميلها من الموقع الرسمى .
فى الكود السابق وضعنا ملف المكتبة بجوار ملف الـ html مباشرة اذا كنت تريد تغيير مسار الملف فلا تنسى ان تقوم بتعديل الكود السابق .
2- تم كتابة كود الجافا سكريبت المسؤل عن تحديد حجم النصوص و التحكم فيه من حيث التكبير او التصغير و كذلك تم وضع الفئات التى يتحكم فيها الكود
3- تم تنسيق الروابط و النصوص بصورة بسيطة باستخدام css .
4 - تم كتابة الروابط بلغة html و التى ستتحكم من خلالها فى حجم الخط
5 - كتابة الفقرات النصية التى تريد تغيير حجم الخط فيها و تعيين فئتها .
تمنياتى بالتوفيق

[يماني ديزاين]

الله يعطيكم العافيه وجزاكم الله خير على ماتقدموه

[7ww7.com]

شكرا لك اخى الكريم على الشرح المميز