جاوا اسکرپٹ

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

انفرادی یا مرتب شدہ

پلگ انز کو انفرادی طور پر شامل کیا جا سکتا ہے (حالانکہ کچھ پر انحصار کی ضرورت ہوتی ہے)، یا سب ایک ساتھ۔ bootstrap.js اور bootstrap.min.js دونوں ایک فائل میں تمام پلگ ان پر مشتمل ہیں۔

ڈیٹا کی خصوصیات

آپ جاوا اسکرپٹ کی ایک لائن لکھے بغیر تمام بوٹسٹریپ پلگ انز کو مارک اپ API کے ذریعے خالصتاً استعمال کر سکتے ہیں۔ یہ بوٹسٹریپ کا فرسٹ کلاس API ہے اور پلگ ان استعمال کرتے وقت آپ کا پہلا خیال ہونا چاہیے۔

اس نے کہا، کچھ حالات میں اس فعالیت کو بند کرنا ضروری ہو سکتا ہے۔ لہٰذا، ہم `'data-api'` کے ساتھ باڈی نیم اسپیس پر تمام ایونٹس کو غیر بائنڈنگ کرکے ڈیٹا انتساب API کو غیر فعال کرنے کی اہلیت بھی فراہم کرتے ہیں۔ یہ اس طرح لگتا ہے:

  1. $ ( 'جسم' آف ( '.data-api' )

متبادل طور پر، کسی مخصوص پلگ ان کو نشانہ بنانے کے لیے، صرف اس طرح کے ڈیٹا-api نام کی جگہ کے ساتھ پلگ ان کا نام بطور نام شامل کریں:

  1. $ ( 'جسم' آف ( '.alert.data-api' )

پروگرامیٹک API

ہم یہ بھی مانتے ہیں کہ آپ کو تمام بوٹسٹریپ پلگ ان کو خالصتاً JavaScript API کے ذریعے استعمال کرنے کے قابل ہونا چاہیے۔ تمام عوامی APIs سنگل، چین کے قابل طریقے ہیں، اور اس پر عمل کیا گیا مجموعہ واپس کرتے ہیں۔

  1. $ ( ".btn.خطرہ" بٹن ( "ٹوگل" addClass ( "چربی" )

تمام طریقوں کو اختیاری آپشن آبجیکٹ کو قبول کرنا چاہیے، ایک سٹرنگ جو کسی خاص طریقہ کو نشانہ بناتی ہے، یا کچھ نہیں (جو پہلے سے طے شدہ رویے کے ساتھ پلگ ان شروع کرتا ہے):

  1. $ ( "#myModal" modal () // ڈیفالٹس کے ساتھ شروع کیا گیا۔
  2. $ ( "#myModal" موڈل ({ کی بورڈ : غلط }) // بغیر کی بورڈ کے شروع کیا گیا۔
  3. $ ( "#myModal" موڈل ( 'شو' ) // شروع کرتا ہے اور فوری طور پر شو کو طلب کرتا ہے۔

ہر پلگ ان اپنے خام کنسٹرکٹر کو ایک `کنسٹرکٹر` پراپرٹی پر بھی ظاہر کرتا ہے: $.fn.popover.Constructor۔ اگر آپ کوئی خاص پلگ ان مثال حاصل کرنا چاہتے ہیں، تو اسے براہ راست کسی عنصر سے بازیافت کریں: $('[rel=popover]').data('popover')۔

کوئی تنازعہ نہیں۔

بعض اوقات بوٹسٹریپ پلگ ان کو دوسرے UI فریم ورک کے ساتھ استعمال کرنا ضروری ہوتا ہے۔ ان حالات میں نام کی جگہ کے تصادم کبھی کبھار ہو سکتے ہیں۔ اگر ایسا ہوتا ہے، تو آپ اس .noConflictپلگ ان پر کال کر سکتے ہیں جس کی قدر کو آپ واپس کرنا چاہتے ہیں۔

  1. var بوٹسٹریپ بٹن = $ ۔ fn _ بٹن _ noConflict () // $.fn.button کو پہلے تفویض کردہ قدر پر واپس کریں۔
  2. $ _ fn _ bootstrapBtn = بوٹسٹریپ بٹن // $().bootstrapBtn بوٹسٹریپ کی فعالیت

تقریبات

بوٹسٹریپ زیادہ تر پلگ ان کی منفرد کارروائیوں کے لیے حسب ضرورت واقعات فراہم کرتا ہے۔ showعام طور پر، یہ ایک انفینٹیو اور ماضی کے حصہ دار کی شکل میں آتے ہیں - جہاں ایک واقعہ کے آغاز پر infinitive (ex. ) کو متحرک کیا جاتا ہے، اور اس کی ماضی کی شریک شکل (ex. shown) کسی عمل کی تکمیل پر محرک ہوتی ہے۔

تمام غیرمعمولی واقعات کو روکنے کی ڈیفالٹ فعالیت فراہم کرتے ہیں۔ یہ کسی کارروائی کے شروع ہونے سے پہلے اس پر عمل درآمد کو روکنے کی صلاحیت فراہم کرتا ہے۔

  1. $ ( '#myModal' پر ( 'شو' ، فنکشن ( ای ) {
  2. اگر (! ڈیٹا ) واپس کریں e . preventDefault () // موڈل کو دکھانے سے روکتا ہے۔
  3. })

منتقلی کے بارے میں

منتقلی کے آسان اثرات کے لیے، دوسری JS فائلوں کے ساتھ ایک بار bootstrap-transition.js شامل کریں۔ اگر آپ مرتب شدہ (یا کم کردہ) bootstrap.js استعمال کر رہے ہیں ، تو اسے شامل کرنے کی ضرورت نہیں ہے—یہ پہلے سے موجود ہے۔

کیسز استعمال کریں۔

منتقلی پلگ ان کی چند مثالیں:

  • موڈلز میں پھسلنا یا دھندلا ہونا
  • ٹیبز کو ختم کرنا
  • انتباہات کو ختم کرنا
  • سلائیڈنگ کیروسل پینز

مثالیں

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

جامد مثال

فوٹر میں ہیڈر، باڈی، اور اعمال کے سیٹ کے ساتھ ایک پیش کردہ ماڈل۔

  1. <div class = "modal hide fade" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </ بٹن>
  4. <h3> موڈل ہیڈر </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> ایک عمدہ جسم… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" > بند کریں </a>
  11. <a href = "#" class = "btn btn-primary" > تبدیلیاں محفوظ کریں </a>
  12. </div>
  13. </div>

لائیو ڈیمو

نیچے دیئے گئے بٹن پر کلک کر کے JavaScript کے ذریعے موڈل کو ٹوگل کریں۔ یہ صفحہ کے اوپری حصے سے نیچے پھسل جائے گا اور دھندلا جائے گا۔

  1. <!-- موڈل کو متحرک کرنے کا بٹن -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > ڈیمو موڈل لانچ کریں </a>
  3.  
  4. <!-- موڈل -->
  5. <div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >
  6. <div class = "modal-header" >
  7. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  8. <h3 id = "myModalLabel" > موڈل ہیڈر </h3>
  9. </div>
  10. <div class = "modal-body" >
  11. <p> ایک عمدہ جسم… </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > بند کریں </ بٹن>
  15. <بٹن کلاس = "btn btn-primary" > تبدیلیاں محفوظ کریں </button>
  16. </div>
  17. </div>

استعمال

ڈیٹا اوصاف کے ذریعے

جاوا اسکرپٹ لکھے بغیر موڈل کو چالو کریں۔ ایک کنٹرولر عنصر پر سیٹ کریں data-toggle="modal"، جیسے بٹن، ایک کے ساتھ data-target="#foo"یا href="#foo"کسی مخصوص موڈل کو ٹوگل کرنے کے لیے ہدف بنانا۔

  1. <button type = "button" data- toggle = "modal " data-target = "#myModal" > موڈل لانچ کریں </button>

جاوا اسکرپٹ کے ذریعے

myModalJavaScript کی ایک لائن کے ساتھ id کے ساتھ ایک موڈل کو کال کریں :

  1. $ ( '#myModal' موڈل ( اختیارات )

اختیارات

اختیارات کو ڈیٹا انتساب یا JavaScript کے ذریعے منتقل کیا جا سکتا ہے۔ ڈیٹا کی خصوصیات کے لیے، آپشن کا نام شامل کریں data-، جیسا کہ میں data-backdrop=""۔

نام قسم پہلے سے طے شدہ تفصیل
پس منظر بولین سچ ہے ایک موڈل بیک ڈراپ عنصر پر مشتمل ہے۔ متبادل طور پر، staticایک ایسے پس منظر کی وضاحت کریں جو کلک کرنے پر موڈل کو بند نہ کرے۔
کی بورڈ بولین سچ ہے Escape کلید کو دبانے پر موڈل بند ہو جاتا ہے۔
دکھائیں بولین سچ ہے شروع ہونے پر موڈل دکھاتا ہے۔
دور دراز راستہ جھوٹا

اگر ریموٹ یو آر ایل فراہم کیا جاتا ہے تو، مواد کو jQuery کے loadطریقہ کار کے ذریعے لوڈ کیا جائے گا اور .modal-body. اگر آپ ڈیٹا API استعمال کر رہے ہیں، تو آپ متبادل طور hrefپر ریموٹ سورس کی وضاحت کے لیے ٹیگ کا استعمال کر سکتے ہیں۔ اس کی ایک مثال ذیل میں دکھائی گئی ہے۔

  1. <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

طریقے

.modal(اختیارات)

آپ کے مواد کو ایک ماڈل کے طور پر فعال کرتا ہے۔ اختیاری اختیارات کو قبول کرتا ہے object۔

  1. $ ( '#myModal' موڈل ({
  2. کی بورڈ : غلط
  3. })

.modal('ٹوگل')

دستی طور پر ایک موڈل ٹوگل کرتا ہے۔

  1. $ ( '#myModal' موڈل ( 'ٹوگل' )

.modal('شو')

دستی طور پر ایک موڈل کھولتا ہے۔

  1. $ ( '#myModal' موڈل ( 'شو' )

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

دستی طور پر ایک موڈل چھپاتا ہے۔

  1. $ ( '#myModal' موڈل ( 'چھپائیں' )

تقریبات

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

تقریب تفصیل
دکھائیں یہ واقعہ فوری طور پر فائر ہو جاتا ہے جب showمثال کا طریقہ کہا جاتا ہے۔
دکھایا گیا یہ ایونٹ اس وقت برطرف ہو جاتا ہے جب موڈل صارف کے لیے مرئی ہو جاتا ہے (سی ایس ایس ٹرانزیشن مکمل ہونے کا انتظار کرے گا)۔
چھپائیں اس واقعہ کو فوری طور پر برطرف کر دیا جاتا ہے جب hideمثال کے طریقے کو بلایا جاتا ہے۔
چھپا ہوا یہ ایونٹ اس وقت برطرف ہو جاتا ہے جب موڈل صارف سے پوشیدہ ہو جاتا ہے (سی ایس ایس ٹرانزیشن مکمل ہونے کا انتظار کرے گا)۔
  1. $ ( '#myModal' پر ( 'پوشیدہ' ، فنکشن () {
  2. // کچھ کرو...
  3. })

navbar میں مثال

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

چربی

Ad leggings keytar، brunch id art Party dolor labore. Pitchfork yr enim lo-fi اس سے پہلے کہ وہ qui فروخت ہو جائیں۔ ٹمبلر فارم ٹو ٹیبل سائیکل کے حقوق جو بھی ہوں۔ Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, Williamsburg hoodie minim qui آپ نے شاید ان کے بارے میں نہیں سنا ہوگا اور cardigan Trust fund culpa biodiesel wes anderson aesthetic. نہیل ٹیٹو ایکوسیمس، کریڈ irony بایوڈیزل کیفییہ آرٹیسن الامکو نتیجہ۔

@mdo

وینیم مارفا مونچھیں سکیٹ بورڈ، ایڈی پیسائزنگ فوگیٹ ویلٹ پچ فورک داڑھی۔ فریگن بیئرڈ ایلیکووا کپیڈیٹاٹ میکسوینی کا ویرو۔ کپیڈیٹاٹ چار لوکو نیسی، ای اے ہیلویٹیکا نولا کارلس۔ ٹیٹو شدہ کاسبی سویٹر فوڈ ٹرک، میکسوینی کا کوئز نان فریگن ونائل۔ لو فائی ویس اینڈرسن +1 سرٹوریل۔ کارلس غیر جمالیاتی مشق quis gentrify. بروکلین ایڈپیسیسنگ کرافٹ بیئر وائس کیٹار ڈیزرنٹ۔

ایک

Occaecat commodo aliqua delectus. فاپ کرافٹ بیئر ڈیزرنٹ سکیٹ بورڈ ای اے۔ لومو بائیسکل رائٹس ایڈپیسسنگ بنہ ایم آئی، ویلیٹ ای اے سنٹ نیکسٹ لیول لوکاوور سنگل اوریجن کافی ان میگنا وینیم۔ ہائی لائف آئی ڈی ونائل، ایکو پارک کا نتیجہ کوئز ایلیکیپ بنہ ایم آئی پچ فورک۔ Vero VHS est adipisising. DIY کم سے کم میسنجر بیگ کا انتخاب کریں۔ کریڈٹ سابق میں، پائیدار ڈیلیکٹس کنسیکٹور فینی پیک آئی فون۔

دو

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

کیٹار ٹوئی بلاگ، کلپا میسنجر بیگ مارفا جو بھی ڈیلیکٹس فوڈ ٹرک ہو۔ Sapiente synth id assumenda. Locavore sed helvetica cliche irony، thundercats آپ نے شاید ان کے بارے میں نہیں سنا ہوگا جس کے نتیجے میں hoodie gluten-free lo-fi fap aliquip۔ لیبر ایلیٹ پلیسیٹ اس سے پہلے کہ وہ فروخت ہو جائیں، ٹیری رچرڈسن پروڈنٹ برنچ نیسکینٹ کوئز کوسبی سویٹر پیراٹور کیفیہ یوٹ ہیلویٹیکا آرٹیسن۔ کارڈیگن کرافٹ بیئر سیٹن ریڈی میڈ ویلٹ۔ وی ایچ ایس چیمبرے لیبرز عارضی وینیم۔ Anim mollit minim commodo ullamco thundercats.


استعمال

ڈیٹا اوصاف کے ذریعے

اپنی ٹاپ بار نیویگیشن میں آسانی سے اسکرول اسپی رویے کو شامل data-spy="scroll"کرنے کے لیے، صرف اس عنصر میں شامل کریں جس کی آپ جاسوسی کرنا چاہتے ہیں (عام طور پر یہ باڈی ہوگی) اور data-target=".navbar"یہ منتخب کرنے کے لیے کہ کون سا نیویگیشن استعمال کرنا ہے۔ .navآپ ایک جزو کے ساتھ scrollspy استعمال کرنا چاہیں گے ۔

  1. <body data-spy = "scroll" data-target = ".navbar" > ... </body>

جاوا اسکرپٹ کے ذریعے

اسکرول اسپی کو جاوا اسکرپٹ کے ذریعے کال کریں:

  1. $ ( '#navbar' scrollspy ()
سنو! Navbar لنکس میں قابل حل شناختی اہداف ہونے چاہئیں۔ مثال کے طور پر، <a href="#home">home</a>ڈوم میں کسی چیز کے مطابق ہونا ضروری ہے جیسے <div id="home"></div>.

طریقے

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

DOM سے عناصر کو شامل کرنے یا ہٹانے کے ساتھ مل کر scrollspy کا استعمال کرتے وقت، آپ کو ریفریش طریقہ کو اس طرح کال کرنے کی ضرورت ہوگی:

  1. $ ( '[data-spy="scroll"]' ہر ایک ( فنکشن () {
  2. var $spy = $ ( یہ ) scrollspy ( 'ریفریش' )
  3. });

اختیارات

اختیارات کو ڈیٹا انتساب یا JavaScript کے ذریعے منتقل کیا جا سکتا ہے۔ ڈیٹا کی خصوصیات کے لیے، آپشن کا نام شامل کریں data-، جیسا کہ میں data-offset=""۔

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

تقریبات

تقریب تفصیل
محرک کریں جب بھی اسکرول اسپی کے ذریعہ کوئی نیا آئٹم چالو ہوجاتا ہے تو یہ واقعہ فائر ہوجاتا ہے۔

مثال کے ٹیبز

مقامی مواد کے پین کے ذریعے منتقلی کے لیے فوری، متحرک ٹیب کی فعالیت شامل کریں، یہاں تک کہ ڈراپ ڈاؤن مینو کے ذریعے۔

را ڈینم آپ نے شاید ان کے بارے میں جین شارٹس آسٹن کے بارے میں نہیں سنا ہوگا۔ 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.


استعمال

جاوا اسکرپٹ کے ذریعے قابل ٹیب ٹیبز کو فعال کریں (ہر ٹیب کو انفرادی طور پر چالو کرنے کی ضرورت ہے):

  1. $ ( '#myTab a' کلک کریں ( فنکشن ( ای ) {
  2. e _ preventDefault ();
  3. $ ( یہ ) ٹیب ( 'شو'
  4. })

آپ انفرادی ٹیبز کو کئی طریقوں سے چالو کر سکتے ہیں:

  1. $ ( '#myTab a[href="#profile"]' ٹیب ( 'شو' // نام سے ٹیب منتخب کریں۔
  2. $ ( '#myTab a:first' ٹیب ( 'شو' // پہلا ٹیب منتخب کریں۔
  3. $ ( '#myTab a:last' ٹیب ( 'شو' // آخری ٹیب منتخب کریں۔
  4. $ ( '#myTab li:eq(2) a' ٹیب ( 'شو' // تیسرا ٹیب منتخب کریں (0-انڈیکسڈ)

مارک اپ

آپ کسی بھی جاوا اسکرپٹ کو لکھے بغیر data-toggle="tab"یا data-toggle="pill"کسی عنصر کی وضاحت کرکے ٹیب یا گولی نیویگیشن کو چالو کرسکتے ہیں۔ navٹیب میں اور nav-tabsکلاسز کو شامل ulکرنے سے بوٹسٹریپ ٹیب اسٹائل لاگو ہوگا۔

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Home </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > پروفائل </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > پیغامات </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > ترتیبات </a></li>
  6. </ul>

طریقے

$().tab

ایک ٹیب عنصر اور مواد کے کنٹینر کو چالو کرتا ہے۔ ٹیب میں یا تو data-targetDOM hrefمیں کنٹینر نوڈ کو ٹارگٹ کرنے والا ہونا چاہیے۔

  1. <ul class = "nav nav -tabs" id = "myTab" >
  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 = "tab-content" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pan" id = "messages" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( فنکشن () {
  17. $ ( '#myTab a:last' ٹیب ( 'شو'
  18. })
  19. </script>

تقریبات

تقریب تفصیل
دکھائیں یہ ایونٹ ٹیب شو پر فائر ہوتا ہے، لیکن اس سے پہلے کہ نیا ٹیب دکھایا گیا ہو۔ event.targetبالترتیب فعال ٹیب اور event.relatedTargetپچھلے فعال ٹیب (اگر دستیاب ہو) کو نشانہ بنانے کے لیے استعمال کریں ۔
دکھایا گیا یہ ایونٹ ٹیب کے دکھائے جانے کے بعد ٹیب شو پر فائر ہوتا ہے۔ event.targetبالترتیب فعال ٹیب اور event.relatedTargetپچھلے فعال ٹیب (اگر دستیاب ہو) کو نشانہ بنانے کے لیے استعمال کریں ۔
  1. $ ( 'a[data-toggle="tab"]' پر ( 'دکھایا' ، فنکشن ( ای ) {
  2. e _ ہدف // چالو ٹیب
  3. e _ متعلقہ ہدف // پچھلا ٹیب
  4. })

مثالیں

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

کارکردگی کی وجوہات کی بناء پر، ٹول ٹِپ اور پاپ اوور ڈیٹا ایپس آپٹ اِن ہیں، یعنی آپ کو خود ان کو شروع کرنا چاہیے ۔

ٹول ٹپس دیکھنے کے لیے نیچے دیے گئے لنکس پر ہوور کریں:

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

چار سمتیں۔

ان پٹ گروپس میں ٹول ٹپس

بوٹسٹریپ ان پٹ گروپس کے ساتھ ٹول ٹپس اور پاپ اوور استعمال کرتے وقت، آپ کو containerناپسندیدہ ضمنی اثرات سے بچنے کے لیے (ذیل میں دستاویزی) آپشن سیٹ کرنا ہوگا۔


استعمال

جاوا اسکرپٹ کے ذریعے ٹول ٹپ کو متحرک کریں:

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

اختیارات

اختیارات کو ڈیٹا انتساب یا JavaScript کے ذریعے منتقل کیا جا سکتا ہے۔ ڈیٹا کی خصوصیات کے لیے، آپشن کا نام شامل کریں data-، جیسا کہ میں data-animation=""۔

نام قسم پہلے سے طے شدہ تفصیل
حرکت پذیری بولین سچ ہے ٹول ٹپ پر سی ایس ایس فیڈ ٹرانزیشن کا اطلاق کریں۔
html بولین جھوٹا ٹول ٹپ میں html داخل کریں۔ اگر غلط ہے تو، jquery کا textطریقہ ڈوم میں مواد داخل کرنے کے لیے استعمال کیا جائے گا۔ اگر آپ XSS حملوں کے بارے میں فکر مند ہیں تو متن کا استعمال کریں۔
جگہ کا تعین تار | فنکشن 'اوپر' ٹول ٹپ کو کیسے پوزیشن میں رکھیں - ٹاپ | نیچے | بائیں | صحیح
سلیکٹر تار جھوٹا اگر ایک سلیکٹر فراہم کیا جاتا ہے تو، ٹول ٹِپ اشیاء کو مخصوص اہداف کے حوالے کر دیا جائے گا۔
عنوان تار | فنکشن '' اگر ٹائٹل ٹیگ موجود نہ ہو تو ڈیفالٹ ٹائٹل ویلیو
محرک تار 'ہور فوکس' ٹول ٹپ کو کیسے متحرک کیا جاتا ہے - کلک کریں | ہوور | توجہ مرکوز | دستی نوٹ کریں کہ آپ کیس پاس ٹرگر ملٹیپل، اسپیس سیپریٹڈ، ٹرگر کی اقسام۔
تاخیر نمبر | چیز 0

ٹول ٹپ (ایم ایس) کو دکھانے اور چھپانے میں تاخیر - دستی ٹرگر کی قسم پر لاگو نہیں ہوتا ہے۔

اگر کوئی نمبر فراہم کیا جاتا ہے، تو چھپنے / دکھانے دونوں پر تاخیر کا اطلاق ہوتا ہے۔

آبجیکٹ کی ساخت ہے:delay: { show: 500, hide: 100 }

کنٹینر تار | جھوٹا جھوٹا

ٹول ٹپ کو ایک مخصوص عنصر میں شامل کرتا ہے۔container: 'body'

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

مارک اپ

  1. <a href = "#" data-toggle = "tooltip" title = "first tooltip" > میرے اوپر ہوور کریں </a>

طریقے

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

ایک ٹول ٹِپ ہینڈلر کو عنصر کے مجموعہ سے منسلک کرتا ہے۔

.tooltip('شو')

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

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

ٹول ٹپ ('چھپائیں')

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

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

ٹول ٹپ ('ٹوگل')

ایک عنصر کے ٹول ٹپ کو ٹوگل کرتا ہے۔

  1. $ ( '# عنصر' ٹول ٹپ ( 'ٹوگل' )

.tooltip('destroy')

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

  1. $ ( '# عنصر' ٹول ٹپ ( 'تباہ' )

مثالیں

ہاؤسنگ ثانوی معلومات کے لیے کسی بھی عنصر میں مواد کے چھوٹے اوورلیز شامل کریں، جیسے کہ آئی پیڈ پر۔ پاپ اوور کو متحرک کرنے کے لیے بٹن پر ہوور کریں۔ ٹول ٹپ کو شامل کرنے کی ضرورت ہے ۔

جامد پاپ اوور

چار اختیارات دستیاب ہیں: اوپر، دائیں، نیچے، اور بائیں سیدھ میں۔

پاپ اوور ٹاپ

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover حق

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

پاپ اوور نیچے

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

پاپ اوور رہ گیا۔

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

dataجاوا اسکرپٹ اور کسی انتساب کے اندر موجود مواد سے پاپ اوور کے طور پر کوئی مارک اپ نہیں دکھایا گیا ہے۔

لائیو ڈیمو

چار سمتیں۔


استعمال

جاوا اسکرپٹ کے ذریعے پاپ اوور کو فعال کریں:

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

اختیارات

اختیارات کو ڈیٹا انتساب یا JavaScript کے ذریعے منتقل کیا جا سکتا ہے۔ ڈیٹا کی خصوصیات کے لیے، آپشن کا نام شامل کریں data-، جیسا کہ میں data-animation=""۔

نام قسم پہلے سے طے شدہ تفصیل
حرکت پذیری بولین سچ ہے ٹول ٹپ پر سی ایس ایس فیڈ ٹرانزیشن کا اطلاق کریں۔
html بولین جھوٹا پاپ اوور میں HTML داخل کریں۔ اگر غلط ہے تو، jquery کا textطریقہ ڈوم میں مواد داخل کرنے کے لیے استعمال کیا جائے گا۔ اگر آپ XSS حملوں کے بارے میں فکر مند ہیں تو متن کا استعمال کریں۔
جگہ کا تعین تار | فنکشن 'صحیح' پاپ اوور کو کیسے پوزیشن میں رکھیں - ٹاپ | نیچے | بائیں | صحیح
سلیکٹر تار جھوٹا اگر ایک سلیکٹر فراہم کیا جاتا ہے تو، ٹول ٹِپ اشیاء کو مخصوص اہداف کے حوالے کر دیا جائے گا۔
محرک تار 'کلک' پاپ اوور کو کیسے متحرک کیا جاتا ہے - کلک کریں | ہوور | توجہ مرکوز | دستی
عنوان تار | فنکشن '' پہلے سے طے شدہ عنوان کی قدر اگر `title` انتساب موجود نہیں ہے۔
مواد تار | فنکشن '' ڈیفالٹ مواد کی قدر اگر `ڈیٹا-مواد` انتساب موجود نہیں ہے۔
تاخیر نمبر | چیز 0

پاپ اوور (ایم ایس) کو دکھانے اور چھپانے میں تاخیر - دستی ٹرگر کی قسم پر لاگو نہیں ہوتا ہے۔

اگر کوئی نمبر فراہم کیا جاتا ہے، تو چھپنے / دکھانے دونوں پر تاخیر کا اطلاق ہوتا ہے۔

آبجیکٹ کی ساخت ہے:delay: { show: 500, hide: 100 }

کنٹینر تار | جھوٹا جھوٹا

پاپ اوور کو ایک مخصوص عنصر سے جوڑتا ہے۔container: 'body'

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

مارک اپ

کارکردگی کی وجوہات کی بناء پر، ٹول ٹِپ اور پاپ اوور ڈیٹا ایپس آپٹ ان ہیں۔ اگر آپ انہیں استعمال کرنا چاہتے ہیں تو صرف ایک سلیکٹر آپشن کی وضاحت کریں۔

طریقے

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

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

.popover('شو')

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

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

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

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

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

.popover('ٹوگل')

ایک عناصر کے پاپ اوور کو ٹوگل کرتا ہے۔

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

.popover('destroy')

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

  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.

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


استعمال

جاوا اسکرپٹ کے ذریعے الرٹ کی برخاستگی کو فعال کریں:

  1. $ ( ". الرٹ" الرٹ ()

مارک اپ

data-dismiss="alert"خود بخود الرٹ قریبی فعالیت دینے کے لیے بس اپنے کلوز بٹن میں شامل کریں ۔

  1. <a class = "close" data-dismiss = "alert" href = "#" > × </a>

طریقے

$() الرٹ()

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

الرٹ ('بند')

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

  1. $ ( ". الرٹ" الرٹ ( 'قریب' )

تقریبات

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

تقریب تفصیل
بند کریں یہ واقعہ فوری طور پر فائر ہو جاتا ہے جب closeمثال کا طریقہ کہا جاتا ہے۔
بند جب الرٹ بند کر دیا جاتا ہے تو یہ ایونٹ فائر کیا جاتا ہے (سی ایس ایس ٹرانزیشن مکمل ہونے کا انتظار کرے گا)۔
  1. $ ( '#my-alert' پابند ( 'بند' ، فنکشن () {
  2. // کچھ کرو...
  3. })

مثال کے استعمال

بٹنوں کے ساتھ مزید کام کریں۔ کنٹرول بٹن بیان کرتا ہے یا ٹول بار جیسے مزید اجزاء کے لیے بٹنوں کے گروپ بناتا ہے۔

ریاستی

data-loading-text="Loading..."بٹن پر لوڈنگ حالت استعمال کرنے کے لیے شامل کریں ۔

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "Loading..." > لوڈنگ کی حالت </button>

سنگل ٹوگل

data-toggle="button"ایک بٹن پر ٹوگلنگ کو چالو کرنے کے لیے شامل کریں ۔

  1. <button type = "button" class = "btn btn-primary" data-toggle = "button" > سنگل ٹوگل </button>

چیک باکس

data-toggle="buttons-checkbox"بی ٹی این گروپ پر چیک باکس اسٹائل ٹوگلنگ کے لیے شامل کریں ۔

  1. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  2. <button type = "button" class = "btn btn-primary" > بائیں </ بٹن>
  3. <بٹن کی قسم = "بٹن" کلاس = "btn btn-primary" > درمیانی </ بٹن>
  4. <button type = "button" class = "btn btn-primary" > دائیں </ بٹن>
  5. </div>

ریڈیو

data-toggle="buttons-radio"btn-group پر ریڈیو اسٹائل ٹوگلنگ کے لیے شامل کریں ۔

  1. <div class = "btn-group" data-toggle = "buttons-radio" >
  2. <button type = "button" class = "btn btn-primary" > بائیں </ بٹن>
  3. <بٹن کی قسم = "بٹن" کلاس = "btn btn-primary" > درمیانی </ بٹن>
  4. <button type = "button" class = "btn btn-primary" > دائیں </ بٹن>
  5. </div>

استعمال

جاوا اسکرپٹ کے ذریعے بٹنوں کو فعال کریں:

  1. $ ( '.nav-tabs' بٹن ()

مارک اپ

ڈیٹا کی خصوصیات بٹن پلگ ان کے لیے لازمی ہیں۔ مارک اپ کی مختلف اقسام کے لیے نیچے دیے گئے مثال کوڈ کو دیکھیں۔

اختیارات

کوئی نہیں۔

طریقے

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

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

سنو! آپ انتساب کا استعمال کرکے بٹن کی آٹو ٹوگلنگ کو فعال کرسکتے ہیں data-toggle۔
  1. <بٹن کی قسم = "بٹن" کلاس = "btn" ڈیٹا ٹوگل = "بٹن" > </ بٹن>

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

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

  1. <button type = "button" class = "btn" data-loading-text = "لوڈنگ سامان..." > ... </button>
سنو! Firefox صفحہ لوڈز میں غیر فعال حالت کو برقرار رکھتا ہے ۔ اس کے لیے ایک حل استعمال کرنا autocomplete="off"ہے۔

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

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

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

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

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

کے بارے میں

ایکارڈینز اور نیویگیشن جیسے ٹوٹنے والے اجزاء کے لیے بیس اسٹائل اور لچکدار سپورٹ حاصل کریں۔

* ٹرانزیشن پلگ ان کو شامل کرنے کی ضرورت ہے۔

ایکارڈین کی مثال

کولپس پلگ ان کا استعمال کرتے ہوئے، ہم نے ایک سادہ ایکارڈین اسٹائل ویجیٹ بنایا:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. فوڈ ٹرک quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee Nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica، craft beer labore wes anderson cred nesciunt sapiente ea proident۔ Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt آپ نے شاید ان کے بارے میں نہیں سنا ہو گا acusamus labore sustainable VHS۔
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. فوڈ ٹرک quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee Nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica، craft beer labore wes anderson cred nesciunt sapiente ea proident۔ Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt آپ نے شاید ان کے بارے میں نہیں سنا ہو گا acusamus labore sustainable VHS۔
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. فوڈ ٹرک quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee Nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica، craft beer labore wes anderson cred nesciunt sapiente ea proident۔ Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt آپ نے شاید ان کے بارے میں نہیں سنا ہو گا acusamus labore sustainable VHS۔
  1. <div class = "accordion" id = "accordion2" >
  2. <div class = "accordion-group" >
  3. <div class = "accordion-heading" >
  4. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >
  5. ٹوٹنے کے قابل گروپ آئٹم #1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "accordion-body collapse in" >
  9. <div class = "accordion-inner" >
  10. انیم پاریٹور کلچ...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "accordion-group" >
  15. <div class = "accordion-heading" >
  16. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >
  17. ٹوٹنے کے قابل گروپ آئٹم #2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "accordion-body collapse" >
  21. <div class = "accordion-inner" >
  22. انیم پاریٹور کلچ...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

آپ ایکارڈین مارک اپ کے بغیر بھی پلگ ان استعمال کر سکتے ہیں۔ ایک بٹن بنائیں دوسرے عنصر کے پھیلنے اور گرنے کو ٹوگل کریں۔

  1. <بٹن کی قسم = "بٹن" کلاس = "btn btn-خطرہ" data- toggle = "collapse" data-target = "#demo" >
  2. سادہ ٹوٹنے والا
  3. </ بٹن>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>

استعمال

ڈیٹا اوصاف کے ذریعے

کسی ٹوٹنے والے عنصر کا کنٹرول خود بخود تفویض کرنے کے لیے صرف عنصر میں شامل کریں data-toggle="collapse"اور a کریں۔ انتساب کلیپس کو لاگو کرنے کے لیے ایک سی ایس ایس سلیکٹر کو قبول کرتا ہے data-target۔ data-targetکلاس collapseکو ٹوٹنے والے عنصر میں شامل کرنا یقینی بنائیں۔ اگر آپ اسے ڈیفالٹ کھولنا چاہتے ہیں تو اضافی کلاس شامل کریں in۔

اکارڈیئن نما گروپ مینجمنٹ کو کولیپس ایبل کنٹرول میں شامل کرنے کے لیے، ڈیٹا انتساب شامل کریں data-parent="#selector"۔ اس کو عملی شکل میں دیکھنے کے لیے ڈیمو سے رجوع کریں۔

جاوا اسکرپٹ کے ذریعے

اس کے ساتھ دستی طور پر فعال کریں:

  1. $ ( ". گرنا" گرنا ()

اختیارات

اختیارات کو ڈیٹا انتساب یا JavaScript کے ذریعے منتقل کیا جا سکتا ہے۔ ڈیٹا کی خصوصیات کے لیے، آپشن کا نام شامل کریں data-، جیسا کہ میں data-parent=""۔

نام قسم پہلے سے طے شدہ تفصیل
والدین سلیکٹر جھوٹا اگر سلیکٹر ہے تو اس ٹوٹنے کے قابل آئٹم کے دکھائے جانے پر متعین پیرنٹ کے تحت تمام ٹوٹنے والے عناصر بند ہو جائیں گے۔ (روایتی accordion رویے کی طرح)
ٹوگل بولین سچ ہے انووکیشن پر ٹوٹنے والے عنصر کو ٹوگل کرتا ہے۔

طریقے

.collaps(اختیارات)

آپ کے مواد کو ایک ٹوٹنے کے قابل عنصر کے طور پر فعال کرتا ہے۔ اختیاری اختیارات کو قبول کرتا ہے object۔

  1. $ ( '#myCollapsible' گرنا ({
  2. ٹوگل : غلط
  3. })

.collapse('toggle')

دکھائے جانے یا چھپنے کے لیے ٹوٹنے کے قابل عنصر کو ٹوگل کرتا ہے۔

.collapse('شو')

ایک ٹوٹنے والا عنصر دکھاتا ہے۔

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

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

تقریبات

بوٹسٹریپ کی گرنے والی کلاس گرنے کی فعالیت کو جوڑنے کے لیے چند واقعات کو بے نقاب کرتی ہے۔

تقریب تفصیل
دکھائیں یہ واقعہ فوری طور پر فائر ہو جاتا ہے جب showمثال کا طریقہ کہا جاتا ہے۔
دکھایا گیا اس ایونٹ کو اس وقت برطرف کیا جاتا ہے جب گرنے والے عنصر کو صارف کے لیے مرئی بنایا جاتا ہے (سی ایس ایس ٹرانزیشن مکمل ہونے کا انتظار کرے گا)۔
چھپائیں اس واقعہ کو فوری طور پر برطرف کر دیا جاتا ہے جب hideطریقہ کار کہا جاتا ہے۔
چھپا ہوا اس ایونٹ کو اس وقت برطرف کیا جاتا ہے جب ایک گرنے والے عنصر کو صارف سے چھپایا جاتا ہے (سی ایس ایس ٹرانزیشن مکمل ہونے کا انتظار کرے گا)۔
  1. $ ( '#myCollapsible' پر ( 'پوشیدہ' ، فنکشن () {
  2. // کچھ کرو...
  3. })

مثال

کسی بھی فارم ٹیکسٹ ان پٹ کے ساتھ جلدی سے خوبصورت ٹائپ ہیڈز بنانے کے لیے ایک بنیادی، آسانی سے بڑھا ہوا پلگ ان۔

  1. <input type = "text" data- provide = "typeahead" >

autocomplete="off"آپ ڈیفالٹ براؤزر مینوز کو بوٹسٹریپ ٹائپ ہیڈ ڈراپ ڈاؤن پر ظاہر ہونے سے روکنے کے لیے سیٹ کرنا چاہیں گے ۔


استعمال

ڈیٹا اوصاف کے ذریعے

جیسا کہ اوپر کی مثال میں دکھایا گیا ہے ٹائپ ہیڈ فنکشنلٹی کے ساتھ کسی عنصر کو رجسٹر کرنے کے لیے ڈیٹا کی خصوصیات شامل کریں۔

جاوا اسکرپٹ کے ذریعے

ٹائپ ہیڈ کو دستی طور پر اس کے ساتھ کال کریں:

  1. $ ( '.typeahead' ٹائپ ہیڈ ()

اختیارات

اختیارات کو ڈیٹا انتساب یا JavaScript کے ذریعے منتقل کیا جا سکتا ہے۔ ڈیٹا کی خصوصیات کے لیے، آپشن کا نام شامل کریں data-، جیسا کہ میں data-source=""۔

نام قسم پہلے سے طے شدہ تفصیل
ذریعہ صف، فنکشن [ ] ڈیٹا کا ذریعہ جس کے خلاف استفسار کرنا ہے۔ تاروں کی ایک صف یا فنکشن ہو سکتا ہے۔ فنکشن کو دو دلائل، queryان پٹ فیلڈ میں ویلیو اور processکال بیک پاس کیا جاتا ہے۔ processفنکشن کو کال بیک کی واحد دلیل کے ذریعے ڈیٹا سورس کو براہ راست یا غیر مطابقت پذیر طور پر واپس کر کے ہم وقت سازی کے ساتھ استعمال کیا جا سکتا ہے۔
اشیاء نمبر 8 ڈراپ ڈاؤن میں ڈسپلے کرنے کے لیے آئٹمز کی زیادہ سے زیادہ تعداد۔
کم سے کم لمبائی نمبر 1 خودکار تکمیل کی تجاویز کو متحرک کرنے سے پہلے حروف کی کم از کم لمبائی درکار ہے۔
میچر فنکشن کیس غیر حساس اس بات کا تعین کرنے کے لیے استعمال کیا جانے والا طریقہ کہ آیا کوئی سوال کسی آئٹم سے میل کھاتا ہے۔ ایک ہی دلیل کو قبول کرتا ہے، جس itemکے خلاف استفسار کی جانچ کرنا ہے۔ کے ساتھ موجودہ استفسار تک رسائی حاصل کریں this.query۔ trueاگر استفسار میچ ہو تو بولین لوٹائیں ۔
چھانٹنے والا فنکشن عین مطابق میچ،
کیس حساس،
کیس غیر حساس
خودکار نتائج کو ترتیب دینے کے لیے استعمال ہونے والا طریقہ۔ ایک ہی دلیل itemsکو قبول کرتا ہے اور ٹائپ ہیڈ مثال کی گنجائش رکھتا ہے۔ موجودہ استفسار کے ساتھ حوالہ دیں this.query۔
اپڈیٹر فنکشن منتخب آئٹم واپس کرتا ہے۔ منتخب کردہ آئٹم کو واپس کرنے کے لیے استعمال ہونے والا طریقہ۔ ایک ہی دلیل کو قبول کرتا ہے، itemاور ٹائپ ہیڈ مثال کی گنجائش رکھتا ہے۔
ہائی لائٹر فنکشن تمام ڈیفالٹ میچوں کو نمایاں کرتا ہے۔ خودکار تکمیل کے نتائج کو نمایاں کرنے کے لیے استعمال ہونے والا طریقہ۔ ایک ہی دلیل itemکو قبول کرتا ہے اور ٹائپ ہیڈ مثال کی گنجائش رکھتا ہے۔ html واپس آنا چاہیے۔

طریقے

.typeahead(اختیارات)

ٹائپ ہیڈ کے ساتھ ایک ان پٹ کو شروع کرتا ہے۔

مثال

بائیں طرف سب نیویگیشن افکس پلگ ان کا لائیو ڈیمو ہے۔


استعمال

ڈیٹا اوصاف کے ذریعے

کسی بھی عنصر میں آسانی سے affix برتاؤ شامل data-spy="affix"کرنے کے لیے، صرف اس عنصر میں شامل کریں جس کی آپ جاسوسی کرنا چاہتے ہیں۔ پھر یہ بتانے کے لیے آفسیٹس کا استعمال کریں کہ کسی عنصر کی پننگ کو کب آن اور آف کرنا ہے۔

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
سنو! آپ کو پن کیے ہوئے عنصر کی پوزیشن اور اس کے فوری والدین کے برتاؤ کا نظم کرنا چاہیے۔ پوزیشن کو affix, affix-topاور affix-bottom. ایک ممکنہ طور پر منہدم ہونے والے والدین کی جانچ کرنا یاد رکھیں جب affix لاگ ان ہوتا ہے کیونکہ یہ صفحہ کے عام بہاؤ سے مواد کو ہٹا رہا ہے۔

جاوا اسکرپٹ کے ذریعے

جاوا اسکرپٹ کے ذریعے affix پلگ ان کو کال کریں:

  1. $ ( '#navbar' چسپاں کرنا ()

اختیارات

اختیارات کو ڈیٹا انتساب یا JavaScript کے ذریعے منتقل کیا جا سکتا ہے۔ ڈیٹا کی خصوصیات کے لیے، آپشن کا نام شامل کریں data-، جیسا کہ میں data-offset-top="200"۔

نام قسم پہلے سے طے شدہ تفصیل
آفسیٹ نمبر | فنکشن | چیز 10 اسکرول کی پوزیشن کا حساب لگاتے وقت اسکرین سے آفسیٹ ہونے والے پکسلز۔ اگر ایک نمبر فراہم کیا جاتا ہے، تو آفسیٹ اوپر اور بائیں دونوں سمتوں میں لاگو کیا جائے گا۔ ایک سمت، یا متعدد منفرد آفسیٹس کو سننے کے لیے، صرف ایک آبجیکٹ فراہم offset: { x: 10 }کریں۔ جب آپ کو متحرک طور پر آف سیٹ فراہم کرنے کی ضرورت ہو تو ایک فنکشن استعمال کریں (کچھ ریسپانسیو ڈیزائنز کے لیے مفید)۔