फ्रेमवर्क 7 - टैब

विवरण

टैब तार्किक रूप से समूहित सामग्री के सेट होते हैं जो हमें उनके बीच तेज़ी से फ़्लिप करने की अनुमति देते हैं और इस तरह के स्थान को सहेजते हैं।

टैब लेआउट

निम्न कोड टैब के लिए लेआउट को परिभाषित करता है -

<!-- Tabs wrapper, shoud have "tabs" class.It is a required element -->
<div class = "tabs">
   <!-- The tab, should have "tab" class and unique id attribute -->
   
   <!-- The tab is active by default - "active" class -->
   <div class = "tab active" id = "tab1">
      ...  The content for Tab 1 goes here ...
   </div>
   
   <!-- The second tab, should have "tab" class and unique id attribute -->
   <div class = "tab" id = "tab2">
      ... The content for Tab 2 goes here ...
   </div>
</div>

कहाँ -

• <div class = "tabs">- यह सभी टैब के लिए एक आवश्यक आवरण है। यदि हम इसे याद करते हैं, तो टैब बिल्कुल काम नहीं करेंगे।

• <div class = "tab"> - यह एक एकल टैब है, जो होना चाहिए unique id विशेषता।

• <div class = "tab active">- यह एक एकल सक्रिय टैब है, जो टैब को दृश्यमान (सक्रिय) बनाने के लिए अतिरिक्त सक्रिय वर्ग का उपयोग करता है ।

टैब के बीच स्विच करना

आप टैब लेआउट में कुछ नियंत्रक का उपयोग कर सकते हैं, ताकि उपयोगकर्ता उनके बीच स्विच कर सके।

इस के लिए, आप के साथ लिंक (<a> टैग) बनाने की जरूरत टैब-लिंक वर्ग और href विशेषता के बराबर आईडी लक्ष्य टैब की विशेषता -

<!-- Here the link is used to activates 1st tab, has the same href attribute (#tab1) as the id attribute of 1st tab (tab1)  -->
<a href = "#tab1" class = "tab-link active">Tab 1</a>

<!-- Here the link is used to activates 2st tab, has the same href attribute (#tab2) as the id attribute of 2st tab (tab2)  -->
<a href = "#tab2" class = "tab-link">Tab 2</a>

<a href = "#tab3" class = "tab-link">Tab 3</a>

एकाधिक टैब स्विच करें

यदि आप कई टैब के बीच स्विच करने के लिए सिंगल टैब लिंक का उपयोग कर रहे हैं, तो आप आईडी और डेटा-टैब विशेषता का उपयोग करने के बजाय कक्षाओं का उपयोग कर सकते हैं ।

<!-- For Top Tabs  -->
<div class = "tabs tabs-top">
   <div class = "tab tab1 active">...</div>
   <div class = "tab tab2">...</div>
   <div class = "tab tab3">...</div>
</div>

<!-- For Bottom Tabs -->
<div class = "tabs tabs-bottom">
   <div class = "tab tab1 active">...</div>
   <div class = "tab tab2">...</div>
   <div class = "tab tab3">...</div>
</div>

<!-- For Tabs links -->
<div class = "tab-links">
   <!-- Links are switch top and bottom tabs to .tab1 -->
   <a href = "#" class = "tab-link" data-tab = ".tab1">Tab 1</a>
   <!-- Links are switch top and bottom tabs to .tab2 -->
   <a href = "#" class = "tab-link" data-tab = ".tab2">Tab 2</a>
   <!-- Links are switch top and bottom tabs to .tab3 -->
   <a href = "#" class = "tab-link" data-tab = ".tab3">Tab 3</a>
</div>

टैब-लिंक की डेटा-टैब विशेषता में लक्ष्य टैब / टैब का सीएसएस चयनकर्ता शामिल है।

हम टैब के विभिन्न तरीकों का उपयोग कर सकते हैं, ये निम्नलिखित तालिका में निर्दिष्ट हैं -

S.No	टैब प्रकार और विवरण
1	इनलाइन टैब इनलाइन टैब इनलाइन में समूहीकृत के सेट होते हैं जो आपको उनके बीच जल्दी से फ्लिप करने की अनुमति देते हैं।
2	नवबार से टैब स्विच करें हम नेविगेशन बार में टैब रख सकते हैं जो आपको उनके बीच फ्लिप करने की अनुमति देता है।
3	टैब बार से दृश्य स्विच करें सिंगल टैब का उपयोग अपने स्वयं के नेविगेशन और लेआउट के साथ विचारों के बीच स्विच करने के लिए किया जा सकता है।
4	एनिमेटेड टैब टैब स्विच करने के लिए आप साधारण ट्रांज़िशन (एनीमेशन) का उपयोग कर सकते हैं।
5	स्वाइप करने योग्य टैब आप टैब के लिए टैब-स्वाइप करने योग्य-रैप क्लास का उपयोग करके सरल संक्रमण के साथ स्वाइप करने योग्य टैब बना सकते हैं ।
6	टैब्स जावास्क्रिप्ट इवेंट्स जब आप टैब के लिए जावास्क्रिप्ट कोड के साथ काम कर रहे हों तो जावास्क्रिप्ट घटनाओं का उपयोग किया जा सकता है।
7	जावास्क्रिप्ट का उपयोग करके टैब दिखाएं आप जावास्क्रिप्ट विधियों का उपयोग करके टैब को स्विच या दिखा सकते हैं।