بوٹسٹریپ جے ایس

بوٹسٹریپ کے لیے جاوا اسکرپٹ

بوٹسٹریپ کے اجزاء کو نئے، حسب ضرورت پلگ ان کے ساتھ زندہ کریں جو jQuery اور Ender کے ساتھ کام کرتے ہیں۔

← واپس بوٹسٹریپ ہوم پر

ScrollSpy bootstrap- scrollspy.js

یہ پلگ ان بوٹسٹریپ ٹاپ بار میں اسکرول اسپی (آٹو اپ ڈیٹ کرنے والی NAV) تعامل کو شامل کرنے کے لیے ہے۔

ڈاؤن لوڈ کریں

bootstrap-scrollspy.js کا استعمال کرتے ہوئے

  1. $ ( '#topbar' )۔ scrollSpy ()

مارک اپ

آسانی سے اپنے nav میں scrollspy رویہ شامل کرنے کے لیے، صرف اس data-scrollspyوصف کو شامل کریں .topbar۔

  1. <div class = "topbar" data-scrollspy = "scrollspy" > ... </div>

طریقے

$().scrollSpy()

آٹو صارفین کی اسکرول پوزیشن کے مطابق نیویگیشن بٹن کو چالو کرتا ہے۔

  1. $ ( 'body > .topbar' )۔ scrollSpy ()

نوٹس ٹاپبار اینکر ٹیگز میں قابل حل شناختی اہداف ہونے چاہئیں۔ مثال کے طور پر، <a href="#home">home</a>ڈوم میں کسی چیز کے مطابق ہونا ضروری ہے جیسے <div id="home"></div>.

.scrollSpy('ریفریش')

scrollspy کارکردگی کے لیے NAV بٹنز اور سیکشن کوآرڈینیٹ کیش کرتا ہے۔ اگر آپ کو اس کیش کو اپ ڈیٹ کرنے کی ضرورت ہے (ممکنہ طور پر اگر آپ کے پاس متحرک مواد ہے) تو صرف اس ریفریش طریقہ کو کال کریں۔ اگر آپ نے اپنی اسکرول اسپی کی وضاحت کے لیے ڈیٹا انتساب کا استعمال کیا ہے، تو صرف باڈی پر ریفریش کال کریں۔

  1. $ ( 'جسم' )۔ scrollSpy ( 'ریفریش' )

ڈیمو

اس صفحہ پر ٹاپ بار نیویگیشن چیک کریں۔

بٹن bootstrap-buttons.js

یہ پلگ ان بٹن کی حالت کے انتظام کے لیے اضافی فعالیت پیش کرتا ہے۔

ڈاؤن لوڈ کریں

bootstrap-buttons.js استعمال کرنا

  1. $ ( '.tabs' )۔ بٹن ()

طریقے

$().بٹن('ٹوگل')

ٹوگل پش اسٹیٹ۔ btn کو یہ نظر دیتا ہے کہ اسے چالو کر دیا گیا ہے۔

نوٹس آپ انتساب کا استعمال کرکے بٹن کی آٹو ٹوگلنگ کو فعال کرسکتے ہیں data-toggle۔

  1. <button class = "btn" data-toggle = "toggle" > ... </ بٹن>

$().بٹن('لوڈنگ')

بٹن کی حالت کو لوڈ کرنے پر سیٹ کرتا ہے - بٹن کو غیر فعال کرتا ہے اور متن کو لوڈ کرنے والے متن میں تبدیل کرتا ہے۔ لوڈنگ ٹیکسٹ کو ڈیٹا انتساب کا استعمال کرتے ہوئے بٹن عنصر پر ��یان کیا جانا چاہئے data-loading-text۔

  1. <button class = "btn" data-loading-text = "لوڈنگ سامان..." > ... </ بٹن>

$().بٹن('ری سیٹ')

بٹن کی حالت کو ری سیٹ کرتا ہے - متن کو اصل متن میں تبدیل کرتا ہے۔

$().بٹن(سٹرنگ)

بٹن کی حالت کو ری سیٹ کرتا ہے - متن کو کسی بھی ڈیٹا کی وضاحت شدہ ٹیکسٹ حالت میں تبدیل کرتا ہے۔

  1. <بٹن کلاس = "btn" data-complete-text = "ختم!" > ... </ بٹن>   
  2. <script>
  3.   $('.btn'). بٹن('مکمل')
  4. </script>

ڈیمو

ٹیبز bootstrap-tabs.js

یہ پلگ ان تیز، متحرک ٹیب اور گولی کی فعالیت کو شامل کرتا ہے۔

ڈاؤن لوڈ کریں

