ہمارا موڈل پلگ ان روایتی موڈل جے ایس پلگ ان کے مقابلے میں ایک انتہائی سلم ٹیک ہے، جس میں خاص خیال رکھا جا رہا ہے کہ صرف وہی ننگی فعالیت شامل ہو جس کی ہمیں یہاں ٹویٹر پر ضرورت ہے۔
ڈاؤن لوڈ کریں
- $ ( '#my-modal' )۔ موڈل ( اختیارات )
| نام | قسم | پہلے سے طے شدہ | تفصیل |
|---|---|---|---|
| پس منظر | بولین | جھوٹا | ایک موڈل بیک ڈراپ عنصر پر مشتمل ہے۔ |
| کی بورڈ | بولین | جھوٹا | Escape کلید کو دبانے پر موڈل بند ہو جاتا ہے۔ |
| دکھائیں | بولین | جھوٹا | کلاس کے آغاز پر موڈل کھولتا ہے۔ |
آپ جاوا اسکرپٹ کی ایک لائن لکھے بغیر آسانی سے اپنے صفحہ پر ماڈلز کو چالو کر سکتے ہیں۔ صرف ایک عنصر کو ایک data-controls-modalخصوصیت دیں جو ایک موڈل عنصر آئی ڈی سے مطابقت رکھتا ہے، اور جب کلک کیا جائے گا، تو یہ آپ کا موڈل لانچ کرے گا۔ موڈل آپشنز کو شامل کرنے کے لیے، صرف ان کو ڈیٹا انتساب کے طور پر بھی شامل کریں۔
- <a class = "btn" data-controls-modal = "my-modal" data-backdrop = "true" > Modal لانچ کریں </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 کلاس = "ڈراپ ڈاؤن" ڈیٹا ڈراپ ڈاؤن = "ڈراپ ڈاؤن" >
- <a href = "#" class = "dropdown-toggle" > ڈراپ ڈاؤن </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۔
دیئے گئے ٹاپ بار یا ٹیب شدہ نیویگیشن کے لیے مینوز کو فعال کرنے کے لیے ایک پروگرامیٹک API۔
یہ پلگ ان بوٹسٹریپ ٹاپ بار میں اسکرول اسپی (آٹو اپ ڈیٹ کرنے والی NAV) تعامل کو شامل کرنے کے لیے ہے۔
ڈاؤن لوڈ کریں
- $ ( '#topbar' )۔ ڈراپ ڈاؤن ()
آسانی سے اپنے nav میں scrollspy رویہ شامل کرنے کے لیے، صرف اس data-scrollspyوصف کو شامل کریں .topbar۔
- <div class = "topbar" data-scrollspy = "scrollspy" > ... </div>
خودکار طور پر صارفین کی اسکرول پوزیشن کے مطابق نیویگیشن بٹن کو چالو کرتا ہے۔
- $ ( 'body > .topbar' )۔ scrollSpy ()
نوٹس ٹاپبار اینکر ٹیگز میں قابل حل شناختی اہداف ہونے چاہئیں۔ مثال کے طور پر، <a href="#home">home</a>ڈوم میں کسی چیز کے مطابق ہونا چاہیے جیسے <div id="home"></div>.
scrollspy کارکردگی کے لیے NAV بٹنز اور سیکشن کوآرڈینیٹ کیش کرتا ہے۔ اگر آپ کو اس کیش کو اپ ڈیٹ کرنے کی ضرورت ہے (ممکنہ طور پر اگر آپ کے پاس متحرک مواد ہے) تو صرف اس ریفریش طریقہ کو کال کریں۔ اگر آپ نے اپنی اسکرول اسپی کی وضاحت کے لیے ڈیٹا انتساب کا استعمال کیا ہے، تو صرف باڈی پر ریفریش کال کریں۔
- $ ( 'جسم' )۔ scrollspy ( 'ریفریش' )
اس صفحہ پر ٹاپ بار نیویگیشن چیک کریں۔
یہ پلگ ان تیز، متحرک ٹیب اور گولی کی فعالیت کو شامل کرتا ہے۔
ڈاؤن لوڈ کریں
- $ ( '.tabs' )۔ ٹیبز ()
آپ کسی بھی جاوا اسکرپٹ کو لکھے بغیر ٹیب یا گولی نیویگیشن کو صرف ایک data-tabsیا data-pillsانتساب دے کر چالو کرسکتے ہیں۔
- <ul class = "tabs" data-tabs = "tabs" > ... </ul>
دیئے گئے کنٹینر کے لیے ٹیب اور گولی کی فعالیت کو چالو کرتا ہے۔ ٹیب کے لنکس کو دستاویز میں آئی ڈی کا حوالہ دینا چاہیے۔
- <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 = "settings" > ... </div>
- </ul>
- <script>
- $ ( فنکشن () {
- $ ( '.tabs' )۔ ٹیبز ()
- })
- </script>
را ڈینم آپ نے شاید ان کے بارے میں جین شارٹس آسٹن کے بارے میں نہیں سنا ہوگا۔ 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.
جیسن فریم کے تحریر کردہ بہترین jQuery.tipsy پلگ ان پر مبنی؛ twipsy ایک اپ ڈیٹ شدہ ورژن ہے، جو امیجز پر انحصار نہیں کرتا، اینیمیشنز کے لیے css3 اور ٹائٹل اسٹوریج کے لیے ڈیٹا-انتساب کا استعمال کرتا ہے!
ڈاؤن لوڈ کریں
- $ ( '#مثال' )۔ twipsy ( اختیارات )
| نام | قسم | پہلے سے طے شدہ | تفصیل |
|---|---|---|---|
| متحرک | بولین | سچ ہے | ٹول ٹپ پر سی ایس ایس فیڈ ٹرانزیشن کا اطلاق کریں۔ |
| تاخیر | نمبر | 0 | ٹول ٹپ دکھانے سے پہلے تاخیر (ایم ایس) |
| تاخیر | نمبر | 0 | ٹول ٹپ کو چھپانے سے پہلے تاخیر (ایم ایس) |
| فال بیک | تار | '' | جب کوئی ٹول ٹپ ٹائٹل موجود نہ ہو تو استعمال کرنے کے لیے متن |
| جگہ کا تعین | تار | 'اوپر' | ٹول ٹپ کی پوزیشن کیسے لی جائے - اوپر | نیچے | بائیں | صحیح |
| html | بولین | جھوٹا | ٹول ٹپ کے اندر HTML مواد کی اجازت دیتا ہے۔ |
| زندہ | بولین | جھوٹا | انفرادی ایونٹ ہینڈلرز کے بجائے ایونٹ ڈیلیگیشن کا استعمال کریں۔ |
| آفسیٹ | نمبر | 0 | ہدف عنصر سے ٹول ٹپ کا پکسل آفسیٹ |
| عنوان | تار | فنکشن | 'عنوان' | عنوان کے متن کو بازیافت کرنے کا وصف یا طریقہ |
| محرک | تار | 'ہوور' | ٹول ٹپ کو کیسے متحرک کیا جاتا ہے - ہوور | توجہ مرکوز | دستی |
ایک عنصر کے مجموعہ کے ساتھ ایک twipsy ہینڈلر منسلک کرتا ہے۔
ایک عناصر twipsy سے پتہ چلتا ہے.
- $ ( '# عنصر' )۔ twipsy ( 'شو' )
ایک عناصر twipsy چھپاتا ہے.
- $ ( '# عنصر' )۔ twipsy ( 'چھپائیں' )
ایک عناصر twipsy کلاس مثال لوٹاتا ہے۔
- $ ( '# عنصر' )۔ twipsy ( سچ )
نوٹس متبادل طور پر، اس کے ساتھ بازیافت کیا جا سکتا ہے $().data('twipsy')۔
ٹائیٹ پتلون اگلے درجے کی کیفیہ آپ نے شاید ان کے بارے میں نہیں سنا ہوگا۔ فوٹو بوتھ داڑھی خام ڈینم لیٹرپریس ویگن میسنجر بیگ اسٹمپ ٹاؤن۔ فارم ٹو ٹیبل سیٹن، میکسوینی کے فکسی پائیدار کوئنو 8 بٹ امریکی ملبوسات میں ٹیری رچرڈسن ونائل چیمبرے ہے۔ بیئرڈ اسٹمپ ٹاؤن، کارڈیگنز بنہ می لومو تھنڈرکیٹس۔ ٹوفو بائیو ڈیزل ولیمزبرگ مارفا، چار لوکو میکسوینی کا کلینز ویگن چیمبرے۔ ایک واقعی ستم ظریفی کاریگر جو بھی کیٹار ہو، سینسٹر فارم ٹو ٹیبل بینکسی آسٹن ٹویٹر ہینڈل فریگن کریڈ را ڈینم سنگل اوریجن کافی وائرل۔
پاپ اوور پلگ ان آپ کی ایپلیکیشن میں پاپ اوور شامل کرنے کے لیے ایک سادہ انٹرفیس فراہم کرتا ہے۔ یہ boostrap-twipsy.js پلگ ان کو بڑھاتا ہے، لہذا اپنے پروجیکٹ میں پاپ اوور شامل کرتے وقت اس فائل کو بھی پکڑنا یقینی بنائیں!
ڈاؤن لوڈ کریں
- $ ( '#مثال' )۔ پاپ اوور ( اختیارات )
| نام | قسم | پہلے سے طے شدہ | تفصیل |
|---|---|---|---|
| متحرک | بولین | سچ ہے | ٹول ٹپ پر سی ایس ایس فیڈ ٹرانزیشن کا اطلاق کریں۔ |
| تاخیر | نمبر | 0 | ٹول ٹپ دکھانے سے پہلے تاخیر (ایم ایس) |
| تاخیر | نمبر | 0 | ٹول ٹپ کو چھپانے سے پہلے تاخیر (ایم ایس) |
| فال بیک | تار | '' | جب کوئی ٹول ٹپ ٹائٹل موجود نہ ہو تو استعمال کرنے کے لیے متن |
| جگہ کا تعین | تار | 'صحیح' | ٹول ٹپ کی پوزیشن کیسے لی جائے - اوپر | نیچے | بائیں | صحیح |
| html | بولین | جھوٹا | ٹول ٹپ کے اندر HTML مواد کی اجازت دیتا ہے۔ |
| زندہ | بولین | جھوٹا | انفرادی ایونٹ ہینڈلرز کے بجائے ایونٹ ڈیلیگیشن کا استعمال کریں۔ |
| آفسیٹ | نمبر | 0 | ہدف عنصر سے ٹول ٹپ کا پکسل آفسیٹ |
| عنوان | تار | فنکشن | 'عنوان' | عنوان کے متن کو بازیافت کرنے کا وصف یا طریقہ |
| مواد | تار | فنکشن | 'ڈیٹا مواد' | مواد کے متن کو بازیافت کرنے کا وصف یا طریقہ |
| محرک | تار | 'ہوور' | ٹول ٹپ کو کیسے متحرک کیا جاتا ہے - ہوور | توجہ مرکوز | دستی |
عنصر کے مجموعہ کے لیے پاپ اوور شروع کرتا ہے۔
ایک عناصر کے پاپ اوور کو ظاہر کرتا ہے۔
- $ ( '# عنصر' )۔ پاپ اوور ( 'شو' )
ایک عناصر کے پاپ اوور کو چھپاتا ہے۔
- $ ( '# عنصر' )۔ پاپ اوور ( 'چھپائیں' )
الرٹ پلگ ان انتباہات میں قریبی فعالیت شامل کرنے کے لیے ایک انتہائی چھوٹی کلاس ہے۔
ڈاؤن لوڈ کریں
- $ ( ". الرٹ-پیغام" )۔ الرٹ ()
data-alertاپنے انتباہی پیغامات کو خود بخود قریبی فعالیت دینے کے لیے بس ایک وصف شامل کریں ۔
تمام انتباہات کو قریبی فعالیت کے ساتھ لپیٹ دیتا ہے۔ بند ہونے پر آپ کے انتباہات کو متحرک کرنے کے لیے، یقینی بنائیں کہ ان پر .fadeاور .inکلاس پہلے سے ہی لاگو ہے۔
ایک الرٹ بند کرتا ہے۔
- $ ( ". الرٹ-پیغام" )۔ الرٹ ( 'قریب' )