جاوااسکریپت برای بوت‌استرپ

با استفاده از ۱۳ پلاگین سفارشی جی‌کوئری، صفحات خود را زنده کنید.

منحصربه‌فرد یا کامپایل‌شده

پلاگین‌ها می‌توانند به‌صورت جدا (اگرچه بعضی از آن‌ها دارای نیازمندی‌هایی هستند) و یا یک‌جا با هم استفاده شوند. هم bootstrap.js و bootstrap.min.js شامل تمام پلاگین‌ها در یک فایل هستند.

خصوصیت‌های Data

شما می‌توانید به‌وسیلهٔ API بوت‌استرپ تمام پلاگین‌ها را حتی بدون نوشتن یک خط کد جاوااسکریپت استفاده کنید. کلاس زیر نخستین کلاس API بوت‌استرپ است و شما باید در هنگام استفاده از پلاگین، به این توجه داشته‌باشد.

همان‌طور که گفته شد، در برخی از مواقع بهتر است این ویژگی را خاموش کنیم. بنابراین ما ویژگی‌ای را آماده کرده‌ایم که آن را به‌راحتی می‌توانید غیرفعال کنید. فقط لازم است تابع off را با پارامتر `'data-api'` بر روی body فراخوانی کنید. مانند زیر:

$('body').off('.data-api')

همچنین شما می‌توانید پلاگین خاصی را با استفاده از نام پلاگین به عنوان فضای نام همراه با data-api استفاده کنید. مانند:

$('body').off('.alert.data-api')

API قابل برنامه‌ریزی

همچنین ما معتقد هستیم که شما باید بتوانید که از پلاگین‌های بوت‌استرپ فقط از طریق API جاوااسکریپت نیز کار کنید. تمام APIهای عمومی تکی، زنجیره‌ای و خروجی آن‌ها یک مجموعه از عمل انجام شده‌است.

$(".btn.danger").button("toggle").addClass("fat")

تمام توایع باید یک شی از انتخاب‌ها را قبول کند، یک رشته که تابع خاصی را صدا می‌زند و یا هیچی (که شی با رفتار پیش‌فرض مقداردهی اولیه می‌شود):

$("#myModal").modal()                       // مقداردهی اولیه با پیش‌فرض‌ها
$("#myModal").modal({ keyboard: false })   // مقداردهی با انتخاب بدون صفحه کلید
$("#myModal").modal('show')                // مقداردهی و سپس فراخوانی تابع

همچنین هر پلاگین سازندهٔ خودش را با فراخوانی خصوصیت `Constructor` نمایش می‌دهد: $.fn.popover.Constructor. اگر شما یک شی از پلاگین خاصی را می‌خواهید بدست آورید، به‌صورت مستقیم از عنصرش آن را بخواهید: $('[rel=popover]').data('popover').

بدون تداخل

گاهی اوقات نیاز است که پلاگین‌های بوت‌استرپ را با دیگر چارچوب‌های رابط کاربری استفاده کرد. در این موارد تداخل فضای نام‌ها پیش می‌آید. اگر این اتفاق افتاد از .noConflict در پلاگینی که نیاز است، استفاده کنید.

var bootstrapButton = $.fn.button.noConflict() // به مقداری تخصیص داده شده، $.fn.button را برمی‌گرداند.
$.fn.bootstrapBtn = bootstrapButton            // به $.fn.button کارایی بوت‌استرپ را اعمال می‌کند.

رویدادها

بوت‌استرپ برای تمام پلاگین‌هایش رویدادهای خاص و واحدی را آماده کرده‌است. که به‌طور کلی آن‌ها به‌صورت مصدر و یا اسم مفعول می‌آیند. موقعی که از مصدر استفاده می‌شود (برای مثال: show) رویداد قرار است که اجرا شود و وقتی که به صورت اسم مفعول می‌آید (برای مثال: shown) رویداد زمانی اجرا می‌شود که آن عمل تمام شده‌باشد.

تمام رویدادهای مصدر قابلیت preventDefault را فراهم می‌کنند. که این ویژگی به این معناست که قابلیت پیش‌فرض را قبل از اجرا شدن این عمل خنثی می‌کند.

$('#myModal').on('show', function (e) {
    if (!data) return e.preventDefault() // اجازه نمی‌دهد که مُدال نمایش داده شود
})

درباهٔ انتقال‌ها

برای جلوهٔ بصری سادهٔ transition، فایل bootstrap-transition.js را یک‌بار در پروژهٔ خود قرار دهید. اگر شما از نسخهٔ کامپایل‌شده (یا فشرده‌شده) bootstrap.js استفاده می‌کنید نیاز به قرار دادن در پروژهٔ خود نیست، هم‌اکنون آن وجود دارد.

استفاده‌ها

چند نمونه از استفادهٔ این پلاگین:

  • نمایش اسلایدی و یا محو شدن در مُدال‌ها
  • محو شدن تب‌ها
  • محو شدن اخطارها
  • نمایش اسلایدی چرخ فلک

نمونه‌ها

مدال‌ها به‌صورت خطی هستند، اما اعلان‌هایی، قابل انعطاف با کمترین نیازمندی‌ها و دارای پیش‌فرض‌های هوشمند هستند.

نمونه‌ٔ ثابت

که مدال با تیتر و بدنه و مجموعه‌ای از عملیات در پایین آن را نمایش می‌دهد.

<div class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>تیتر مدال</h3>
  </div>
  <div class="modal-body">
    <p>نمونه‌ای از محتویات…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">بستن</a>
    <a href="#" class="btn btn-primary">ذخیره تغییرات</a>
  </div>
</div>

نمایشی زنده

