آموزش پلاگین تب در بوت استرپ

4 سال پیش

امتیاز دهید post

آموزش پلاگین تب در بوت استرپ

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

تب ها در بخش Bootstrap Navigation Elements معرفی شدند. با ترکیب چند ویژگی داده، به راحتی می توانید یک رابط کاربری جدول دار ایجاد کنید. با استفاده از این پلاگین می توانید از طریق صفحه های محتوای محلی در تب ها یا قرص ها، حتی از طریق منوهای کشویی، جابجا شوید.

اگر می خواهید این قابلیت پلاگین را به صورت جداگانه وارد کنید، به tab.js. نیاز دارید. در غیر این صورت ، همانطور که در این درس بررسی اجمالی افزونه های بوت استرپ ذکر شده است، می توانید bootstrap.js یا minst bootstrap.min.js را در آن قرار دهید.

کاربرد پلاگین تب در بوت استرپ

به دو روش زیر می توانید تب ها را فعال کنید –

از طریق ویژگی های داده – شما باید data-toggle = “tab” یا data-toggle = “pill” را به لنگرها اضافه کنید.
اضافه کردن کلاس nav و nav-tabs به tab ul از سبک بوت استرپ استفاده می شود ، در حالی که با افزودن کلاس nav و nav-pills از یک ظاهر طراحی شده قرص استفاده می شود.

&lt;ul class = "nav nav-tabs"&gt;
   &lt;li&gt;&lt;a href = "#identifier" data-toggle = "tab"&gt;Home&lt;/a&gt;&lt;/li&gt;
   ...
&lt;/ul&gt;

...

</ul>

از طریق JavaScript – می توانید برگه ها را با استفاده از Javscript به صورت زیر فعال کنید –

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

$('#myTab a').click(function (e) {

e.preventDefault()

$(this).tab('show')

})

در اینجا مثالی از روش های مختلف فعال کردن تب های منفرد آمده است –

// Select tab by name
$('#myTab a[href = "#profile"]').tab('show')
 
// Select first tab
$('#myTab a:first').tab('show') 

// Select last tab
$('#myTab a:last').tab('show') 

// Select third tab (0-indexed)
$('#myTab li:eq(2) a').tab('show')

// Select tab by name

$('#myTab a[href = "#profile"]').tab('show')

// Select first tab

$('#myTab a:first').tab('show')

// Select last tab

$('#myTab a:last').tab('show')

// Select third tab (0-indexed)

$('#myTab li:eq(2) a').tab('show')

افکت محو شدن

برای دریافت جلوه افکت محو شدن تب ها، .fade را به هر .tab-pane. اضافه کنید. اولین صفحه زبانه نیز باید دارای باشد. تا به درستی در محتوای اولیه محو شود –

&lt;div class = "tab-content"&gt;
   &lt;div class = "tab-pane fade in active" id = "home"&gt;...&lt;/div&gt;
   &lt;div class = "tab-pane fade" id = "svn"&gt;...&lt;/div&gt;
   &lt;div class = "tab-pane fade" id = "ios"&gt;...&lt;/div&gt;
   &lt;div class = "tab-pane fade" id = "java"&gt;...&lt;/div&gt;
&lt;/div&gt;

</div>

مثال

یک مثال از افزونه تب با استفاده از ویژگی های داده و اثر محو مانند مثال زیر است –

&lt;ul id = "myTab" class = "nav nav-tabs"&gt;
   &lt;li class = "active"&gt;
      &lt;a href = "#home" data-toggle = "tab"&gt;
         Tutorial Point Home
      &lt;/a&gt;
   &lt;/li&gt;
   
   &lt;li&gt;&lt;a href = "#ios" data-toggle = "tab"&gt;iOS&lt;/a&gt;&lt;/li&gt;
    
   &lt;li class = "dropdown"&gt;
      &lt;a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown"&gt;
         Java 
         &lt;b class = "caret"&gt;&lt;/b&gt;
      &lt;/a&gt;
      
      &lt;ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1"&gt;
         &lt;li&gt;&lt;a href = "#jmeter" tabindex = "-1" data-toggle = "tab"&gt;jmeter&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href = "#ejb" tabindex = "-1" data-toggle = "tab"&gt;ejb&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
   &lt;/li&gt;
&lt;/ul&gt;

