بوٽ اسٽريپ JS

بوٽ اسٽريپ لاءِ جاوا اسڪرپٽ

بوٽ اسٽريپ جي اجزاء کي نئين، ڪسٽم پلگ ان سان زنده ڪريو جيڪي jQuery ۽ Ender سان ڪم ڪن ٿا .

← واپس بوٽ اسٽريپ گهر ڏانهن

ScrollSpy bootstrap-scrollspy.js

هي پلگ ان شامل ڪرڻ لاءِ آهي scrollspy (خودڪار اپڊيٽ ڪرڻ nav) رابطي کي بوٽ اسٽريپ ٽاپبار ۾.

ڊائون لوڊ ڪريو

bootstrap-scrollspy.js استعمال ڪندي

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

مارڪ اپ

آساني سان شامل ڪرڻ لاءِ scrollspy رويي کي پنھنجي نيوي ۾، صرف شامل ڪريو data-scrollspyخاصيت کي .topbar.

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

طريقا

$().scrollSpy()

خودڪار نيويگيشن بٽڻ کي چالو ڪري ٿو صارفين طرفان اسڪرول پوزيشن.

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

نوٽ ڪريو Topbar اينڪر ٽيگ کي لازمي طور تي حل ڪرڻ لائق id هدفن جو هجڻ لازمي آهي. مثال طور، <a href="#home">home</a>ڊوم ۾ ڪنهن شيءِ سان ملندڙ جلندڙ هجڻ گهرجي جهڙوڪ <div id="home"></div>.

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

scrollspy ڪارڪردگي لاءِ نيوي بٽڻ ۽ سيڪشن ڪوآرڊينيٽس ڪيچ ڪري ٿو. جيڪڏهن توهان کي هن ڪيش کي اپڊيٽ ڪرڻ جي ضرورت آهي (ممڪن آهي ته توهان وٽ متحرڪ مواد آهي) صرف هن ريفريش طريقي کي ڪال ڪريو. جيڪڏھن توھان استعمال ڪيو ڊيٽا وصف پنھنجي اسڪراول اسپيس کي بيان ڪرڻ لاءِ، صرف ڪال ڪريو ريفريش کي جسم تي.

  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. <button class = "btn" data-complete-text = "ختم!" > ... </ بٽڻ>   
  2. <script>
  3.   $('.btn'). بٽڻ ('مڪمل')
  4. </script>

ڊيمو

Tabs bootstrap-tabs.js

هي پلگ ان تيز، متحرڪ ٽيب ۽ گولي جي ڪارڪردگي شامل ڪري ٿو.

ڊائون لوڊ ڪريو

bootstrap-tabs.js استعمال ڪندي

  1. $ ( '.tabs' ). ٽيب ()

مارڪ اپ

توھان چالو ڪري سگھو ٿا ٽيب يا گولي نيويگيشن بغير ڪنھن جاوا اسڪرپٽ لکڻ کان سواءِ انھن کي ھڪ data-tabsيا خصوصيت ڏيڻ data-pillsسان.

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

طريقا

$().tabs يا $(). گوليون

ڏنل ڪنٽينر لاءِ ٽيب ۽ گولي جي ڪارڪردگي کي چالو ڪري ٿو. ٽيب لنڪس کي دستاويز ۾ id جي حوالي ڪرڻ گهرجي.

  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 = "سيٽنگون" > ... </div> 
  13. </div>
  14.  
  15. <script>
  16.   $ ( فنڪشن () {  
  17.     $ ( '.tabs' ). ٽيب ()
  18.   })
  19. </script>

واقعا

واقعو وصف
تبديلي هي واقعو ٽيب جي تبديلي تي فائر ڪري ٿو. استعمال ڪريو event.target۽ event.relatedTargetھدف ڪرڻ لاء فعال ٽيب ۽ اڳوڻو فعال ٽيب ترتيب سان. 
  1. $ ( '#.tabs' ). پابند ( 'تبديل' ، فنڪشن ( اي ) {   
  2.   اي . ٽارگيٽ // چالو ٿيل ٽيب
  3.   اي . لاڳاپيل ٽارگيٽ // پوئين ٽيب
  4. })

ڊيمو

Raw denim توهان شايد انهن بابت نه ٻڌو آهي جين شارٽس آسٽن. Nesciunt tofu stumptown aliqua، retro synth master cleanse. Mustache cliche tempor، Williamsburg Carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi، qui irure Terry richardson ex squid. ايليڪيپ جي جڳهه سالويا سيلم آئي فون. Seitan aliquip quis cardigan آمريڪي لباس، 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. $ ( '#مثال' ). ٽوپي ( اختيارن )

