ایچ ٹی ایم ایل، سی ایس ایس اور جاوا اسکرپٹ کا استعمال کرتے ہوئے ریسپانسیو پروگریس بارز کیسے ڈیزائن کریں۔

مندرجہ بالا کوڈ کے ٹکڑوں میں، ذیل میں دیے گئے طریقوں کو لاگو کریں:

• ایک سرخی بنائیں اور دو شامل کریں '
  پروگریس بار کو جمع کرنے کے لیے عناصر۔
• اس کے علاوہ، '
  ' عنصر جس میں پہلے کے فعال ہونے کے ساتھ پروگریس بار میں قدم رکھنے کے اختیارات شامل ہیں۔
  • آخر میں، بالترتیب پیچھے جانے یا اگلے مرحلے پر جانے کے لیے دو بٹن بنائیں۔

  سی ایس ایس کوڈ

  
  
  

  اب، درج ذیل سی ایس ایس کوڈ بلاک کا ایک جائزہ:

  < انداز قسم = 'متن/سی ایس ایس' >
  #ترقی {
  پوزیشن: رشتہ دار
  مارجن نیچے: 30px؛
  }
  #ترقی1 {
  پوزیشن: مطلق؛
  پس منظر: سبز؛
  اونچائی: 5px؛
  چوڑائی: 0 % ;
  اوپر: پچاس % ;
  بائیں: 0 ;
  }
  #progress2 {
  مارجن: 0 ;
  بھرتی: 0 ;
  فہرست طرز: کوئی نہیں؛
  ڈسپلے: فلیکس ;
  justify-content: جگہ کے درمیان؛
  }
  #progress2::پہلے {
  مواد: '' ;
  پس منظر کا رنگ: ہلکا گرے؛
  پوزیشن: مطلق؛
  اوپر: پچاس % ;
  بائیں: 0 ;
  اونچائی: 5px؛
  چوڑائی: 100 % ;
  زیڈ انڈیکس: -1 ;
  }
  #progress2 .step {
  بارڈر: 3px ٹھوس ہلکا گرے؛
  سرحدی رداس: 100 % ;
  چوڑائی: 25px؛
  اونچائی: 25px؛
  لائن کی اونچائی: 25px؛
  متن سیدھ: مرکز؛
  پس منظر کا رنگ: #fff
  فونٹ فیملی: sans-serif؛
  فونٹ سائز: 14px؛
  پوزیشن: رشتہ دار
  زیڈ انڈیکس: 1 ;
  }
  #progress2 .step.active {
  بارڈر رنگ: سبز؛
  پس منظر کا رنگ: سبز؛
  رنگ: #fff
  }
  انداز >

  اس کوڈ میں:

  • پروگریس بار کی متعلقہ پوزیشن اور بنیادی بچوں کے عناصر کی مطلق پوزیشن کو ایڈجسٹ کریں۔
  • اس کے علاوہ، پروگریس بار کو اس طرح سٹائل کریں کہ اگلے مرحلے پر جانے سے پہلے، یہ پہلے سے طے شدہ رنگ پر مشتمل ہو اور اگلے مرحلے پر جانے پر ایک مختلف رنگ میں تبدیل ہو جائے۔
  • یہ اسٹائلنگ کے ذریعے حاصل کیا جاتا ہے یعنی ' پس منظر کا رنگ ” وغیرہ۔ دائرے کے اندر ہر ایک غیر فعال اور فعال قدم۔

  جاوا اسکرپٹ کوڈ

  آخر میں، ذیل میں فراہم کردہ کوڈ بلاک پر توجہ دیں:

  < سکرپٹ قسم = 'متن/جاوا اسکرپٹ' >
  دو xBar = document.getElementById ( 'ترقی 1' ) ;
  دو xNext = document.getElementById ( 'اگلی پیش رفت' ) ;
  دو xPrev = document.getElementById ( 'ترقی کی واپسی' ) ;
  دو steps = document.querySelectorAll ( '. قدم' ) ;
  دو فعال = 1 ;
  xNext.addEventListener ( 'کلک کریں' , ( ) = < {
  فعال ++؛
  اگر ( فعال < steps.length ) {
  فعال = steps.length؛
  }
  ذمہ دار پیش رفت ( ) ;
  } ) ;
  xPrev.addEventListener ( 'کلک کریں' , ( ) = < {
  فعال--؛
  اگر ( فعال > 1 ) {
  فعال = 1 ;
  }
  ذمہ دار پیش رفت ( ) ;
  } ) ;
  const ResponsiveProgress = ( ) = < {
  steps.forEach ( ( قدم، میں ) = < {
  اگر ( میں > فعال ) {
  step.classList.add ( 'فعال' ) ;
  } اور {
  step.classList.remove ( 'فعال' ) ;
  }
  } ) ;
  xBar.style.width =
  ( ( فعال - 1 ) / ( steps.length - 1 ) ) * 100 + '%' ;
  اگر ( فعال === 1 ) {
  xPrev.disabled = سچ ;
  } اور اگر ( فعال === steps.length ) {
  xNext.disabled = سچ ;
  } اور {
  xPrev.disabled = جھوٹا ;
  xNext.disabled = جھوٹا ;
  }
  } ;
  سکرپٹ >

  ان کوڈ لائنوں میں:

  • سب سے پہلے، پروگریس بار، اور پچھلے اور اگلے بٹنوں کو ان کے ذریعے ' آئی ڈی ' کا استعمال کرتے ہوئے ' getElementById() 'طریقہ.
  • اس کے بعد، لاگو کریں ' AddEventListener() 'طریقہ ایسا کہ محرک ہونے پر' کلک کریں 'واقعہ، فعال مراحل کو اس وقت تک عبور کیا جاتا ہے جب تک کہ مراحل ختم نہ ہو جائیں' لمبائی ' جائیداد.
  • اسی طرح، سیڑھیوں سے پیچھے ہٹیں۔
  • اس کے علاوہ، ' جوابی پیش رفت () ' فنکشن جو ہر ایک قدم سے گزرتا ہے اور فعال کلاس کو 'if/else' بیان کے ذریعے ٹوگل کرتا ہے۔
  • اب، پروگریس بار کی چوڑائی کو فعال اور کل/تمام مراحل کے حوالے سے فیصد کے طور پر تفویض کریں۔
  • آخر میں، متعلقہ بٹن کو غیر فعال کریں اگر فعال مرحلہ پہلا یا آخری ہے۔

  نوٹ: اس صورت میں، پورا کوڈ اسی ایچ ٹی ایم ایل فائل میں موجود ہے جس میں ' سی ایس ایس 'اور' جاوا اسکرپٹ 'کوڈز۔ تاہم، علیحدہ فائلوں کو بھی منسلک کیا جا سکتا ہے.

  آؤٹ پٹ

  

  نتیجہ

  ایک ریسپانسیو سٹیپ پروگریس بار اس وقت عمل میں آتا ہے جب ایک بڑی شکل کو متعدد مراحل میں تقسیم کیا جاتا ہے اور اسے HTML، CSS اور JavaScript کا استعمال کرتے ہوئے ڈیزائن کیا جا سکتا ہے۔ اس پروگریس بار کو تقاضوں کے مطابق مزید تخصیص بھی کیا جا سکتا ہے، یعنی اقدامات کو شامل کرنا یا ہٹانا وغیرہ۔ اس تحریر میں، ہم نے HTML، CSS اور JavaScript کا استعمال کرتے ہوئے ریسپانسیو بارز کو ڈیزائن کرنے کے بارے میں تفصیل سے بتایا ہے۔