&lt;div id = "myTabContent" class = "tab-content"&gt;

   &lt;div class = "tab-pane fade in active" id = "home"&gt;
      &lt;p&gt;Tutorials Point is a place for beginners in all technical areas.
         This website covers most of the latest technologies and explains each of
         the technology with simple examples.&lt;/p&gt;
   &lt;/div&gt;
   
   &lt;div class = "tab-pane fade" id = "ios"&gt;
      &lt;p&gt;iOS is a mobile operating system developed and distributed 
         by Apple Inc. Originally released in 2007 for the iPhone, iPod Touch,
         and Apple TV. iOS is derived from OS X, with which it shares the 
         Darwin foundation. iOS is Apple's mobile version of the OS X 
         operating system used on Apple computers.&lt;/p&gt;
   &lt;/div&gt;
   
   &lt;div class = "tab-pane fade" id = "jmeter"&gt;
      &lt;p&gt;jMeter is an Open Source testing software. It is 100% pure Java 
         application for load and performance testing.&lt;/p&gt;
   &lt;/div&gt;
   
   &lt;div class = "tab-pane fade" id = "ejb"&gt;
      &lt;p&gt;Enterprise Java Beans (EJB) is a development architecture for 
         building highly scalable and robust enterprise level applications to be 
         deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.&lt;/p&gt;
   &lt;/div&gt;
   
&lt;/div&gt;

Tutorial Point Home

</a>

</li>

Java

</a>

<li><a href = "#jmeter" tabindex = "-1" data-toggle = "tab">jmeter</a></li>

</ul>

</li>

</ul>

<p>Tutorials Point is a place for beginners in all technical areas.

This website covers most of the latest technologies and explains each of

the technology with simple examples.</p>

</div>

<p>iOS is a mobile operating system developed and distributed

by Apple Inc. Originally released in 2007 for the iPhone, iPod Touch,

and Apple TV. iOS is derived from OS X, with which it shares the

Darwin foundation. iOS is Apple's mobile version of the OS X

operating system used on Apple computers.</p>

</div>

<p>jMeter is an Open Source testing software. It is 100% pure Java

application for load and performance testing.</p>

</div>

<p>Enterprise Java Beans (EJB) is a development architecture for

building highly scalable and robust enterprise level applications to be

deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>

</div>

متد ها

tab.()$. – این متد عنصر تب و محتوا را فعال می کند. Tab باید دارای یک data-target یا href باشد که یک گره کانتینر را در DOM هدف قرار می دهد.

&lt;ul class = "nav nav-tabs" id = "myTab"&gt;
   &lt;li class = "active"&gt;&lt;a href = "#identifier" data-toggle = "tab"&gt;Home&lt;/a&gt;&lt;/li&gt;
   .....
&lt;/ul&gt;

&lt;div class = "tab-content"&gt;
   &lt;div class = "tab-pane active" id = "home"&gt;...&lt;/div&gt;
   .....
&lt;/div&gt;

&lt;script&gt;
   $(function () {
      $('#myTab a:last').tab('show')
   })
&lt;/script&gt;

.....

</ul>

.....

</div>

$(function () {

$('#myTab a:last').tab('show')

})

</script>

مثال

مثال زیر استفاده از روش افزونه .tab را نشان می دهد. در اینجا در مثال تب دوم iOS فعال شده است –

&lt;ul id = "myTab" class = "nav nav-tabs"&gt;
   &lt;li class = "active"&gt;
      &lt;a href = "#home" data-toggle = "tab"&gt;
         Tutorial Point Home
      &lt;/a&gt;
   &lt;/li&gt;
   
   &lt;li&gt;&lt;a href = "#ios" data-toggle = "tab"&gt;iOS&lt;/a&gt;&lt;/li&gt;
    
   &lt;li class = "dropdown"&gt;
    
      &lt;a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown"&gt;
         Java 
         &lt;b class = "caret"&gt;&lt;/b&gt;
      &lt;/a&gt;
      
      &lt;ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1"&gt;
         &lt;li&gt;
            &lt;a href = "#jmeter" tabindex = "-1" data-toggle = "tab"&gt;
               jmeter
            &lt;/a&gt;
         &lt;/li&gt;
         
         &lt;li&gt;
            &lt;a href = "#ejb" tabindex = "-1" data-toggle = "tab"&gt;
               ejb
            &lt;/a&gt;
         &lt;/li&gt;
      &lt;/ul&gt;
   &lt;/li&gt;
&lt;/ul&gt;