اختيارن

نالو قسم ڊفالٽ وضاحت
متحرڪ ڪرڻ بولين سچو ٽول ٽائپ تي سي ايس ايس فيڊ ٽرانسشن لاڳو ڪريو
دير ۾ نمبر 0 ٽول ٽائپ ڏيکارڻ کان اڳ دير ڪريو (ms)
دير ڪرڻ نمبر 0 ٽول ٽائپ لڪائڻ کان اڳ دير (ms)
واپسي تار '' استعمال ڪرڻ لاءِ متن جڏهن ڪو ٽول ٽائپ عنوان موجود نه هجي
لڳائڻ تار 'مٿي' ٽول ٽائپ کي ڪيئن رکڻو آهي - مٿي | هيٺ | کاٻي | ساڄو
html بولين ڪوڙو html مواد کي ٽول ٽائپ ۾ اجازت ڏئي ٿو
جيئرو بولين ڪوڙو انفرادي ايونٽ هينڊلر جي بدران ايونٽ وفد استعمال ڪريو
بند ڪرڻ نمبر 0 ٽارگيٽ عنصر کان ٽول ٽائپ جو پکسل آفسيٽ
عنوان تار، فعل 'عنوان' ٽائيٽل ٽيڪسٽ حاصل ڪرڻ لاء خاصيت يا طريقو
محرڪ تار 'هور' ٽول ٽِپ ڪيئن شروع ٿئي ٿي - هور | ڌيان | دستور
ٽيمپليٽ تار [ڊفالٽ مارڪ اپ] html ٽيمپليٽ هڪ ٽوپي رينجر ڪرڻ لاءِ استعمال ڪيو ويو.

نوٽ ڪريو انفرادي ٽوپسي مثال جا اختيار متبادل طور تي بيان ڪري سگھجن ٿا ڊيٽا خاصيتن جي استعمال ذريعي.

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

طريقا

$().twipsy(اختيارن)

هڪ ٽوپي هينڊلر کي هڪ عنصر گڏ ڪرڻ سان ڳنڍيندو آهي.

.twipsy ('شو')

هڪ عنصر twipsy ظاهر ڪري ٿو.

  1. $ ( '# عنصر' ). ٽوپي ( 'شو' )

.twipsy ('لڪايو')

هڪ عنصر ٽوپي لڪائيندو آهي.

  1. $ ( '# عنصر' ). ٽوپي ( 'لڪ' )

twipsy (سچو)

ھڪڙو عنصر ٽوپسي ڪلاس مثال ڏئي ٿو.

  1. $ ( '# عنصر' ). ٽوپي ( سچو )

نوٽ ڪريو متبادل طور تي، هن سان ٻيهر حاصل ڪري سگهجي ٿو $().data('twipsy').

ڊيمو

تنگ پتلون ايندڙ ليول ڪيفيه توهان شايد انهن بابت نه ٻڌو هوندو. فوٽو بوٿ بيئر خام ڊينم ليٽرپريس ويگن ميسينجر بيگ اسٽمپ ٽائون. فارم-ٽو-ٽيبل سيٽن، ميڪسويني جي فڪسي پائيدار quinoa 8-bit آمريڪن ڪپڙا هڪ ٽيري رچرڊسن ونائل چيمبري آهي. Beard stumptown, cardigans banh mi lomo Thundercats. ٽوفو بايو ڊيزل وليمسبرگ مارفا، چار لوڪو ميڪسويني جي صاف ويگن چيمبري. هڪ واقعي لوهي ڪاريگر جيڪو به ڪيٽار، سينسٽر فارم کان ٽيبل بئنڪسي آسٽن ٽوئيٽر هينڊل فريگن ڪريڊ را ڊينم سنگل اصل ڪافي وائرل.

Popovers bootstrap-popover.js

پاپ اوور پلگ ان توهان جي ايپليڪيشن ۾ پاپ اوور شامل ڪرڻ لاءِ هڪ سادي انٽرفيس مهيا ڪري ٿي. اهو bootstrap-twipsy.js پلگ ان کي وڌائيندو آهي، تنهن ڪري پڪ ڪريو ته انهي فائل کي پڻ پڪڙيو جڏهن توهان جي پروجيڪٽ ۾ پاپ اوور شامل آهن!

نوٽيس توهان کي bootstrap-popover.js کان اڳ bootstrap-twipsy.js فائل شامل ڪرڻ گهرجي.

ڊائون لوڊ ڪريو

bootstrap-popover.js استعمال ڪندي

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

اختيارن