با کلیک کردن بر روی دکمه مدال نمایش داده می‌شود. این مدال از جلوهٔ بصری slide down و fade in از بالای صفحه به پایین استفاده می‌کند.

<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">اجرای زنده مُدال</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">تیتر مدال</h3>
  </div>
  <div class="modal-body">
    <p>نمونه‌ای از محتویات…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">بستن</button>
    <button class="btn btn-primary">ذخیره تغییرات</button>
  </div>
</div>

استفاده

با استفاده از خصوصیت data

مدال را بدون نوشتن جاوااسکریپت فعال کنید. خصوصیت data-toggle="modal" بر روی یک کنترل‌کننده مانند دکمه به‌همراه خصوصیت data-target="#foo" یا href="#foo" که مشخص‌کنندهٔ متن مدال می‌باشد، قرار دهید.

<button type="button" data-toggle="modal" data-target="#myModal">اجرای مدال</button>

با استفاده از جاوااسکریپت

یک مدال را با استفاده از شناسهٔ myModal با یک خط جاوااسکریپت صدا بزنید:

$('#myModal').modal(انتخاب‌ها)

انتخاب‌ها

انتخاب‌ها می‌توانند به‌وسیلهٔ خصوصیات data و یا جاوااسکریپت فرستاده شوند. برای استفاده از خصوصیات data نام data- را به data-backdrop="" اضافه کنید.

نام نوع پیش‌فرض توصیف
backdrop boolean true عنصر modal-backdrop را اضافه می‌کند. می‌توانید از static برای backdrop استفاده کنید تا مدال با کلیک شدن بسته نشود.
keyboard boolean true وقتی کلید escape بر روی صفحه‌کلید فشرده می‌شود، مدال بسته می‌شود.
show boolean true مدال در هنگام مقداردهی اولیه، نمایش داده می‌شود.
remote path false

اگر یک پیوند خارجی تعریف شود، محتویات آن توسط متد load جی‌کوئری در داخل .modal-body قرار می‌گیرد. اگر شما از data api استفاده می‌کنید، می‌توانید از تگ href برای مشخص کردن پیوند خارجی استفاده کنید. یک نمونه از این استفاده در زیر آورده شده‌است:

<a data-toggle="modal" href="remote.html" data-target="#modal">کلیک کنید</a>

توابع

.modal(انتخاب‌ها)

محتویات خود را به عنوان مدال فعال کنید. انتخاب‌های اختیاری با استفاده از object را قبول می‌کند.

$('#myModal').modal({
  keyboard: false
})

.modal('تغییر وضعیت')

به‌صورت دستی مدال فعال و غیرفعال می‌کند.

$('#myModal').modal('toggle')

.modal('نمایش')

به‌صورت دستی مدال را باز می‌کند.

$('#myModal').modal('show')

.modal('مخفی')

به‌صورت دستی مدال را می‌بندد.

$('#myModal').modal('hide')

رویدادها

کلاس مدال بوت‌استرپ برای کارایی بیشتر چندین رویداد را از خود تولید می‌کند.

رویداد توصیف
show وقتی تابع شی show فراخوانی شود، این رویداد به‌سرعت اجرا می‌شود.
shown وقتی مدال به کاربر نمایش داده‌شد (بعد از اجرای جلوهٔ بصری انتقال‌های سی‌اس‌اس)، این رویداد فراخوانی می‌شود.
hide وقتی تابع شی hide فراخوانی شد این رویداد به‌سرعت اجرا می‌شود.
hidden وقتی مدال از دید کاربر بسته شد (بعد از انجام جلوهٔ بصری انتقال‌های سی‌اس‌اس) این رویداد اجرا می‌شود.
$('#myModal').on('hidden', function () {
  // انجام یک کاری…
})

نمونه در نوار ناوبری

پلاگین اسکرول جاسوس برای به‌روزرسانی خودکار پیوندهای ناوبری، به مکان نوشته است. محتویات زیر را اسکرول کنید و ببنید که چگونه کلاس‌های مختلف فعال می‌شوند. همچنین زیرآیتم‌های افتادنی نیز رنگی می‌شوند.

حامد رمضانیان

یک برنامه‌نویس علاقمند به روبی آن ریلز، روبی و نرم‌افزارهای آزاد. این آدم علاقهٔ خاصی به افکار ریچارد استالمن دارد.همچنین این فرد از قهوه آماده، و چایی برای کمک به کد نوشتن استفاده می‌کند. البته علاقه‌های دیگر نیز دارد...

ریچارد استالمن

ریچارد متیو استالمن (به انگلیسی: Richard Matthew Stallman) (متولد ۱۶ مارس ۱۹۵۳ در نیویورک) معروف به آر ام اس , (به انگلیسی: RMS) ، یک آمریکایی طرفدار آزادی نرم‌افزار و برنامه‌نویس کامپیوتر است. در سپتامبر سال ۱۹۸۳، او پروژه گنو را برای ساخت یک سیستم‌عامل کاملا آزاد شبه-یونیکس آغاز کرد و مدیریت و معماری این پروژه را عهده‌دار شد. با آغار پروژه گنو، او نخستین قدم را در جنبش نرم‌افزار آزاد برداشت و در اکتبر سال ۱۹۸۵ بنیاد نرم‌افزارهای آزاد را تاسیس کرد.

آزادی ۱

آزادی برای مطالعه و بررسی چگونگی عملکرد برنامه و تغییر آن برای نیاز خود. دسترسی به کد منبع یک پیش‌شرط برای این آزادی می‌باشد. مقداری فضا برای فکر کردن، مقداری فضا برای فکر کردن، مقداری فضا برای فکر کردن، مقداری فضا برای فکر کردن، مقداری فضا برای فکر کردن، مقداری فضا برای فکر کردن، مقداری فضا برای فکر کردن.

