پێوەکراوەکەی مۆداڵی ئێمە وەرگرتنی سوپەر تەنکە لە پێوەکراوەکەی مۆداڵی js ی تەقلیدی، گرنگییەکی تایبەت بە تەنها ئەو کاراییە ڕووتانە دەگرێتەوە کە ئێمە لێرە لە تویتەر پێویستمان پێیەتی.
دابەزاندن
- $ ( '#مۆداڵی من' ). modal ( هەڵبژاردەکان )
ناو | جۆر | بنەڕەتی | وەسف |
---|---|---|---|
باکگراوند | boolean، ڕستە | هەڵە | توخمێکی مۆداڵی-باکگراوند لەخۆدەگرێت. باکگراوندەکە دابنێ بۆ "static" ئەگەر ناتەوێت مۆداڵەکە دابخرێت کاتێک کلیک لەسەر باکگراوندەکە دەکرێت. |
کیبۆرد | boolean | هەڵە | مۆداڵی دادەخات کاتێک کلیلی escape دەکرێت |
نیشاندان | boolean | هەڵە | مۆداڵی لەسەر دەستپێکردنی پۆل دەکاتەوە |
دەتوانیت بە ئاسانی مۆدالەکان لە لاپەڕەکەت چالاک بکەیت بەبێ ئەوەی پێویستت بە نووسینی یەک دێڕی جاڤاسکڕێپت بێت. تەنها تایبەتمەندییەک بدە بە توخمێک data-controls-modal
کە هاوتایە لەگەڵ id ی توخمێکی مۆداڵی، و کاتێک کلیک دەکرێت، مۆداڵیەکەت دەستپێدەکات. بۆ زیادکردنی هەڵبژاردەی مۆداڵی، تەنها وەک تایبەتمەندی داتا بە هەمان شێوە بیانخەرە ناوەوە.
- <a class = "btn" data-controls-modal = "my-modal" data-backdrop = "ستاتیک" > مۆداڵی دەستپێکردن </a>
تێبینی ئەگەر دەتەوێت مۆداڵەکەت ئەنیمەیشن بکات بۆ ناوەوە و دەرەوە، تەنها .fade
پۆلێک زیاد بکە بۆ .modal
توخمەکەت (بۆ بینینی ئەمە بە کردار سەردانی دیمۆکە بکە).
ناوەڕۆکەکەت وەک مۆداڵ چالاک دەکات. بژاردەیەکی ئیختیاری قبوڵ دەکات object
.
- $ ( '#مۆداڵی من' ). مۆداڵی ({
- کیبۆرد : ڕاستە
- })
بە دەست مۆداڵێک دەگۆڕێت.
- $ ( '#مۆداڵی من' ). مۆداڵ ( 'toggle' )
بە دەستی مۆداڵێک دەکاتەوە.
- $ ( '#مۆداڵی من' ). modal ( 'نیشاندان' )
بە دەستی مۆداڵێک دەشارێتەوە.
- $ ( '#مۆداڵی من' ). modal ( 'شاردنەوە' )
نموونەیەکی پۆلی مۆداڵی توخمەکان دەگەڕێنێتەوە.
- $ ( '#مۆداڵی من' ). مۆداڵی ( ڕاست )
تێبینی یان دەتوانرێت ئەمە بە $().data('modal')
.
پۆلی مۆداڵی بووتستراپ چەند ڕووداوێک ئاشکرا دەکات بۆ پەیوەستکردن بە کارایی مۆداڵی.
پێشهات | وەسف |
---|---|
نیشاندان | ئەم ڕووداوە دەستبەجێ ئاگر دەبێتەوە کاتێک show شێوازی نموونە بانگ دەکرێت. |
نیشان دراوە | ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە مۆداڵەکە بۆ بەکارهێنەر دیار بێت (چاوەڕێی تەواوبوونی گواستنەوەکانی css دەکات). |
شاردنەوە | ئەم ڕووداوە دەستبەجێ ئاگر دەکرێتەوە کاتێک hide شێوازی نموونە بانگ کراوە. |
شاراوە | ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە مۆداڵەکە تەواو بوو لە شاردنەوە لە بەکارهێنەر (چاوەڕێ دەکات بۆ تەواوبوونی گواستنەوەکانی css). |
- $ ( '#مۆداڵی من' ). bind ( 'شاراوە' , فەنکشن () {
- // شتێک بکە ...
- })
ئەم پێوەکراوە بۆ زیادکردنی کارلێکی دابەزینە بۆ سەرەوەی bootstrap یان گەشتە تابکراوەکان.
دابەزاندن
- $ ( '#سەرەوە' ). دابەزین ()
بۆ زیادکردنی خێرای کارایی دابەزین بۆ هەر توخمێکی nav، data-dropdown
تایبەتمەندییەکە بەکاربهێنە. هەر درۆپ داونێکی دروستی بووتستراپ بە شێوەیەکی ئۆتۆماتیکی چالاک دەبێت.
- <ul class = "تابەکان" >
- <li class = "چالاك" ><a href = "#" > ماڵەوە </a></li>
- <li class = "دابەزاندن" data- دابەزاندن = "دابەزاندن" >
- <a href = "#" class = "دابەزاندن-گۆڕین" > دابەزین </a>
- <ul class = "مێنۆی دابەزین" >
- <li><a href = "#" > بەستەری لاوەکی </a></li>
- <li><a href = "#" > شتێکی تر لێرە </a></li>
- <li class = "دابەشکەر" </li>
- <li><a href = "#" > بەستەرێکی تر </a></li>
- </ul>
- </li>
- </ul>
تێبینی ئەگەر ui ـەکەت چەندین دابەزینی هەیە، بیر لە زیادکردنی data-dropdown
تایبەتمەندییەکە بکەرەوە بۆ توخمێکی کۆنتێنەری گرنگتر وەک .tabs
یان .topbar
.
api ێکی بەرنامەیی بۆ چالاککردنی مینیوەکان بۆ سەرەوەی یان گەشتێکی تابکراوی دیاریکراو.
ئەم پێوەکراوە بۆ زیادکردنی کارلێکی scrollspy (auto updating nav) بۆ سەرەوەی bootstrap.
دابەزاندن
- $ ( '#سەرەوە' ). scrollSpy ()
بۆ ئەوەی بە ئاسانی هەڵسوکەوتی scrollspy زیاد بکەیت بۆ nav ـەکەت، تەنها data-scrollspy
تایبەتمەندییەکە زیاد بکە بۆ .topbar
.
- <div class = "سەرەوە" data-scrollspy = "scrollspy" > ... </div>
ئۆتۆماتیکی دوگمەکانی گەشتکردن چالاک دەکات بەپێی شوێنی سکڕۆڵی بەکارهێنەران.
- $ ( 'جەستە > .سەرەوە' ). scrollSpy ()
ئاگاداری تاگەکانی ئەنکۆری Topbar دەبێت ئامانجی id چارەسەرکراویان هەبێت. بۆ نموونە، a <a href="#home">home</a>
دەبێت لەگەڵ شتێکدا بگونجێت لە دۆمەکەدا وەک <div id="home"></div>
.
scrollspy دوگمەکانی nav و کۆئۆردینیاتی بەشەکان بۆ کارایی کاش دەکات. ئەگەر پێویستت بە نوێکردنەوەی ئەم کاشەیە (بە ئەگەرێکی زۆرەوە ئەگەر ناوەڕۆکی داینامیکیت هەبێت) تەنها بانگی ئەم شێوازە نوێکردنەوە بکە. ئەگەر تایبەتمەندی داتات بەکارهێنا بۆ پێناسەکردنی scrollspy ـەکەت، تەنها بانگی refresh بکە لەسەر جەستە.
- $ ( 'جەستە' ). scrollSpy ( 'نوێکردنەوە' )
لەم لاپەڕەیەدا سەیری گەشتی سەرەوە بکە.
ئەم پێوەکراوە کارایی خێرا و داینامیکی تاب و حەب زیاد دەکات.
دابەزاندن
- $ ( '.tabs' ). تابەکان ()
دەتوانیت گەشتێکی تاب یان حەب چالاک بکەیت بەبێ ئەوەی هیچ جاڤاسکڕێپتێک بنووسیت بە تەنها پێدانی تایبەتمەندی data-tabs
یان data-pills
تایبەتمەندییان.
- <ul class = "تابەکان" داتا-تابەکان = "تابەکان" > ... </ul>
کارایی تاب و حەب بۆ دەفرێکی دیاریکراو چالاک دەکات. بەستەرەکانی تابەکان پێویستە ئاماژە بە id's بکەن لە بەڵگەنامەکەدا.
- <ul class = "تابەکان" >
- <li class = "چالاك" ><a href = "#ماڵەوە" > ماڵەوە </a></li>
- <li><a href = "#profile" > پڕۆفایلی </a></li>
- <li><a href = "#messages" > پەیامەکان </a></li>
- <li><a href = "#ڕێکخستنەکان" > ڕێکخستنەکان </a></li>
- </ul>
- <div class = "ناوەڕۆکی حەب" >
- <div class = "چالاك" id = "ماڵەوە" > ... </div>
- <div id = "پڕۆفایلی" > ... </div>
- <div id = "پەیامەکان" > ... </div>
- <div id = "ڕێکخستنەکان" > ... </div>
- </div>
- <سکریپت>
- $ ( فەنکشن () {
- $ ( '.tabs' ). تابەکان ()
- })
- </script>
پێشهات | وەسف |
---|---|
گۆڕان | ئەم ڕووداوە لە کاتی گۆڕینی تابەکاندا ئاگر دەکاتەوە. event.target و بەکاربهێنە event.relatedTarget بۆ ئامانجکردنی تابی چالاک و تابی چالاک پێشوو بە رێککەوت. |
- $ ( '#.تابەکان' ). bind ( 'گۆڕان' , فەنکشن ( e ) {
- هـ . ئامانج // تاب چالاک کراوە
- هـ . relatedTarget // تابی پێشوو
- })
جینز خاو ڕەنگە نەتبیستبێت لەوان شۆرت جین ئۆستین. Nesciunt تۆفۆ stumptown aliqua، پاککردنەوەی وەستای ڕیترۆ سینت. سمێڵ کلیشە کاتی، ویلیامسبێرگ کارلێس ڤیگن هێلڤێتیکا. Reprehenderit قەساب ڕیترۆ keffiyeh خەون گیر synth. بلوزێکی کۆسبی eu banh mi، qui irure تێری ڕیچاردسۆن ex squid. Aliquip placeat سەلڤیا سیلوم ئایفۆن. Seitan aliquip quis کاردیگان جل و بەرگی ئەمریکی، قەساب 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.
بە پشتبەستن بە پێوەکراوێکی نایابی jQuery.tipsy کە لەلایەن Jason Frame ەوە نووسراوە؛ twipsy وەشانی نوێکراوە، کە پشت بە وێنە نابەستێت، css3 بەکاردەهێنێت بۆ ئەنیمەیشنەکان، و data-attributes بۆ هەڵگرتنی ناونیشانەکان!
دابەزاندن
- $ ( '#نموونە' ). twipsy ( هەڵبژاردەکان )
ناو | جۆر | بنەڕەتی | وەسف |
---|---|---|---|
ئەنیمەیشن | boolean | ڕاست | گواستنەوەیەکی css fade بەکاربهێنە بۆ ئامرازەکان |
delayIn | ژماره | 0. 0 | دواکەوتن پێش پیشاندانی ئامۆژگاری ئامرازەکان (ms) |
delayOut | ژماره | 0. 0 | دواکەوتن پێش شاردنەوەی ئامرازەکان (ms) |
کشانەوە | ڕستە | '' | دەقێک بۆ بەکارهێنان کاتێک هیچ ناونیشانێکی ئامرازەکان ئامادە نییە |
جێگیرکردن | ڕستە | 'لەسەر' | چۆنێتی جێگیرکردنی ئامرازەکان - لە سەرەوە | لە خوارەوە | چەپ | ڕاست |
html | boolean | هەڵە | ڕێگە بە ناوەڕۆکی html دەدات لە ناو tooltip |
ژیان | boolean | هەڵە | نوێنەرایەتی ڕووداو بەکاربهێنە لەبری مامەڵەکارانی ڕووداوی تاکەکەسی |
ئۆفسێت | ژماره | 0. 0 | ئۆفسێتی پێکسڵی ئامۆژگاری ئامراز لە توخمێکی ئامانجەوە |
ناونیشان | ڕستە، فەنکشن | 'ناونیشان' | تایبەتمەندی یان شێواز بۆ وەرگرتنەوەی دەقی ناونیشان |
وورژاندن | ڕستە | 'hover' | چۆن tooltip دەستپێدەکات - hover | فۆکەس | بەدەستی |
قاڵب | ڕستە | [نیشانەی پێشوەختە] | ئەو قاڵبەی html کە بۆ ڕەندەری twipsy بەکاردێت. |
تێبینی دەتوانرێت هەڵبژاردەکانی نموونەی تاکەکەسی twipsy بە شێوەیەکی جێگرەوە لە ڕێگەی بەکارهێنانی تایبەتمەندییەکانی داتاوە دیاری بکرێت.
- <a href = "#" data-placement = "لە خوارەوە" rel = 'twipsy' title = 'هەندێک دەقی ناونیشان' > دەق </a>
مامەڵەکارێکی twipsy بە کۆمەڵە توخمێکەوە دەبەستێتەوە.
توخمێکی twipsy ئاشکرا دەکات.
- $ ( '#توخم' ). twipsy ( 'نیشاندان' )
توخمێکی twipsy دەشارێتەوە.
- $ ( '#توخم' ). twipsy ( 'شاردنەوە' )
نموونەیەکی پۆلی elements twipsy دەگەڕێنێتەوە.
- $ ( '#توخم' ). twipsy ( ڕاستە )
تێبینی یان دەتوانرێت ئەمە بە $().data('twipsy')
.
پانتۆڵی توند ئاستی داهاتوو keffiyeh ڕەنگە نەتبیستبێت. کۆشکی وێنە سمێڵ خام جینز لێتەرپرێس جانتای نامەبەری ڤیگن stumptown. کێڵگە بۆ مێز seitan، mcsweeney's fixie بەردەوام quinoa 8-bit جل و بەرگی ئەمریکی خاوەنی تێری ڕیچاردسۆن ڤینێل chambray. سمێڵ ستۆمپتاون، کاردیگانەکان بانه می لۆمۆ ڕەشەبا پشیلە. تۆفۆ بایۆدیزەل ویلیامزبێرگ مارفا، چوار loko mcsweeney's پاککردنەوەی ڤیگن chambray. بەڕاستی پیشەسازێکی ئیرۆنی هەرچییەک بێت keytar، scenester کێڵگە بۆ مێز banksy ئۆستن تویتەر دەست freegan cred خام جینز تاکە سەرچاوە قاوە ڤایرۆس.
پێوەکراوەکەی popover ڕووکارێکی سادە بۆ زیادکردنی popovers بۆ بەرنامەکەت دابین دەکات. پێوەکراوەکەی bootstrap-twipsy.js درێژ دەکاتەوە ، بۆیە دڵنیابە کە ئەو فایلە بە هەمان شێوە بگرە کاتێک popovers لە پرۆژەکەتدا دەخەیتە ناوەوە!
تێبینی پێویستە پێش bootstrap-popover.js پەڕگەی bootstrap-twipsy.js دابنێیت.
دابەزاندن
- $ ( '#نموونە' ). popover ( هەڵبژاردەکان )
ناو | جۆر | بنەڕەتی | وەسف |
---|---|---|---|
ئەنیمەیشن | boolean | ڕاست | گواستنەوەیەکی css fade بەکاربهێنە بۆ ئامرازەکان |
delayIn | ژماره | 0. 0 | دواکەوتن پێش پیشاندانی ئامۆژگاری ئامرازەکان (ms) |
delayOut | ژماره | 0. 0 | دواکەوتن پێش شاردنەوەی ئامرازەکان (ms) |
کشانەوە | ڕستە | '' | دەقێک بۆ بەکارهێنان کاتێک هیچ ناونیشانێکی ئامرازەکان ئامادە نییە |
جێگیرکردن | ڕستە | 'ڕاست' | چۆنێتی جێگیرکردنی ئامرازەکان - لە سەرەوە | لە خوارەوە | چەپ | ڕاست |
html | boolean | هەڵە | ڕێگە بە ناوەڕۆکی html دەدات لە ناو tooltip |
ژیان | boolean | هەڵە | نوێنەرایەتی ڕووداو بەکاربهێنە لەبری مامەڵەکارانی ڕووداوی تاکەکەسی |
ئۆفسێت | ژماره | 0. 0 | ئۆفسێتی پێکسڵی ئامۆژگاری ئامراز لە توخمێکی ئامانجەوە |
ناونیشان | ڕستە، فەنکشن | 'ناونیشان' | تایبەتمەندی یان شێواز بۆ وەرگرتنەوەی دەقی ناونیشان |
ناوەڕۆک | ڕستە، فەنکشن | 'ناوەڕۆکی داتا' | ڕستەیەک یان شێوازێک بۆ وەرگرتنەوەی دەقی ناوەڕۆک. ئەگەر هیچیان دابین نەکرێت، ناوەڕۆک لە تایبەتمەندییەکی داتا-ناوەڕۆکەوە سەرچاوە دەگرێت. |
وورژاندن | ڕستە | 'hover' | چۆن tooltip دەستپێدەکات - hover | فۆکەس | بەدەستی |
قاڵب | ڕستە | [نیشانەی پێشوەختە] | ئەو قاڵبەی html کە بۆ ڕەندەرکردنی popover بەکاردێت. |
تێبینی هەڵبژاردەکانی نموونەی تاکەکەسی دەتوانرێت بە شێوەیەکی جێگرەوە لە ڕێگەی بەکارهێنانی تایبەتمەندییەکانی داتاوە دیاری بکرێت.
- <a data-placement = "لە خوارەوە" href = "#" پۆل = "مەترسی btn" rel = "popover" > دەق </a>
پۆپۆڤەرەکان بۆ کۆکردنەوەی توخمەکان دەستپێدەکات.
ئاشکرا دەکات کە توخمەکان popover.
- $ ( '#توخم' ). popover ( 'پێشاندان' )
پەپۆڤەرێکی توخمەکان دەشارێتەوە.
- $ ( '#توخم' ). popover ( 'شاردنەوە' )
پێوەکراوەکەی ئاگادارکردنەوە پۆلێکی زۆر بچووکە بۆ زیادکردنی کارایی نزیک بۆ ئاگادارکردنەوەکان.
دابەزاندن
- $ ( ".پەیامی ئاگادارکردنەوە" ). ئاگادارکردنەوە ()
تەنها data-alert
تایبەتمەندییەک زیاد بکە بۆ نامە ئاگادارکردنەوەکانت بۆ ئەوەی بە شێوەیەکی ئۆتۆماتیکی کارایی نزیکیان پێبدەیت.
ناو | جۆر | بنەڕەتی | وەسف |
---|---|---|---|
هەڵبژێرەر | ڕستە | '.داخستن' | چ هەڵبژێرەرێک بکەیتە ئامانج بۆ داخستنی ئاگادارکردنەوەیەک. |
هەموو ئاگادارکردنەوەکان بە کارایی نزیک دەپێچێتەوە. بۆ ئەوەی ئاگادارکردنەوەکانت کاتێک دادەخرێن ئەنیمەیشن بن، دڵنیابە کە پێشتر پۆلی .fade
ویان .in
بۆ بەکارهێناوە.
ئاگادارکردنەوەیەک دادەخات.
- $ ( ".پەیامی ئاگادارکردنەوە" ). ئاگادارکردنەوە ( 'داخستنی' )