bootstrap-tabs.js استعمال کرنا

  1. $ ( '.tabs' )۔ ٹیبز ()

مارک اپ

آپ کسی بھی جاوا اسکرپٹ کو لکھے بغیر ٹیب یا گولی نیویگیشن کو صرف ایک data-tabsیا data-pillsانتساب دے کر چالو کرسکتے ہیں۔

  1.  <ul class = "tabs" data-tabs = "tabs" > ... </ul>

طریقے

$().tabs یا $(). گولیاں

دیئے گئے کنٹینر کے لیے ٹیب اور گولی کی فعالیت کو چالو کرتا ہے۔ ٹیب کے لنکس کو دستاویز میں آئی ڈی کا حوالہ دینا چاہیے۔

  1. <ul class = "tabs" > 
  2.   <li class = "active" ><a href = "#home" > گھر </a></li>  
  3.   <li><a href = "#profile" > پروفائل </a></li> 
  4.   <li><a href = "#messages" > پیغامات </a></li> 
  5.   <li><a href = "#settings" > ترتیبات </a></li> 
  6. </ul>
  7.  
  8. <div class = "pill-content" > 
  9.   <div class = "active" id = "home" > ... </div>  
  10.   <div id = "profile" > ... </div> 
  11.   <div id = "پیغامات" > ... </div> 
  12.   <div id = "settings" > ... </div> 
  13. </div>
  14.  
  15. <script>
  16.   $ ( فنکشن () {  
  17.     $ ( '.tabs' )۔ ٹیبز ()
  18.   })
  19. </script>

تقریبات

تقریب تفصیل
تبدیلی یہ واقعہ ٹیب کی تبدیلی پر شروع ہوتا ہے۔ بالترتیب ایکٹو ٹیب اور پچھلے ایکٹو ٹیب کو استعمال کریں event.targetاور ان کو نشانہ بنائیں۔event.relatedTarget 
  1. $ ( '#.tabs' )۔ پابند ( 'تبدیلی' ، فنکشن ( ای ) {   
  2.   e _ ہدف // چالو ٹیب
  3.   e _ متعلقہ ہدف // پچھلا ٹیب
  4. })

ڈیمو

را ڈینم آپ نے شاید ان کے بارے میں جین شارٹس آسٹن کے بارے میں نہیں سنا ہوگا۔ Nesciunt tofu stumptown aliqua, retro synth master cleanse. مونچھیں کلچ ٹیمپور، ولیمزبرگ کارلس ویگن ہیلویٹیکا۔ Reprehenderit butcher retro keffiyeh Dreamcatcher synth. Cosby sweater eu banh mi, qui irure Terry richardson ex squid. ایلی کیپ پلیسیٹ سیلویا سیلم آئی فون۔ Seitan aliquip quis cardigan American apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Banksy do proident, brooklyn photo booth delectus sunt artisan sed organic exercitation eiusmod four loko. Quis tattooed iphone esse aliqua. Master cleanse vero fixie mcsweeney's. Ethical portland aute, irony food truck pitchfork lomo eu anim. Aesthetic blog DIY, ethical beard leggings tofu consequat whatever cardigan nostrud. Helvetica you probably haven't heard of them carles, marfa veniam occaecat lomo before they sold out in shoreditch scenester sustainable thundercats. Consectetur tofu craft beer, mollit brunch fap echo park pitchfork mustache dolor.

Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seitan squid ad wolf bicycle rights blog. Et aute readymade farm-to-table carles 8-bit, nesciunt nulla etsy adipisicing organic ea. Master cleanse mollit high life, next level Austin nesciunt american apparel twee mustache adipisicing reprehenderit hoodie portland irony. Aliqua tofu quinoa +1 commodo eiusmod. High life williamsburg cupidatat twee homo leggings. Four loko vinyl DIY consectetur nisi, marfa retro keffiyeh vegan. Fanny pack viral retro consectetur gentrify fap.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

Twipsy bootstrap-twipsy.js

جیسن فریم کے تحریر کردہ بہترین jQuery.tipsy پلگ ان پر مبنی؛ twipsy ایک اپ ڈیٹ شدہ ورژن ہے، جو امیجز پر انحصار نہیں کرتا، اینیمیشنز کے لیے css3 اور ٹائٹل اسٹوریج کے لیے ڈیٹا-انتساب کا استعمال کرتا ہے!

ڈاؤن لوڈ کریں

bootstrap-twipsy.js استعمال کرنا

  1. $ ( '#مثال' )۔ twipsy ( اختیارات )

اختیارات