آزادی ۲

آزادی برای توزیع مجدد کپی‌هایی از آن، بنابراین شما می‌توانید به همسایگان خود کمک کنید. مقداری فضا برای فکر کردن، مقداری فضا برای فکر کردن، مقداری فضا برای فکر کردن، مقداری فضا برای فکر کردن، مقداری فضا برای فکر کردن، مقداری فضا برای فکر کردن، مقداری فضا برای فکر کردن، مقداری فضا برای فکر کردن، مقداری فضا برای فکر کردن، مقداری فضا برای فکر کردن، مقداری فضا برای فکر کردن، مقداری فضا برای فکر کردن.

آزادی ۳

آزادی برای بهبود برنامه و انتشار این تغییرات برای عموم، بنابراین تمام جامعه از آن بهره می‌برند دسترسی به کد منبع یک پیش‌شرط برای این آزادی می‌باشد. مقداری فضا برای فکر کردن، مقداری فضا برای فکر کردن، مقداری فضا برای فکر کردن، مقداری فضا برای فکر کردن، مقداری فضا برای فکر کردن، مقداری فضا برای فکر کردن، مقداری فضا برای فکر کردن، مقداری فضا برای فکر کردن، مقداری فضا برای فکر کردن، مقداری فضا برای فکر کردن، مقداری فضا برای فکر کردن، مقداری فضا برای فکر کردن، مقداری فضا برای فکر کردن.

فضای بیشتری برای فکر کردن، فضای بیشتری برای فکر کردن، فضای بیشتری برای فکر کردن، فضای بیشتری برای فکر کردن، فضای بیشتری برای فکر کردن، فضای بیشتری برای فکر کردن، فضای بیشتری برای فکر کردن، فضای بیشتری برای فکر کردن، فضای بیشتری برای فکر کردن، فضای بیشتری برای فکر کردن، فضای بیشتری برای فکر کردن، فضای بیشتری برای فکر کردن، فضای بیشتری برای فکر کردن، فضای بیشتری برای فکر کردن، فضای بیشتری برای فکر کردن، فضای بیشتری برای فکر کردن، فضای بیشتری برای فکر کردن.


استفاده

با استفاده از خصوصیت data

برای این‌که به راحتی رفتار اسکرول جاسوس را به نوار ناوبری اضافه کنید، data-spy="scroll" به عنصری که می‌خواهید جاسوسی کند (که اغلب اوقات، بدنه است) و data-target=".navbar" به عناصر ناوبری اضافه کنید.

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

با استفاده از جاوااسکریپت

اسکرول جاسوس را با جاوااسکریپت فراخوانی کنید:

$('#navbar').scrollspy()
توجه کنید! پیوندهای نوار ناوبری باید شناسهٔ قابل شناسایی داشته باشند. برای مثال <a>href="#home">Home</a>، باید تبدیل به چیزی شبیه <div id="Home"></div> شود.

توابع

.scrollspy('به‌روزرسانی')

وقتی عنصر خاص در محتوا حذف یا اضافه می‌شود یا به عبارت دیگر عنصر خاصی در DOM اضافه یا حذف می‌شود باید با فراخوانی این تابع اسکرول جاسوس را به‌روز کنید:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
});

انتخاب‌ها

انتخاب‌ها می‌توانند از طریق خصوصیت data و یا توسط جاوااسکریپت فرستاده شوند. برای خصوصیت data نام انتخاب را به data- اضافه کنید. به عنوان مثال: data-offset="".

نام نوع پیش‌فرض توصیف
offset عدد ۱۰ تعداد پیکسلی که از بالا برای جابه‌جایی تعیین می‌شود.

رویدادها

رویداد توصیف
activate این رویداد هنگامی فراخوانی می‌شود که آیتم جدیدی در اسکرول جاسوس فعال شود.

تب‌های نمونه

یک تب پویا و سریع برای تغییر بین چندین محتوای محلی ایجاد کنید. حتی می‌توانید این قابلیت را برای منوهای افتادنی نیز فعال کنید.

روبی آن ریلز که گاهی اوقات به آن ریلز یا RoR نیز می‌گویند، یک چارچوب نرم‌افزاری تحت وب، آزاد و متن‌باز است که از زبان برنامه‌نویسی روبی استفاده می‌کند. هدف ریلز، ایجاد یک چارچوب نرم‌افزاری تحت وب، که از روش توسعه سریع برای برنامه‌نویسان وب استفاده می‌کند، است.

یکی از مهمترین روش‌های تغییر یک برنامه ادغام پیمانه‌ها و زیرروال‌های آزادِ موجود با برنامه اصلی می‌باشد. اگر مجوز برنامه بگوید که شما نمی‌توانید پیمانه‌های موجود را با برنامه ادغام نمایید، برای مثال اگر بخواهد که شما خودتان مالک کدی باشید که با برنامه اضافه می‌کنید، در این صورت این مجوز بیشتر از حد محدود کننده است تا به عنوان یک مجوز آزاد شناخته شود.


استفاده

قابلیت تب را با استفاده از جاوااسکریپت فعال کنید (هر تب باید به طور اختصاصی فعال شود):

$('#myTab a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
})

شما می‌توانید هر تب را به‌طور اختصاصی از چندین روش فعال کنید:

$('#myTab a[href="#profile"]').tab('show'); // با استفاده از انتخاب نام
$('#myTab a:first').tab('show'); // با استفاده از تب نخست
$('#myTab a:last').tab('show'); // با استفاده از تب آخر
$('#myTab li:eq(2) a').tab('show'); // با استفاده از تب سوم - از صفر شروع شده‌است

