تبسيط البرمجة ب JavaScript باستخدام jQuery


الدرس: TP: تغيير حجم النص مع البرنامج المساعد WideText


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

مهمتك


سأطلب منك تنزيل البرنامج المساعد jQuery WideText وتطبيقه .
فيما يلي صفحة HTML البسيطة التي أقترح إنشاؤها:
jQuery web
للقيام بذلك ، قم أولاً بنسخ الكود التالي وحفظه في ملف tp_widetext.html .

<!DOCTYPE html>

<html>

  <head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  </head>

  <body>
    <span id="texteAdaptatif"> يتم تكييف هذا النص مع عرض الصفحة</span>
  </body>

</html> 
اتبع هذه التعليمات لإعداد البرنامج المساعد jQuery WideText.
قم بتطبيق هذا المكون الإضافي على النص "يناسب هذا النص عرض الصفحة". دوركم الآن !

بحاجة الى مساعدة ؟


البرنامج المساعد jQuery WideText سهل الاستخدام: ما عليك سوى اتباع الخطوات الخمس التالية:
  1. قم بتنزيل ملف JS الذي يحتوي على المكون الإضافي في هذه الصفحة .
  2. قم بحفضه باسم jQuery.wideText.js وضع هذا الملف في المجلد الذي يحتوي على ملف tp_widetext.html .
  3. الرجوع إلى البرنامج المساعد مع علامة <script> .
  4. أدخل كود CSS المحدد في وثائق البرنامج المساعد في ورقة الأنماط الداخلية.
  5. قم بتطبيق الطريقة wideText() على العلامة باستخدام textAdaptativeID .

اكتشاف الاصلاح


  1. قم بتنزيل البرنامج المساعد.
  2. قم بحفضه باسم jQuery.wideText. tp_widetext.html، احرص على وضعه في نفس المستوى مثل ملفك tp_widetext.html !
  3. أضف في رأس ملف tp_widetext.html إشارة إلى المكوّن الإضافي باستخدام علامة <script> :
    
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="jQuery.wideText.js"></script> 
    
  4. 4. أدخل تعليمات CSS التالية في صفحة html ، كما هو موضح في الوثائق عبر الإنترنت:
    
    .wtext {
        white-space: nowrap;
        display: inline-block;
    } 
    
  5. أخيرًا ، قم بتطبيق طريقة wideText () على العلامة ذات المعرف textAdaptative :
    
    $(function(){
        $('#texteAdaptatif').wideText();
    }); 
    
وهنا هو العمل ، يجب أن يبدو كود صفحتك tp_widetext.html مثل الكود أدناه! بالطبع ، كما هو الحال دائمًا ، هناك العديد من المتغيرات الممكنة ، فلا تقلق إذا لم تكتب نفس الكود.

<!DOCTYPE html>

<html>
    
  <head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="jQuery.wideText.js"></script>
    <style>
      .wtext {
        white-space: nowrap;
        display: inline-block;
      }
    </style>   
  </head>

  <body>
    <div id="tout">
    <span id="texteAdaptatif"> يتم تكييف هذا النص مع عرض الصفحة</span>
    </div>
    
    <script>
      $(function(){
        $('#texteAdaptatif').wideText();
      });
    </script>   

  </body>
  
</html>