نام قسم پہلے سے طے شدہ تفصیل
متحرک بولین سچ ہے ٹول ٹپ پر سی ایس ایس فیڈ ٹرانزیشن کا اطلاق کریں۔
تاخیر نمبر 0 ٹول ٹپ دکھانے سے پہلے تاخیر (ایم ایس)
تاخیر نمبر 0 ٹول ٹپ کو چھپانے سے پہلے تاخیر (ایم ایس)
فال بیک تار '' جب کوئی ٹول ٹپ ٹائٹل موجود نہ ہو تو استعمال کرنے کے لیے متن
جگہ کا تعین تار 'اوپر' ٹول ٹپ کی پوزیشن کیسے لی جائے - اوپر | نیچے | بائیں | صحیح
html بولین جھوٹا ٹول ٹپ کے اندر HTML مواد کی اجازت دیتا ہے۔
زندہ بولین جھوٹا انفرادی ایونٹ ہینڈلرز کے بجائے ایونٹ ڈیلیگیشن کا استعمال کریں۔
آفسیٹ نمبر 0 ہدف عنصر سے ٹول ٹپ کا پکسل آفسیٹ
عنوان سٹرنگ، فنکشن 'عنوان' عنوان کے متن کو بازیافت کرنے کا وصف یا طریقہ
محرک تار 'ہوور' ٹول ٹپ کو کیسے متحرک کیا جاتا ہے - ہوور | توجہ مرکوز | دستی
سانچے تار [پہلے سے طے شدہ مارک اپ] html ٹیمپلیٹ جو twipsy پیش کرنے کے لیے استعمال ہوتا ہے۔

نوٹس انفرادی twipsy مثال کے اختیارات کو متبادل طور پر ڈیٹا کی خصوصیات کے استعمال کے ذریعے بیان کیا جا سکتا ہے۔

  1. <a href = "#" data-placement = "below" rel = 'twipsy' title = 'کچھ عنوان متن' > متن </a>

طریقے

$().twipsy(اختیارات)

ایک عنصر کے مجموعہ کے ساتھ ایک twipsy ہینڈلر منسلک کرتا ہے۔

.twipsy('شو')

ایک عناصر twipsy سے پتہ چلتا ہے.

  1. $ ( '# عنصر' )۔ twipsy ( 'شو' )

.twipsy('چھپائیں')

ایک عناصر twipsy چھپاتا ہے.

  1. $ ( '# عنصر' )۔ twipsy ( 'چھپائیں' )

.twipsy(سچ)

ایک عناصر twipsy کلاس مثال لوٹاتا ہے۔

  1. $ ( '# عنصر' )۔ twipsy ( سچ )

نوٹس متبادل طور پر، اس کے ساتھ بازیافت کیا جا سکتا ہے $().data('twipsy')۔

ڈیمو

ٹائیٹ پتلون اگلے درجے کی کیفیہ آپ نے شاید ان کے بارے میں نہیں سنا ہوگا۔ فوٹو بوتھ داڑھی خام ڈینم لیٹرپریس ویگن میسنجر بیگ اسٹمپ ٹاؤن۔ فارم ٹو ٹیبل سیٹن، میکسوینی کے فکسی پائیدار کوئنو 8 بٹ امریکی ملبوسات میں ٹیری رچرڈسن ونائل چیمبرے ہے۔ بیئرڈ اسٹمپ ٹاؤن، کارڈیگنز بنہ می لومو تھنڈرکیٹس۔ ٹوفو بائیو ڈیزل ولیمزبرگ مارفا، چار لوکو میکسوینی کا کلینز ویگن چیمبرے۔ ایک واقعی ستم ظریفی کاریگر جو بھی کیٹار ہو، سینسٹر فارم ٹو ٹیبل بینکسی آسٹن ٹویٹر ہینڈل فریگن کریڈ را ڈینم سنگل اوریجن کافی وائرل۔

Popovers bootstrap-popover.js

پاپ اوور پلگ ان آپ کی ایپلیکیشن میں پاپ اوور شامل کرنے کے لیے ایک سادہ انٹرفیس فراہم کرتا ہے۔ یہ bootstrap-twipsy.js پلگ ان کو بڑھاتا ہے، لہذا اپنے پروجیکٹ میں پاپ اوور کو شامل کرتے وقت اس فائل کو بھی پکڑنا یقینی بنائیں!

نوٹس آپ bootstrap-popover.js سے پہلے bootstrap- twipsy.js فائل کو شامل کریں ۔

ڈاؤن لوڈ کریں

bootstrap-popover.js استعمال کرنا

  1. $ ( '#مثال' )۔ پاپ اوور ( اختیارات )

اختیارات