نشانه‌گذاری

شما می‌توانید هر تب یا پیلی را بدون نوشتن کد جاوااسکریپت، فعال کنید. فقط نیاز است که data-toggle="tab" یا data-toggle="pill" را در عنصر اضافه کنید. کلاس‌های nav و nav-tabs برای عنصر ul، شیوه نمایش تبی بوت‌استرپ را فعال می‌کند.

<ul class="nav nav-tabs">
  <li><a href="#home" data-toggle="tab">صفحه اصلی</a></li>
  <li><a href="#profile" data-toggle="tab">پروفایل</a></li>
  <li><a href="#messages" data-toggle="tab">پیام‌ها</a></li>
  <li><a href="#settings" data-toggle="tab">تنظیمات</a></li>
</ul>

توابع

$().tab

عنصر و نگهدارنده محتویات تب را فعال می‌کند. تب باید data-target یا href را به یک عنصر در DOM اشاره دهد.

<ul class="nav nav-tabs" id="myTab">
  <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="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

<script>
  $(function () {
    $('#myTab a:last').tab('show');
  })
</script>

رویدادها

رویداد توصیف
show این رویداد هنگامی فراخوانی می‌شود که تب نمایش داده می‌شود اما قبل از این‌که تب جدید نشان داده شود. از event.target و event.relatedTarget به ترتیب برای اشاره به تب فعال و تب فعال قبلی (در صورت وجود) استفاده کنید.
shown این رویداد هنگامی فراخوانی می‌شود که تب بعدی نشان داده شده‌است. از event.target و event.relatedTarget به ترتیب برای اشاره به تب فعال و تب فعال قبلی (در صورت وجود) استفاده کنید.
$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // تب فعال‌شده
  e.relatedTarget // تب قبلی
})

نمونه‌ها

برگرفته از پلاگین jQuery.tipsy که توسط «جیسون فریم» نوشته‌شده‌است، می‌باشد. بالنک‌ها نسخهٔ به‌روزشده آن است که مبتنی بر عکس نمی‌باشد و از پویانمایی‌ها و خصوصیت‌های data (برای local title storage) سی‌اس‌اس ۳ استفاده می‌کند.

به خاطر سرعت و بهینه بودن، بالنک‌ها و پوب‌ها را خود شما باید به صورت دستی مقداردهی اولیه کنید.

بر روی پیوندهای زیر بروید تا آن‌ها را ببنید:

"نرم‌افزار آزاد" به معنای "غیرتجاری" نیست. یک برنامه آزاد باید برای استفاده تجاری، توسعه تجاری، و توزیع تجاری در دسترس باشد. توسعه تجاری نرم‌افزار آزاد دیگر غیر معمول نیست، بلکه چنین نرم‌افزارهای آزاد تجاری بسیار مهم هستند. بنابراین شما ممکن است پولی پرداخت کرده باشید تا کپی‌هایی از نرم‌افزار آزاد را بدست آورده باشید و یا ممکن است کپی‌ها را بدون پرداخت هزینه بدست آورده باشید. اما صرفنظر از اینکه چگونه کپی‌ها را بدست آورده باشید، شما همیشه این آزادی را دارید تا نرم‌افزار را کپی کنید و تغییر دهید و یا حتی کپی‌هایی از آن را بفروشید.

در چهار جهت

بالنک‌ها در گروهای دکمه‌ای

وقتی از بالنک‌ها و پوب‌ها در گروه‌های دکمه‌ای بوت‌استرپ استفاده می‌کنید، شما باید container مقداردهی کنید تا از اتفاق‌های جانبی جلوگیری کنید. (در زیر مستندسازی شده‌است)


استفاده

با استفاده از جاوااسکریپت بالنک را فعال کنید:

$('#example').tooltip(انتخاب‌ها)

انتخاب‌ها

انتخاب‌ها با استفاده از خصوصیت data یا جاوااسکریپت به تابع فرستاده می‌شود. برای خصوصیت data نام انتخاب خود را به data- اضافه کنید مانند data-animation="".

نام عنوان پیش‌فرض توصیف
animation boolean true جلوهٔ بصری انتقال محو را به بالنک اضافه می‌کند
html boolean false اچ‌تی‌ام‌ال در داخل بالنک قرار می‌دهد. اگر غیرفعال باشد تابع text جی‌کوئری در داخل dom محتویات متنی قرار می‌دهد. اگر از حملات XSS نگران هستید از متن ساده استفاده کنید.
placement string | function 'top' مکان قرارگیری بالنک را مشخص می‌کند که انتخاب‌ها می‌توانند: top | bottom | left | right باشند
selector string false اگر انتخاب‌گر تعریف شده‌باشد، بالنک‌ها بر روی انتخاب‌ها قرار خواهند گرفت.
title string | function '' در صورت عدم وجود تگ `title` به عنوان مقدار پیش‌فرض برای عنوان قرار می‌گیرد
trigger string 'hover focus' مشخص می‌کند که بالنک چگونه فعال شود: click | hover | focus | manual. Note you case pass trigger mutliple, space seperated, trigger types.
delay number | object 0

تاخیر نمایش و مخفی شدن بالنک به میلی‌ثانیه. اگر بالنک به‌صورت دستی (manual) فعال شود، بر آن تاثیری ندارد

اگر عددی مشخص شود، در نمایش و مخفی شدن تاثیر می‌گذارد

ساختار شی به‌صورت: delay: { show: 500, hide: 100 } است

container string | false false

Appends the tooltip to a specific element container: 'body'