&lt;div id = "myTabContent" class = "tab-content"&gt;

   &lt;div class = "tab-pane fade in active" id = "home"&gt;
      &lt;p&gt;Tutorials Point is a place for beginners in all technical areas. 
         This website covers most of the latest technologies and explains each of 
         the technology with simple examples.&lt;/p&gt;
   &lt;/div&gt;
   
   &lt;div class = "tab-pane fade" id = "ios"&gt;
      &lt;p&gt;iOS is a mobile operating system developed and distributed by 
         Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and 
         Apple TV. iOS is derived from OS X, with which it shares the Darwin 
         foundation. iOS is Apple's mobile version of the OS X operating system 
         used on Apple computers.&lt;/p&gt;
   &lt;/div&gt;
   
   &lt;div class = "tab-pane fade" id = "jmeter"&gt;
      &lt;p&gt;jMeter is an Open Source testing software. It is 100% pure Java 
         application for load and performance testing.&lt;/p&gt;
   &lt;/div&gt;
   
   &lt;div class = "tab-pane fade" id = "ejb"&gt;
      &lt;p&gt;Enterprise Java Beans (EJB) is a development architecture for 
         building highly scalable and robust enterprise level applications to be 
         deployed on J2EE compliant Application Server such as JBOSS, 
         Web Logic etc.&lt;/p&gt;
   &lt;/div&gt;
   
&lt;/div&gt;

&lt;script&gt;
   $(function () {
      $('#myTab li:eq(1) a').tab('show');
   });
&lt;/script&gt;

Tutorial Point Home

</a>

</li>

Java

</a>

<li>

jmeter

</a>

</li>

<li>

ejb

</a>

</li>

</ul>

</li>

</ul>

<p>Tutorials Point is a place for beginners in all technical areas.

This website covers most of the latest technologies and explains each of

the technology with simple examples.</p>

</div>

<p>iOS is a mobile operating system developed and distributed by

Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and

Apple TV. iOS is derived from OS X, with which it shares the Darwin

foundation. iOS is Apple's mobile version of the OS X operating system

used on Apple computers.</p>

</div>

<p>jMeter is an Open Source testing software. It is 100% pure Java

application for load and performance testing.</p>

</div>

<p>Enterprise Java Beans (EJB) is a development architecture for

building highly scalable and robust enterprise level applications to be

deployed on J2EE compliant Application Server such as JBOSS,

Web Logic etc.</p>

</div>

$(function () {

$('#myTab li:eq(1) a').tab('show');

});

</script>

رویداد ها

جدول زیر رویدادهای کار با افزونه tab را لیست می کند. این رویداد ممکن است برای اتصال به عملکرد استفاده شود.

رویداد

توضیح

مثال

show.bs.tab

این رویداد در نمایش تب روشن می شود، اما قبل از نشان دادن تب جدید. برای هدف قرار دادن تب فعال و تب فعال قبلی (در صورت وجود) از event.target و event.relatedTarget استفاده کنید.

$('a[data-toggle = "tab"]').on('show.bs.tab', function (e) {
   e.target // activated tab
   e.relatedTarget // previous tab
})

$('a[data-toggle = "tab"]').on('show.bs.tab', function (e) {

e.target // activated tab

e.relatedTarget // previous tab

})

shown.bs.tab

این رویداد پس از نمایش یک تب، در برگه نمایش نشان داده می شود. برای هدف قرار دادن تب فعال و تب فعال قبلی (در صورت وجود) از event.target و event.relatedTarget استفاده کنید.

$('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) {
   e.target // activated tab
   e.relatedTarget // previous tab
})

$('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) {

e.target // activated tab

e.relatedTarget // previous tab

})

مثال

مثال زیر استفاده از رویدادهای پلاگین تب را نشان می دهد. در اینجا در مثال ما زبانه های بازدید شده قبلی و قبلی را نمایش خواهیم داد –

&lt;hr&gt;
&lt;p class = "active-tab"&gt;&lt;strong&gt;Active Tab&lt;/strong&gt;: &lt;span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p class = "previous-tab"&gt;&lt;strong&gt;Previous Tab&lt;/strong&gt;: &lt;span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;hr&gt;