نام قسم پہلے سے طے شدہ تفصیل
متحرک بولین سچ ہے ٹول ٹپ پر سی ایس ایس فیڈ ٹرانزیشن کا اطلاق کریں۔
تاخیر نمبر 0 ٹول ٹپ دکھانے سے پہلے تاخیر (ایم ایس)
تاخیر نمبر 0 ٹول ٹپ کو چھپانے سے پہلے تاخیر (ایم ایس)
فال بیک تار '' جب کوئی ٹول ٹپ ٹائٹل موجود نہ ہو تو استعمال کرنے کے لیے متن
جگہ کا تعین تار 'صحیح' ٹول ٹپ کی پوزیشن کیسے لی جائے - اوپر | نیچے | بائیں | صحیح
html بولین جھوٹا ٹول ٹپ کے اندر HTML مواد کی اجازت دیتا ہے۔
زندہ بولین جھوٹا انفرادی ایونٹ ہینڈلرز کے بجائے ایونٹ ڈیلیگیشن کا استعمال کریں۔
آفسیٹ نمبر 0 ہدف عنصر سے ٹول ٹپ کا پکسل آفسیٹ
عنوان سٹرنگ، فنکشن 'عنوان' عنوان کے متن کو بازیافت کرنے کا وصف یا طریقہ
مواد سٹرنگ، فنکشن 'ڈیٹا مواد' مواد کے متن کی بازیافت کے لیے ایک تار یا طریقہ۔ اگر کوئی فراہم نہیں کیا جاتا ہے تو، مواد کو ڈیٹا کے مواد کی خصوصیت سے حاصل کیا جائے گا۔
محرک تار 'ہوور' ٹول ٹپ کو کیسے متحرک کیا جاتا ہے - ہوور | توجہ مرکوز | دستی
سانچے تار [پہلے سے طے شدہ مارک اپ] HTML ٹیمپلیٹ جو پاپ اوور پیش کرنے کے لیے استعمال ہوتا ہے۔

نوٹس انفرادی پاپ اوور مثال کے اختیارات کو متبادل طور پر ڈیٹا کی خصوصیات کے استعمال کے ذریعے بیان کیا جا سکتا ہے۔

  1. <a data-placement = "below" href = "#" class = "btn Danger" rel = "popover" > text </a>

طریقے

$().popover(اختیارات)

عنصر کے مجموعہ کے لیے پاپ اوور شروع کرتا ہے۔

.popover('شو')

ایک عناصر کے پاپ اوور کو ظاہر کرتا ہے۔

  1. $ ( '# عنصر' )۔ پاپ اوور ( 'شو' )

.popover('چھپائیں')

ایک عناصر کے پاپ اوور کو چھپاتا ہے۔

  1. $ ( '# عنصر' )۔ پاپ اوور ( 'چھپائیں' )

ڈیمو

پاپ اوور کے لیے ہوور کریں۔

انتباہات bootstrap-alerts.js

الرٹ پلگ ان انتباہات میں قریبی فعالیت شامل کرنے کے لیے ایک انتہائی چھوٹی کلاس ہے۔

ڈاؤن لوڈ کریں

bootstrap-alerts.js استعمال کرنا

  1. $ ( ". الرٹ-پیغام" )۔ الرٹ ()

مارک اپ

data-alertاپنے انتباہی پیغامات کو خود بخود قریبی فعالیت دینے کے لیے بس ایک وصف شامل کریں ۔

اختیارات

نام قسم پہلے سے طے شدہ تفصیل
سلیکٹر تار '.بند کریں' الرٹ بند کرنے کے لیے کس سلیکٹر کو ہدف بنانا ہے۔

طریقے

$() الرٹ()

تمام انتباہات کو قریبی فعالیت کے ساتھ لپیٹ دیتا ہے۔ بند ہونے پر آپ کے انتباہات کو متحرک کرنے کے لیے، یقینی بنائیں کہ ان پر .fadeاور .inکلاس پہلے سے ہی لاگو ہے۔

الرٹ ('بند')

ایک الرٹ بند کرتا ہے۔

  1. $ ( ". الرٹ-پیغام" )۔ الرٹ ( 'قریب' )

ڈیمو

×

مقدس guacamole! خود کو چیک کریں، آپ زیادہ اچھے نہیں لگ رہے ہیں۔

×

اوہ سنیپ! آپ کو ایک غلطی ہو گئی ہے! اسے اور اسے تبدیل کریں اور دوبارہ کوشش کریں۔ Duis mollis, est non commodo luctus, Nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras Mattis consectetur purus sit amet fermentum.

یہ اقدام کریں۔ یا یہ کرو