توجه کنید! انتخاب‌ها برای بالنک‌های به‌خصوص، می‌تواند از طریق استفاده از خصوصیات data انجام گیرد.

نشانه‌گذاری

<a href="#" data-toggle="tooltip" title="first tooltip">بیا این‌جا</a>

توابع

$().tooltip(انتخاب‌ها)

یک بالنک به عناصر انتخاب شده، می‌چسباند.

.tooltip('نمایش')

بالنک یک عنصر را نمایش می‌دهد.

$('#element').tooltip('show')

.tooltip('مخفی')

بالنک یک عنصر را مخفی می‌کند.

$('#element').tooltip('hide')

.tooltip('تغییر وضعیت')

بالنک یک عنصر را تغییر حالت می‌دهد.

$('#element').tooltip('toggle')

.tooltip('حذف')

بالنک یک عنصر را مخفی و حذف می‌کند.

$('#element').tooltip('destroy')

نمونه‌ها

یک محتوا را در کنار یک عنصر، در صورتی دارای اطلاعات اضافی باشد، به‌مانند آن‌چیزی که در آی‌پد وجود دارد، قرار می‌دهد. بر روی دکمه بروید تا پوب، تغییر حالت بدهد. پیش‌نیاز پوب بالنک است و باید آن را نیز قرار دهید.

پوب ثابت

چهار انتخاب وجود دارد: بالا، راست، پایین و چپ.

پوب بالا

نرم‌افزار آزاد" به معنای "غیر تجاری" نیست. یک برنامه آزاد باید برای استفاده تجاری، توسعه تجاری، و توزیع تجاری در دسترس باشد.

پوب راست

"نرم‌افزار آزاد" به معنای "غیر تجاری" نیست. یک برنامه آزاد باید برای استفاده تجاری، توسعه تجاری، و توزیع تجاری در دسترس باشد.

پوب پایین

نرم‌افزار آزاد" به معنای "غیر تجاری" نیست. یک برنامه آزاد باید برای استفاده تجاری، توسعه تجاری، و توزیع تجاری در دسترس باشد.

پوب چپ

نرم‌افزار آزاد" به معنای "غیر تجاری" نیست. یک برنامه آزاد باید برای استفاده تجاری، توسعه تجاری، و توزیع تجاری در دسترس باشد.

جاوااسکریپت هیچ کد نشانه‌گذاری، در هنگام تولید پوب تولید نمی‌کند و تمام محتویات را در داخل خصوصیت data قرار می‌دهد.

اجرای زنده

چهار جهت


استفاده

پوب‌ها را با استفاده جاوااسکریپت فعال کنید:

$('#example').popover(انتخاب‌ها)

انتخاب‌ها

انتخاب‌ها می‌توانند با خصوصیت data یا جاوااسکریپت فرستاده شوند. برای خصوصیت data نام انتخاب را به data- اضافه کنید، مانند data-animation="".

نام نوع پیش‌فرض توصیف
animation boolean true جلوهٔ بصری انتقال محو را به بالنک اضافه می‌کند
html boolean false اچ‌تی‌ام‌ال در داخل پوب قرار می‌دهد. اگر غیرفعال باشد تابع text جی‌کوئری در داخل dom محتویات متنی قرار می‌دهد. اگر از حملات XSS نگران هستید، از متن ساده استفاده کنید.
placement string | function 'right' مکان قرارگیری پوب را مشخص می‌کند که انتخاب‌ها می‌توانند: top | bottom | left | right باشند
selector string false اگر انتخاب‌گر تعریف شده‌باشد، پوب‌ها بر روی انتخاب‌ها قرار خواهند گرفت.
trigger string 'click' مشخص می‌کند که پوب چگونه فعال شود: click | hover | focus | manual
title string | function '' در صورت عدم وجود تگ `title` به عنوان مقدار پیش‌فرض برای عنوان قرار می‌گیرد
content string | function '' در صورت عدم وجود تگ `data-content` به عنوان مقدار پیش‌فرض برای محتوا قرار می‌گیرد
delay number | object 0

تاخیر نمایش و مخفی شدن پوب به میلی‌ثانیه. اگر پوب به‌صورت دستی (manual) فعال شود، بر آن تاثیری ندارد

اگر عددی مشخص شود، در نمایش و مخفی شدن تاثیر می‌گذارد

ساختار شی به‌صورت: delay: { show: 500, hide: 100 } است

container string | false false

Appends the popover to a specific element container: 'body'

توجه کنید! انتخاب‌ها برای پوب‌های به‌خصوص می‌تواند از طریق استفاده از خصوصیات data انجام گیرد.

نشانه‌گذاری

برای بازدهی بهتر و سرعت بیشتر پوب‌ها و بالنک‌ها از data-apis می‌توان استفاده کرد. اگر شما می‌خواهید از آن‌ها استفاده کنید، فقط نیاز است که انتخاب‌گر را مشخص کنید.

توابع

$().popover(انتخاب‌ها)

یک پوب به عناصر انتخاب شده، می‌چسباند.

.popover('نمایش')

پوب یک عنصر را نمایش می‌دهد.

$('#element').popover('show')

.popover('مخفی')

پوب یک عنصر را مخفی می‌کند.

$('#element').popover('hide')

.popover('تغییر وضعیت')

پوب یک عنصر را تغییر حالت می‌دهد.

$('#element').popover('toggle')

.popover('حذف')

پوب یک عنصر را مخفی و حذف می‌کند.

$('#element').popover('destroy')

نمونه‌ای از اخطارها

دکمه حذف برای تمام پیام‌های اخطار توسط این پلاگین قرار می‌گیرد.

پسرررر! بهتره خودت رو نگاه کنی، به‌نظر خوب نیستی.