&lt;ul id = "myTab" class = "nav nav-tabs"&gt;
   &lt;li class = "active"&gt;
      &lt;a href = "#home" data-toggle = "tab"&gt;
         Tutorial Point Home
      &lt;/a&gt;
   &lt;/li&gt;
   
   &lt;li&gt;&lt;a href = "#ios" data-toggle = "tab"&gt;iOS&lt;/a&gt;&lt;/li&gt;
    
   &lt;li class = "dropdown"&gt;
      &lt;a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown"&gt;
         Java 
         &lt;b class = "caret"&gt;&lt;/b&gt;
      &lt;/a&gt;
      
      &lt;ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1"&gt;
         &lt;li&gt;
            &lt;a href = "#jmeter" tabindex = "-1" data-toggle = "tab"&gt;jmeter&lt;/a&gt;
         &lt;/li&gt;
         
         &lt;li&gt;
            &lt;a href = "#ejb" tabindex = "-1" data-toggle = "tab"&gt;ejb&lt;/a&gt;
         &lt;/li&gt;
      &lt;/ul&gt;
   &lt;/li&gt;
&lt;/ul&gt;

&lt;div id = "myTabContent" class = "tab-content"&gt;

   &lt;div class = "tab-pane fade in active" id = "home"&gt;
      &lt;p&gt;Tutorials Point is a place for beginners in all technical areas.
         This website covers most of the latest technologies and explains each of 
         the technology with simple examples.&lt;/p&gt;
   &lt;/div&gt;
   
   &lt;div class = "tab-pane fade" id = "ios"&gt;
      &lt;p&gt;iOS is a mobile operating system developed and distributed by 
         Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and 
         Apple TV. iOS is derived from OS X, with which it shares the Darwin
         foundation. iOS is Apple's mobile version of the OS X operating system
         used on Apple computers.&lt;/p&gt;
   &lt;/div&gt;
   
   &lt;div class = "tab-pane fade" id = "jmeter"&gt;
      &lt;p&gt;jMeter is an Open Source testing software. It is 100% pure Java 
         application for load and performance testing.&lt;/p&gt;
   &lt;/div&gt;
   
   &lt;div class = "tab-pane fade" id = "ejb"&gt;
      &lt;p&gt;Enterprise Java Beans (EJB) is a development architecture for
         building highly scalable and robust enterprise level applications to be 
         deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.&lt;/p&gt;
   &lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
   $(function(){
      $('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) {
         // Get the name of active tab
         var activeTab = $(e.target).text(); 
         
         // Get the name of previous tab
         var previousTab = $(e.relatedTarget).text(); 
         
         $(".active-tab span").html(activeTab);
         $(".previous-tab span").html(previousTab);
      });
   });
&lt;/script&gt;

<hr>

<p class = "active-tab"><strong>Active Tab</strong>: <span></span></p>

<p class = "previous-tab"><strong>Previous Tab</strong>: <span></span></p>

<hr>

Tutorial Point Home

</a>

</li>

Java

</a>

<li>

<a href = "#jmeter" tabindex = "-1" data-toggle = "tab">jmeter</a>

</li>

<li>

</li>

</ul>

</li>

</ul>

<p>Tutorials Point is a place for beginners in all technical areas.

This website covers most of the latest technologies and explains each of

the technology with simple examples.</p>

</div>

<p>iOS is a mobile operating system developed and distributed by

Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and

Apple TV. iOS is derived from OS X, with which it shares the Darwin

foundation. iOS is Apple's mobile version of the OS X operating system

used on Apple computers.</p>

</div>

<p>jMeter is an Open Source testing software. It is 100% pure Java

application for load and performance testing.</p>

</div>

<p>Enterprise Java Beans (EJB) is a development architecture for

building highly scalable and robust enterprise level applications to be

deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>

</div>

$(function(){

$('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) {

// Get the name of active tab

var activeTab = $(e.target).text();

// Get the name of previous tab

var previousTab = $(e.relatedTarget).text();

$(".active-tab span").html(activeTab);

$(".previous-tab span").html(previousTab);

});

</script>

منبع.

لیست جلسات قبل آموزش بوت استرپ

امتیاز دهید post

نویسنده مطلب saber

آموزش پلاگین تب در بوت استرپ

آموزش پلاگین تب در بوت استرپ

کاربرد پلاگین تب در بوت استرپ

افکت محو شدن

مثال

متد ها

مثال

رویداد ها

مثال

لیست جلسات قبل آموزش بوت استرپ

دیدگاه شما

بدون دیدگاه

آموزش پلاگین تب در بوت استرپ

کاربرد پلاگین تب در بوت استرپ

افکت محو شدن

مثال

متد ها

مثال

رویداد ها

مثال

لیست جلسات قبل آموزش بوت استرپ

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه