اسان جو موڊل پلگ ان روايتي موڊل js پلگ ان تي هڪ سپر سلم ٽيڪ آهي، خاص خيال رکندي صرف بيئر ڪارڪردگي شامل ڪرڻ لاءِ جنهن جي اسان کي هتي twitter تي ضرورت آهي.
ڊائون لوڊ ڪريو
- $ ( '#my-modal' ). ماڊل ( اختيارن )
| نالو | قسم | ڊفالٽ | وضاحت |
|---|---|---|---|
| پس منظر | بولين | ڪوڙو | هڪ ماڊل پس منظر عنصر شامل آهي |
| ڪي بورڊ | بولين | ڪوڙو | موڊل کي بند ڪري ٿو جڏهن فرار ڪيچ کي دٻايو ويندو آهي |
| ڏيکارڻ | بولين | ڪوڙو | ڪلاس جي شروعات تي ماڊل کوليو |
توھان پنھنجي صفحي تي ماڊلز کي آساني سان چالو ڪري سگھو ٿا بغير جاوا اسڪرپٽ جي ھڪڙي لائن لکڻ جي. بس هڪ عنصر کي هڪ data-controls-modalخاصيت ڏيو جيڪو ماڊل عنصر جي سڃاڻپ سان ملندو آهي، ۽ جڏهن ڪلڪ ڪيو ويندو، اهو توهان جي ماڊل کي لانچ ڪندو. ماڊل اختيارن کي شامل ڪرڻ لاء، صرف انھن کي شامل ڪريو ڊيٽا خاصيتون پڻ شامل ڪريو.
- <a class = "btn" data-controls-modal = "my-modal" data-backdrop = "true" > لانچ موڊل </a>
نوٽيس جيڪڏهن توهان چاهيو ٿا ته توهان جو ماڊل اندر ۽ ٻاهر متحرڪ ٿئي، صرف .fadeپنهنجي عنصر ۾ هڪ ڪلاس شامل ڪريو .modal(هي عمل ۾ ڏسڻ لاءِ ڊيمو جو حوالو ڏيو).
توهان جي مواد کي ماڊل طور چالو ڪري ٿو. اختياري اختيارن کي قبول ڪري ٿو object.
- $ ( '#my-modal' ). ماڊل ({
- closeOnEscape : سچو
- })
دستي طور تي ماڊل کي ٽوگل ڪري ٿو.
- $ ( '#my-modal' ). ماڊل ( 'ٽگل' )
دستي طور تي هڪ ماڊل کوليو.
- $ ( '#my-modal' ). ماڊل ( 'شو' )
دستي طور تي هڪ ماڊل لڪائي ٿو.
- $ ( '#my-modal' ). ماڊل ( 'لڪ' )
ھڪڙو عنصر ماڊل ڪلاس مثال ڏئي ٿو.
- $ ( '#my-modal' ). ماڊل ( سچو )
نوٽ ڪريو متبادل طور تي، هن سان ٻيهر حاصل ڪري سگهجي ٿو $().data('modal').
بوٽ اسٽريپ جو ماڊل ڪلاس ڪجھ واقعن کي ظاهر ڪري ٿو ماڊل ڪارڪردگي ۾ ڇڪڻ لاءِ.
| واقعو | وصف |
|---|---|
| ڏيکارڻ | اهو واقعو فوري طور تي فائر ڪندو آهي جڏهن showمثال جو طريقو سڏيو ويندو آهي. |
| ڏيکاريل | اهو واقعو فائر ڪيو ويو آهي جڏهن ماڊل استعمال ڪندڙ کي ظاهر ڪيو ويو آهي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو). |
| لڪائڻ | اهو واقعو فوري طور تي فائر ڪيو ويو آهي جڏهن hideمثال جو طريقو سڏيو ويو آهي. |
| لڪيل | اهو واقعو فائر ڪيو ويو آهي جڏهن ماڊل ختم ٿي چڪو آهي صارف کان لڪايو وڃي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو). |
- $ ( '#my-modal' ). پابند ( 'لڪيل' ، فنڪشن () {
- // ڪجھ ڪر ...
- })
هي پلگ ان بوٽ اسٽريپ ٽاپبار يا ٽيب ٿيل نيويگيشن ۾ ڊراپ ڊائون رابطي کي شامل ڪرڻ لاءِ آهي.
ڊائون لوڊ ڪريو
- $ ( '#topbar' ). ڊراپ ڊائون ()
جلدي شامل ڪرڻ لاءِ ڊراپ ڊائون ڪارڪردگي ڪنهن به نيوي عنصر ۾، استعمال ڪريو data-dropdownوصف. ڪو به صحيح بوٽ اسٽراپ ڊراپ ڊائون خودڪار طور تي چالو ڪيو ويندو.
- <ul class = "tabs" >
- <li class = "active" ><a href = "#" > گهر </a></li>
- <li class = "dropdown" data-dropdown = "dropdown" >
- <a href = "#" class = "dropdown-toggle" > Dropdown </a>
- <ul class = "ڊراپ ڊائون مينيو" >
- <li><a href="#" > ثانوي لنڪ </a> < /li>
- <li><a href="#" > هتي ڪجھ ٻيو </a> </li>
- <li class = "divider" ></li>
- <li><a href="#" > ٻيو لنڪ </a> < /li>
- </ul>
- </li>
- </ul>
نوٽ ڪريو جيڪڏهن توهان جي UI ۾ ڪيترائي ڊراپ ڊائونز آهن، data-dropdownهڪ وڌيڪ اهم ڪنٽينر عنصر جهڙوڪ .tabsيا .topbar.
ڏنل ٽاپبار يا ٽيب ٿيل نيويگيشن لاءِ مينيو کي چالو ڪرڻ لاءِ پروگراماتي ايپ.
هي پلگ ان شامل ڪرڻ لاءِ آهي scrollspy (خودڪار اپڊيٽ ڪرڻ nav) رابطي کي بوٽ اسٽريپ ٽاپبار ۾.
ڊائون لوڊ ڪريو
- $ ( '#topbar' ). ڊراپ ڊائون ()
آساني سان شامل ڪرڻ لاءِ scrollspy رويي کي پنھنجي نيوي ۾، صرف شامل ڪريو data-scrollspyخاصيت کي .topbar.
- <div class = "topbar" data-scrollspy = "scrollspy" > ... </div>
خودڪار نيويگيشن بٽڻ کي چالو ڪري ٿو صارفين طرفان اسڪرول پوزيشن.
- $ ( 'body > .topbar' ). scrollSpy ()
نوٽ ڪريو Topbar اينڪر ٽيگ کي لازمي طور تي حل ڪرڻ لائق id هدفن جو هجڻ لازمي آهي. مثال طور، هڪ <a href="#home">home</a>لازمي طور تي ڊوم ۾ ڪنهن شيءِ سان ملندڙ جلندڙ آهي جهڙوڪ <div id="home"></div>.
scrollspy ڪارڪردگي لاءِ نيوي بٽڻ ۽ سيڪشن ڪوآرڊينيٽس ڪيچ ڪري ٿو. جيڪڏهن توهان کي هن ڪيش کي اپڊيٽ ڪرڻ جي ضرورت آهي (ممڪن آهي ته توهان وٽ متحرڪ مواد آهي) صرف هن ريفريش طريقي کي ڪال ڪريو. جيڪڏھن توھان استعمال ڪيو ڊيٽا وصف پنھنجي اسڪراول اسپيس کي بيان ڪرڻ لاءِ، صرف ڪال ڪريو ريفريش کي جسم تي.
- $ ( 'جسم' ). scrollspy ( 'ريفريش' )
هن صفحي تي ٽاپبار نيويگيشن چيڪ ڪريو.
هي پلگ ان جلدي، متحرڪ ٽيب ۽ گول ڪارڪردگي شامل ڪري ٿو.
ڊائون لوڊ ڪريو
- $ ( '.tabs' ). ٽيب ()
توھان چالو ڪري سگھو ٿا ٽيب يا گولي نيويگيشن بغير ڪنھن جاوا اسڪرپٽ لکڻ کان سواءِ انھن کي ھڪ data-tabsيا خصوصيت ڏيڻ data-pillsسان.
- <ul class = "tabs" data-tabs = "tabs" > ... </ul>
ڏنل ڪنٽينر لاءِ ٽيب ۽ گولي جي ڪارڪردگي کي چالو ڪري ٿو. ٽيب لنڪس کي دستاويز ۾ id جي حوالي ڪرڻ گهرجي.
- <ul class = "tabs" >
- <li class = "active" ><a href = "#home" > گھر </a></li>
- <li><a href = "#profile" > پروفائل </a></li>
- <li><a href = "#messages" > نياپا </a></li>
- <li><a href = "#settings" > سيٽنگون </a></li>
- </ul>
- <div class = "pill-content" >
- <div class = "active" id = "home" > ... </div>
- <div id = "profile" > ... </div>
- <div id = "پيغام" > ... </div>
- <div id = "سيٽنگون" > ... </div>
- </ul>
- <script>
- $ ( فنڪشن () {
- $ ( '.tabs' ). ٽيب ()
- })
- </script>
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.
جيسن فريم پاران لکيل شاندار jQuery.tipsy پلگ ان جي بنياد تي؛ twipsy هڪ اپڊيٽ ورجن آهي، جيڪو تصويرن تي ڀروسو نٿو ڪري، استعمال ڪري ٿو css3 لاءِ اينيميشن، ۽ ڊيٽا-صفات ٽائيٽل اسٽوريج لاءِ!
ڊائون لوڊ ڪريو
- $ ( '#مثال' ). ٽوپي ( اختيارن )
| نالو | قسم | ڊفالٽ | وضاحت |
|---|---|---|---|
| متحرڪ ڪرڻ | بولين | سچو | ٽول ٽائپ تي سي ايس ايس فيڊ ٽرانسشن لاڳو ڪريو |
| دير ۾ | نمبر | 0 | ٽول ٽائپ ڏيکارڻ کان اڳ دير ڪريو (ms) |
| دير ڪرڻ | نمبر | 0 | ٽول ٽائپ لڪائڻ کان اڳ دير (ms) |
| واپسي | تار | '' | استعمال ڪرڻ لاءِ متن جڏهن ڪو ٽول ٽائپ عنوان موجود نه هجي |
| لڳائڻ | تار | 'مٿي' | ٽول ٽائپ کي ڪيئن رکڻو آهي - مٿي | هيٺ | کاٻي | ساڄو |
| html | بولين | ڪوڙو | html مواد کي ٽول ٽائپ ۾ اجازت ڏئي ٿو |
| جيئرو | بولين | ڪوڙو | انفرادي ايونٽ هينڊلر جي بدران ايونٽ وفد استعمال ڪريو |
| بند ڪرڻ | نمبر | 0 | ٽارگيٽ عنصر کان ٽول ٽائپ جو پکسل آفسيٽ |
| عنوان | تار | فنڪشن | 'عنوان' | ٽائيٽل ٽيڪسٽ حاصل ڪرڻ لاء خاصيت يا طريقو |
| محرڪ | تار | 'هور' | ٽول ٽِپ ڪيئن شروع ٿئي ٿي - هور | ڌيان | دستور |
هڪ ٽوپسي هينڊلر کي هڪ عنصر گڏ ڪرڻ سان ڳنڍيندو آهي.
ظاھر ڪري ٿو هڪ عنصر twipsy.
- $ ( '# عنصر' ). ٽوپي ( 'شو' )
هڪ عناصر ٽوپي لڪائيندو آهي.
- $ ( '# عنصر' ). ٽوپي ( 'لڪ' )
ھڪڙو عنصر ٽوپسي ڪلاس مثال ڏئي ٿو.
- $ ( '# عنصر' ). ٽوپي ( سچو )
نوٽ ڪريو متبادل طور تي، هن سان ٻيهر حاصل ڪري سگهجي ٿو $().data('twipsy').
تنگ پتلون ايندڙ ليول ڪيفيه توهان شايد انهن بابت نه ٻڌو هوندو. فوٽو بوٿ بيئر خام ڊينم ليٽرپريس ويگن ميسينجر بيگ اسٽمپ ٽائون. فارم-ٽو-ٽيبل سيٽن، ميڪسويني جي فڪسي پائيدار quinoa 8-bit آمريڪن ڪپڙا آهن هڪ ٽيري رچرڊسن ونائل چيمبري. Beard stumptown, cardigans banh mi lomo Thundercats. ٽوفو بايو ڊيزل وليمسبرگ مارفا، چار لوڪو ميڪسويني جي صاف ويگن چيمبري. هڪ واقعي لوهي ڪاريگر جيڪو به ڪيٽار، سينسٽر فارم کان ٽيبل بئنڪسي آسٽن ٽوئيٽر هينڊل فريگن ڪريڊ را ڊينم سنگل اصل ڪافي وائرل.
پاپ اوور پلگ ان توهان جي ايپليڪيشن ۾ پاپ اوور شامل ڪرڻ لاءِ هڪ سادي انٽرفيس مهيا ڪري ٿي. اهو وڌائيندو آهي boostrap-twipsy.js پلگ ان، تنهن ڪري پڪ ڪريو ته انهي فائل کي پڻ پڪڙيو جڏهن توهان جي پروجيڪٽ ۾ پاپ اوور شامل آهن!
ڊائون لوڊ ڪريو
- $ ( '#مثال' ). پاپ اوور ( اختيارن )
| نالو | قسم | ڊفالٽ | وضاحت |
|---|---|---|---|
| متحرڪ ڪرڻ | بولين | سچو | ٽول ٽائپ تي سي ايس ايس فيڊ ٽرانسشن لاڳو ڪريو |
| دير ۾ | نمبر | 0 | ٽول ٽائپ ڏيکارڻ کان اڳ دير ڪريو (ms) |
| دير ڪرڻ | نمبر | 0 | ٽول ٽائپ لڪائڻ کان اڳ دير (ms) |
| واپسي | تار | '' | استعمال ڪرڻ لاءِ متن جڏهن ڪو ٽول ٽائپ عنوان موجود نه هجي |
| لڳائڻ | تار | 'ساڄو' | ٽول ٽائپ کي ڪيئن رکڻو آهي - مٿي | هيٺ | کاٻي | ساڄو |
| html | بولين | ڪوڙو | html مواد کي ٽول ٽائپ ۾ اجازت ڏئي ٿو |
| جيئرو | بولين | ڪوڙو | انفرادي ايونٽ هينڊلر جي بدران ايونٽ وفد استعمال ڪريو |
| بند ڪرڻ | نمبر | 0 | ٽارگيٽ عنصر کان ٽول ٽائپ جو پکسل آفسيٽ |
| عنوان | تار | فنڪشن | 'عنوان' | ٽائيٽل ٽيڪسٽ حاصل ڪرڻ لاء خاصيت يا طريقو |
| مواد | تار | فنڪشن | 'ڊيٽا مواد' | خاصيت يا طريقو مواد جي متن کي ٻيهر حاصل ڪرڻ لاء |
| محرڪ | تار | 'هور' | ٽول ٽِپ ڪيئن شروع ٿئي ٿي - هور | ڌيان | دستور |
هڪ عنصر گڏ ڪرڻ لاء popovers جي شروعات.
ظاهر ڪري ٿو هڪ عنصر پاپ اوور.
- $ ( '# عنصر' ). پاپ اوور ( 'شو' )
هڪ عنصر پاپ اوور کي لڪائيندو آهي.
- $ ( '# عنصر' ). پوپ اوور ( 'لڪ' )
الرٽ پلگ ان خبرداري لاءِ ويجھي ڪارڪردگي شامل ڪرڻ لاءِ هڪ سپر ننڍڙو ڪلاس آهي.
ڊائون لوڊ ڪريو
- $ ( ". alert-message" ). خبردار ()
صرف data-alertپنھنجي خبرداري پيغامن ۾ ھڪڙي خاصيت شامل ڪريو انھن کي خودڪار طور تي انھن کي ويجهي ڪارڪردگي ڏي.
ويجھي ڪارڪردگي سان سڀني خبردارين کي لپي ٿو. بند ٿيڻ تي توهان جي خبردارين کي متحرڪ ڪرڻ لاءِ، پڪ ڪريو ته انهن وٽ .fade۽ .inڪلاس اڳ ۾ ئي انهن تي لاڳو آهي.
هڪ خبرداري بند ڪري ٿو.
- $ ( ". alert-message" ). خبردار ( 'بند' )