اوه نه!یک خطای دیگه

این را تغییر دهید و دوباره آن را امتحان کنید. آیا مطمئن هستید که سیم کامپیوتر به برق وصل است؟ آیا مطمئن هستید پرینتر را روشن کرده‌اید؟ آیا فکر می‌کنید سیستم‌عامل را باید عوض کنید؟

سیستم‌عامل رو عوض کن یا کامپیوتر را عوض کن


استفاده

پیام اخطار را توسط جاوااسکریپت فعال می‌کند:

$(".alert").alert()

نشانه‌گذاری

فقط نیاز است که data-dismiss="alert" را به دکمه اضافه کنید تا به‌صورت خودکار تبدیل به دکمهٔ بستن پیام اخطار شود.

<a class="close" data-dismiss="alert" href="#">&times;</a>

توابع

$().alert()

برای این‌که بتوان تمام پیام اخطار را باهم بست می‌توان از تابع زیر استفاده کرد. برای داشتن جلوهٔ بصری در هنگام بستن مطمئن شوید که کلاس‌های .fade و .in در آن‌ها وجود دارد.

.alert('بستن')

بستن یک اخطار.

$(".alert").alert('close')

رویدادها

کلاس اخطار بوت‌استرپ چندین رویداد در هنگام کار با اخطار از خود تولید می‌کند.

رویداد توصیف
close این رویداد به‌سرعت پس از فراخوانی تابع شی close رخ می‌دهد.
closed این رویداد هنگامی رخ می‌دهد که اخطار بسته شده‌باشد (منتظر می‌شود تا جلوه‌های بصری انتقال سی‌اس‌اس به‌اتمام برسد).
$('#my-alert').bind('closed', function () {
  // انجام یک‌کاری…
})

نمونه‌های استفاده

ایجاد دکمه‌های گروهی برای ساخت نوار ابزار و کارهای بسیاری دیگر که می‌توان با دکمه‌ها انجام داد.

نمایش وضعیت

برای این‌که یک دکمه وضعیت را نمایش دهد "در حال بارگذاری..."=data-loading-text را به آن اضافه کنید.

<button type="button" class="btn btn-primary" data-loading-text="در حال بارگذاری...">دانلود</button>

تغییر وضعیت یک‌حالته

برای تبدیل یک دکمه به حالت تغییر وضعیت یک‌حالته data-toggle="button" را به آن اضافه کنید.

<button type="button" class="btn btn-primary" data-toggle="button">تغییر وضعیت یک‌حالته</button>

Checkbox

برای تبدیل شدن دکمه به شیوه checkbox، خصوصیت data-toggle="buttons-checkbox" را به عنصری که کلاس آن btn-group است، اضافه کنید.

<div class="btn-group" data-toggle="buttons-checkbox">
  <button type="button" class="btn btn-primary">راست</button>
  <button type="button" class="btn btn-primary">وسط</button>
  <button type="button" class="btn btn-primary">چپ</button>
</div>

Radio

برای تبدیل شدن دکمه به شیوه radio، خصوصیت data-toggle="buttons-radio" را به عنصری که کلاس آن btn-group است، اضافه کنید.

<div class="btn-group" data-toggle="buttons-radio">
  <button type="button" class="btn btn-primary">راست</button>
  <button type="button" class="btn btn-primary">وسط</button>
  <button type="button" class="btn btn-primary">چپ</button>
</div>

استفاده

دکمه‌ها را از طریق جاوااسکریپت فعال می‌کند:

$('.nav-tabs').button()

نشانه‌گذاری

خصوصیات Data برای پلاگین دکمه جداناپذیر است. به نمونه‌های زیر توجه کنید:

انتخاب‌ها

هیچی

توابع

$().button('تغییر وضعیت')

با فشردن دکمه، تغییر وضعیت خواهد داد. شیوهٔ نمایش آن به حالتی تغییر خواهد کرد که فعال به‌نظر می‌رسد.

توجه کنید! تغییر وضعیت خودکار با اضافه کردن خصوصیت data-toggle به دکمه فعال خواهد شد.
<button type="button" class="btn" data-toggle="button" >…</button>

$().button('در حال بارگذاری')

دکمه را درحالت بارگذاری قرار می‌دهد. دکمه غیرفعال می‌شود و متن دکمه به در حال بارگذاری تغییر می‌کند. متن در حال بارگذاری باید به‌وسیلهٔ خصوصیت data-loading-text به دکمه اضافه شود.

<button type="button" class="btn" data-loading-text="در حال بارگذاری..." >...</button>
توجه کنید! فایرفاکس اصرار بر این دارد که وضعیت غیرفعال در هنگام بارگذاری صفحه اتفاق بیافتد. کارهایی برای این مشکل انجام شده‌است مانند: autocomplete="off".

$().button('بازنشانی')

وضعیت دکمه دوباره به‌حالت اول برمی‌گردد. متن به متن اصلی تغییر پیدا می‌کند.

$().button(رشته)

وضعیت به حالت اول تغییر می‌کند. متن به متن تعریف‌شده برای این تابع تغییر پیدا می‌کند.

<button type="button" class="btn" data-complete-text="finished!" >...</button>
<script>
  $('.btn').button('complete')
</script>

درباره

شیوه‌های نمایش پایه و انعطاف‌پذیر را برای پشتیبانی از اجزای فروریختنی مانند آکوردئون‌ها و ناوبری‌ها دریافت کنید.

* نیاز به پلاگین انتقال‌ها دارد.

نمونه‌ای از آکوردئون

از پلاگین فروریختنی برای ساخت یک ویدجت ساده استفاده کنید:

قوانین مربوط به نحوه بسته‌بندی یک بسته تغییر یافته نیز در صورتیکه بطور عملی و قابل اجرا، آزادی شما برای انتشار نسخه تغییر یافته را منع نکنند، قابل قبول هستند. قوانینی مانند "«اگر شما برنامه را به این روش در دسترس قرار دادید، باید آن را به آن روش نیز در دست قرار دهید»" نیز، با همان شرایط قبلی می‌توانند قابل قبول باشند. (به خاطر داشته باشید که چنین قانونی آزادی شما برای انتخاب انتشار و یا عدم انتشار برنامه را باقی می‌گذارد.) همچنین این برای مجوز قابل قبول است تا لازم بدارد که اگر شما یک نسخه تغییر یافته از برنامه را توزیع کردید و توسعه‌دهنده قبلی یک کپی از آن را درخواست نمود، شما باید یک کپی برای او بفرستید یا مشخص کنید که این تغییرات را شما انجام داده‌اید.
اغلب مجوزهای نرم‌افزار آزاد بر اساس کپی‌رایت می‌باشند، ولی برای آن دسته از الزاماتی که بواسطه کپی‌رایت می‌توانند تحمیل شوند، محدودیت‌هایی وجود دارد. اگر یک مجوز مبتنی بر کپی‌رایت آزادی را به روش‌هایی که در بالا توضیح داده شد محترم بشمارد و رعایت کند، بعید به نظر می‌رسد که مشکلات دیگری که ما هرگز پیش‌بینی نمی‌کردیم بوجود بیاید (اگر چه گه گاه این اتفاق می‌افتد). اما بعضی از مجوزهای نرم‌افزار آزاد بر اساس قراردادها می‌باشند، و قردادها می‌توانند شمار بیشتری از محدودیت‌های ممکن را تحمیل کنند. این بدان معناست که راه‌های بیشماری وجود دارند تا چنین مجوزی به طرز غیر قابل قبولی محدودکننده و غیر آزاد باشد.
در نهایت بخاطر داشته باشید که معیارها و ظوابطی مانند آنها که در تعریف نرم‌افزار آزاد ذکر شدند، برای تفسیر به تفکری دقیق نیاز دارند. برای تصمیم‌گیری در مورد اینکه آیا مجوز نرم‌افزار خاصی صلاحیت مجوز نرم‌افزار آزاد بودن را دارد، ما آن را بر مبنای همین ظوابط در نظر می‌گیریم تا تصمیم بگیریم که آیا معنی و مفهوم آن به خوبی کلمات و عبارات در آن، مناسب هست. اگر مجوز‌ی شامل موارد نامعقول باشد، ما آن را رد می‌کنیم، حتی اگر آن مورد را در این معیارها پیش‌بینی نکرده باشیم. بعضی اوقات درخواست‌های یک مجوز پی‌آمدی پیش می‌آورد که قبل از اینکه تصمیم بگیریم آیا این درخواست‌ها قابل قبول هستند، تفکر بسیاری شامل بحث و مذاکره با یک وکیل را مطالبه می‌کند. هنگامیکه ما درباره یک موضوع جدید به نتیجه می‌رسیم، غالبا این معیارها را به روز می‌کنیم تا راحت‌تر ببینید که چرا مجوز‌های خاص صلاحیت دارند و یا ندارند.
<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        گروه فروریختنی شماره ۱
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        قوانین مربوط به نحوه بسته‌بندی یک بسته تغییر یافته...
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        گروه فروریختنی شماره ۲
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
         اغلب مجوزهای نرم‌افزار آزاد بر اساس کپی‌رایت می‌باشند...
      </div>
    </div>
  </div>
</div>
...

همچنین شما می‌توانید بدون نشانه‌گذاری آکوردئون از پلاگین استفاده کنید. یک دکمهٔ تغییر حالت بسازید که باز شدن و فرو ریختن یک عنصر دیگر را کنترل کند.

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
  فرورختن ساده
</button>

<div id="demo" class="collapse in"> … </div>

استفاده

با استفاده از خصوصیت data

فقط خصوصیات data-toggle="collapse" و data-target را به عنصر خود اضافه کنید تا یک عنصر فروریختنی بسازید. خصوصیت data-target یک انتخاب‌گر سی‌اس‌اس را برای فروریزی آن قبول می‌کند. مطمئن شوید که کلاس collapse را به عنصر فروریختنی اضافه کرده‌اید. اگر شما می‌خواهید به‌صورت پیش‌فرض عنصر فروریختنی باز باشد از یک کلاس اضافی به نام in استفاده کنید.

برای اضافه‌کردن یک گروه از آکوردئون‌ها باید مانند دموی قبلی خصوصیت data-parent="#selector" را به آکوردئون اضافه کنید.

با استفاده از جاوااسکریپت

فعال کردن به‌صورت دستی:

$(".collapse").collapse()

انتخاب‌ها

انتخاب‌ها می‌توانند با استفاده از خصوصیت data و یا جاوااسکریپت فرستاده شود. برای خصوصیت data نام انتخاب را به data- اضافه کنید، مانند data-parent="".

نام نوع پیش‌فرض توصیف
parent selector false اگر انتخاب‌گر، انتخاب شده‌باشد (true باشد) آن‌گاه عنصرهای فروریختنی مربوط به یک پدر وقتی آن آیتم انتخاب شود، بسته خواهند شد. (به مانند رفتار آکوردئون سنتی)
toggle boolean true در هنگام فراخوانی عنصر فروریختنی تغییر حالت می‌دهد

توابع

.collapse(انتخاب‌ها)

محتوای شما را به عنوان یک عنصر فروریختنی فعال می‌کند. object نیز به عنوان یک انتخاب اختیاری دریافت می‌کند.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('تغییر وضعیت')