نالو قسم ڊفالٽ وضاحت
متحرڪ ڪرڻ بولين سچو ٽول ٽائپ تي سي ايس ايس فيڊ ٽرانسشن لاڳو ڪريو
دير ۾ نمبر 0 ٽول ٽائپ ڏيکارڻ کان اڳ دير ڪريو (ms)
دير ڪرڻ نمبر 0 ٽول ٽائپ لڪائڻ کان اڳ دير (ms)
واپسي تار '' استعمال ڪرڻ لاءِ متن جڏهن ڪو ٽول ٽائپ عنوان موجود نه هجي
لڳائڻ تار 'ساڄو' ٽول ٽائپ کي ڪيئن رکڻو آهي - مٿي | هيٺ | کاٻي | ساڄو
html بولين ڪوڙو html مواد کي ٽول ٽائپ ۾ اجازت ڏئي ٿو
جيئرو بولين ڪوڙو انفرادي ايونٽ هينڊلر جي بدران ايونٽ وفد استعمال ڪريو
بند ڪرڻ نمبر 0 ٽارگيٽ عنصر کان ٽول ٽائپ جو پکسل آفسيٽ
عنوان تار، فعل 'عنوان' ٽائيٽل ٽيڪسٽ حاصل ڪرڻ لاء خاصيت يا طريقو
مواد تار، فعل 'ڊيٽا مواد' مواد جي متن کي ٻيهر حاصل ڪرڻ لاء هڪ تار يا طريقو. جيڪڏهن ڪو به مهيا نه ڪيو ويو آهي، مواد ڊيٽا-مواد جي خاصيت مان حاصل ڪيو ويندو.
محرڪ تار 'هور' ٽول ٽِپ ڪيئن شروع ٿئي ٿي - هور | ڌيان | دستور
ٽيمپليٽ تار [ڊفالٽ مارڪ اپ] html ٽيمپليٽ هڪ پاپ اوور کي پيش ڪرڻ لاء استعمال ڪيو ويو آهي.

نوٽيس انفرادي پاپ اوور مثال جا اختيار متبادل طور تي بيان ڪري سگھجن ٿا ڊيٽا خاصيتن جي استعمال ذريعي.

  1. <a ڊيٽا جي جڳهه = "هيٺ" href = "#" ڪلاس = "btn خطرو" rel = "popover" > text </a>

طريقا

$().popover(اختيارن)

هڪ عنصر گڏ ڪرڻ لاء popovers جي شروعات.

.popover ('شو')

ظاهر ڪري ٿو هڪ عنصر پاپ اوور.

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

.popover ('لڪايو')

هڪ عنصر پاپ اوور کي لڪائيندو آهي.

  1. $ ( '# عنصر' ). پوپ اوور ( 'لڪ' )

ڊيمو

پاپ اوور لاءِ هور ڪريو

خبرداريون bootstrap-alerts.js

الرٽ پلگ ان خبرداري لاءِ ويجھي ڪارڪردگي شامل ڪرڻ لاءِ هڪ سپر ننڍڙو ڪلاس آهي.

ڊائون لوڊ ڪريو

bootstrap-alerts.js استعمال ڪندي

  1. $ ( ". alert-message" ). خبردار ()

مارڪ اپ

بس هڪ data-alertخاصيت شامل ڪريو توهان جي خبرداري پيغامن ۾ خودڪار طور تي انهن کي ويجهي ڪارڪردگي ڏي.

اختيارن

نالو قسم ڊفالٽ وضاحت
چونڊيندڙ تار '. بند' ڪهڙي چونڊيندڙ کي نشانو بڻائڻ لاءِ الرٽ بند ڪرڻ.

طريقا

$(). الرٽ()

ويجھي ڪارڪردگي سان سڀني خبردارين کي لپي ٿو. بند ٿيڻ تي توهان جي خبردارين کي متحرڪ ڪرڻ لاءِ، پڪ ڪريو ته انهن وٽ .fade۽ .inڪلاس اڳ ۾ ئي انهن تي لاڳو آهي.

خبردار ('بند')

هڪ خبرداري بند ڪري ٿو.

  1. $ ( ". alert-message" ). خبردار ( 'بند' )

ڊيمو

×

پاڪ guacamole! چڱو پاڻ کي چيڪ ڪريو، توهان تمام سٺو نه ڏسي رهيا آهيو.

×

اي ڦوٽو! توهان کي هڪ غلطي ملي آهي! ھن ۽ اھو تبديل ڪريو ۽ ٻيهر ڪوشش ڪريو. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras Mattis consectetur purus sit amet fermentum.

هي عمل وٺو يا ائين ڪريو