باعث می‌شود یک عنصر فروریختنی نمایش داده شود و یا مخفی شود.

.collapse('نمایش')

یک عنصر فروریختنی را نمایش می‌دهد.

.collapse('مخفی')

یک عنصر فروریختنی را مخفی می‌کند.

رویدادها

کلاس فروریختنی بوت‌استرپ تعدادی رویداد از خود تولید می‌کند.

رویداد توصیف
show این رویداد به‌سرعت پس از این‌که تابع شی show فراخوانی شد، اجرا می‌شود.
shown این رویداد هنگامی اجرا می‌شود که عنصر فروریختنی به کاربر نمایش داده‌شد (پس از این‌که انتقال‌های سی‌اس‌اس کامل شد).
hide این رویداد به‌سرعت پس از فراخوانی تابع hide، اجرا می‌شود.
hidden این رویداد هنگامی اجرا می‌شود که عنصر فروریختنی ار دید کاربر مخفی شد (پس از این‌که انتقال‌های سی‌اس‌اس کامل شد).
$('#myCollapsible').on('hidden', function () {
  // انجام یک‌کاری…
})

نمونه

یک پلاگین پایه‌ای، ساده و قابل گسترش برای ایجاد کامل‌کنندهٔ نوشته بر روی هر ورودی متن فرم.

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

You'll want to set autocomplete="off" to prevent default browser menus from appearing over the Bootstrap typeahead dropdown.


استفاده

با استفاده از خصوصیت data

خصوصیت data را به یک عنصر اضافه کنید تا قابلیت کامل‌کننده نوشته را بدست آورد مانند مثال بالا.

با استفاده از جاوااسکریپت

کامل‌کننده نوشته را دستی فراخوانی کنید:

$('.typeahead').typeahead()

انتخاب‌ها

انتخاب‌ها با استفاده از خصوصیت data و یا جاوااسکریپت فرستاده می‌شود. برای خصوصیت data نام انتخاب را به data- اضافه کنید مانند data-source="".

نام نوع پیش‌فرض توصیف
source array, function [ ] منبع داده برای جستجو است. ممکن است یک آرایه از رشته‌ها و یا تابع‌ها باشد.تابع دو آرگومان ارسال می‌کند، یکی مقدار query در فیلد ورودی و دیگر بازفراخوانی process. تابع ممکن است همزمان منبع داده را بازگرداند و یا همزمان از طریق بازفراخوانی تابع process.
items number 8 بیشترین تعداد آیتمی که در افتادنی می‌توان نمایش داد.
minLength number 1 کمترین کاراکتری که نیاز است کامل‌کنندهٔ نوشته فعال شود.
matcher function case insensitive تابعی که تشخیص می‌دهد آیا یک جستجو با یک آیتم برابر شده‌است یا نه. آرگومان item را برای آزمایش جستجو قبول می‌کند. برای دسترسی به جستجوی جاری از this.query استفاده کنید. اگر جستجو پیدا شود مقدار true را بازمی‌گرداند.
sorter function exact match,
case sensitive,
case insensitive
تابعی که نتایج کامل‌کننده‌ها را مرتب می‌کند. آرگومان items را دریافت می‌کند و شی کامل‌کننده نوشته را می‌تواند ببیند. this.query به جستجوی جاری اشاره می‌کند.
updater function returns selected item The method used to return selected item. Accepts a single argument, the item and has the scope of the typeahead instance.
highlighter function highlights all default matches تابعی که برای رنگی کردن نتایج کامل‌کننده استفاده می‌شود. آرگومان item در دریافت می‌کند و می‌تواند شی کامل‌کننده نوشته را ببیند.

توابع

.typeahead(انتخاب‌ها)

یک ورودی را به کامل‌کنندهٔ نوشته تجهیز می‌کند.

نمونه

زیرناوبری در سمت راست نمونه‌ای از نمایش زندهٔ پلاگین پیوست می‌باشد.


استفاده

با استفاده از خصوصیت data

برای تبدیل هر عنصری به یک پیوست، فقط نیاز است که data-spy="affix" به آن عنصر اضافه کنید. سپس جابه‌جایی‌ها را تعریف کنید که چه‌وقت عنصر فعال و غیرفعال شود.

<div data-spy="affix" data-offset-top="200">...</div>
توجه کنید! شما باید مکان عنصر چسبیده‌شده و رفتار پدر بعدی آن را مدیریت کنید.مکان‌ها با استفاده از affix، affix-top و affix-bottom کنترل می‌شود. Remember to check for a potentially collapsed parent when the affix kicks in as it's removing content from the normal flow of the page.

با استفاده از جاوااسکریپت

پلاگین پیوست با استفاده از جاوااسکریپت فراخوانی کنید:

$('#navbar').affix()

انتخاب‌ها

انتخاب‌ها با استفاده از خصوصیت data و یا جاوااسکریپت فرستاده می‌شوند. برای خصوصیت data نام انتخاب را به data- اضافه کنید مانند data-offset-top="200".

نام نوع پیش‌فرض توصیف
offset number | function | object 10 تعدادی پیکسلی که در هنگام اسکرول کردن از صفحه نمایش باید فاصله داشته باشد را، محاسبه می‌کند. اگر یک عدد وارد شود، فاصله در جهت‌های بالا و چپ محاسبه و اعمال می‌شود. برای انتخاب فاصلهٔ یک جهت و یا چندین جهت شی offset: { x: 10 } آماده شده‌است. از یک تابع برای تعیین پویای فاصله استفاده کنید (بیشتر برای طراحی‌های پاسخگو مناسب است).