IE6 + (एक समाधान के पुनर्जन्म) से शुद्ध सीएसएस पर टैब

शुद्ध सीएसएस में टैब के कार्यान्वयन पर हैबर पर एक लेख था, जिसे लेखक ने हटा दिया (जाहिर है, समाधान की अपूर्णता के कारण), सभी टिप्पणियों को छिपाते हुए। लेखक के अनुभव के लिए धन्यवाद, मैंने समाधान में प्रयोज्य कमियों में से एक को समाप्त कर दिया और इसे एक टिप्पणी में प्रकाशित किया। टैब का व्यवहार सामान्य हो गया, टैब पर क्लिक करके (या नाम के आधार पर बटन), यह बाहर खड़ा था और माउस के चले जाने के बाद हाइलाइट किया गया। किसी भी समाधान की दृष्टि न खोना और उनके विकास को जारी रखने के लिए, मैं उनकी प्रतियां दूंगा। लेखक के समाधान makzimko को सैंडबॉक्स (IE9 +) में कॉपी किया गया था , सभी आवश्यक गुणों को बरकरार रखते हुए। परिवर्धन - वहाँ संशोधन में (IE9 + से)। IE6 से समर्थन के साथ नया (UPD3) क्रॉस-ब्राउज़र समाधान - jsfiddle.net और एक एकल फ़ाइल पर । अंत में, जबकि ओपेरा 11.61 काम करता है, ओपेरा 11.50 और छोटे का समर्थन करने के लिए एक मामूली बग फिक्स (UPD4) की आवश्यकता थी।

(टिप्पणियों को हटाने के साथ, लेखों को हटाना Habr के लिए असुविधाजनक क्यों है। किसी टिप्पणी को प्रकाशित करते समय कोई यह सुनिश्चित नहीं कर सकता है कि इसे संरक्षित किया जाएगा। क्राउडसोर्सिंग का विचार खो गया है - समुदाय मूल कच्चे समाधानों को परिष्कृत करेगा, और ज्ञान का आधार जो उसने लिखा है, वह खुद के लिए रखा गया है। और अन्य पाठकों के लिए। लेख थोड़ा और आत्मविश्वास देता है, इसलिए निर्णय लेख में फिर से प्रकाशित हुआ।)

दोनों समाधानों का मुख्य लक्ष्य :
पृष्ठ पुनः लोड किए बिना स्क्रिप्ट का सहारा लिए बिना टैब या सामग्री स्विचिंग बटन के तंत्र को लागू करें।

इसकी आवश्यकता क्यों है? सबसे अधिक संभावना है, यह समाधान व्यापक उपयोग के पृष्ठों के लिए बहुत उपयोगी होगा, जिनमें से उन ग्राहकों के बीच हैं जो जावास्क्रिप्ट अक्षम हैं। उनके लिए दो निर्णय नहीं करने के लिए - सर्वर के माध्यम से टैब और जेएस पर टैब, आप सीएसएस पर टैब बना सकते हैं।
लाभ, हालांकि, दिखाई दे रहे हैं; हम कमियों को सूचीबद्ध करते हैं।

प्रारंभिक समाधान के नुकसान (उनमें से कुछ आगे हल किए गए हैं, कुछ दृष्टिकोण में अंतर्निहित हैं):
*) एक बटन दबाने के लिए कोई मेमोरी नहीं है; : फोकस मदद कर सकता है, लेकिन पृष्ठ पर कोई भी क्लिक फोकस खो देगा;
*) असमर्थित IE8 और कम (इनलाइन-ब्लॉक के कारण; हल; UPD3 में हल;)
*) सामग्री की ऊँचाई पर प्रतिबंध - समाधान की विधि के कारण, सामग्री के लिए एक निश्चित ऊँचाई होना आवश्यक है, जिससे अधिक सामग्री की ट्रिमिंग हो जाएगी। (समाधान प्रत्येक इनडोर यूनिट के लिए एक स्क्रॉल है।);
*) गैर-प्रतिरूपकता (यदि एक फ्रेम में नहीं है) - एक पृष्ठ पर एक स्वतंत्र ब्लॉक के रूप में, केवल एक खिड़की या फ्रेम के रूप में उपयोग नहीं किया जा सकता है।

इसके अलावा नुकसान:
पहली कमियों को दूर करने के अलावा, अन्य लोगों को बचाया जाता है और कुछ और जोड़े जाते हैं:
*) इसके अलावा टैब या बटन की केवल एक पंक्ति का उपयोग करना संभव है;
*) टैब सामग्री (हेडर) का दोहराव।

हालांकि, पहले दोष का महत्व अधिक था - इसने प्रदर्शन को प्रभावित किया, और जो दोष दिखाई दिए वे उपयोगकर्ता से छिपे हुए और कार्यान्वयन कठिनाइयों से संबंधित थे। इसलिए, हमें कार्यान्वयन में थोड़ा अधिक सीमित मिला, लेकिन वास्तविक टैब समाधान के समान।

समाधान को सही ढंग से देखने के लिए, पृष्ठ या फ़्रेम के URL में एक एंकर लिखा जाना चाहिए, उदाहरण के लिए, # tab1। चूंकि jsfiddle.net सैंडबॉक्स में कोई एंकर नहीं हैं, इसलिए एक छोटी स्क्रिप्ट का उपयोग किया जाता है जो एंकर को एक सेकंड में स्विच करता है। वर्तमान निर्णय में, निश्चित रूप से, इसकी आवश्यकता नहीं है।

यह किस सिद्धांत पर काम करता है

जेएस के बिना HTML में, हम लिंक पर क्लिक के माध्यम से सामग्री के प्रदर्शन को नियंत्रित कर सकते हैं। पृष्ठ को फिर से लोड किए बिना एक विंडो की सामग्री को बदलने का तरीका एंकर के साथ है। पेज एंकर को स्क्रॉल करता है ताकि यह खिड़की या फ्रेम के शीर्ष किनारे पर स्थित हो। लंगर के नीचे सब कुछ एक खिड़की या फ्रेम में देखा जाएगा। यह टैब पृष्ठों के बीच स्विच करने का मूल विचार है।

इसके बाद, हमें अतिरिक्त छिपाने की जरूरत है। CSS में एक अतिप्रवाह है: छिपी हुई संपत्ति ; - ब्लॉक के बाहर सामग्री प्रदर्शित करने के लिए एक सीमक , और एक संपत्ति की ऊंचाई : ब्लॉक की ऊंचाई के लिए सीमक। यह उस खिड़की की ऊंचाई को इंगित करने के लिए आवश्यक है जिसमें हम सामग्री का निरीक्षण करेंगे (यहां यह है, ब्लॉक प्रदर्शित करने पर प्रतिबंध - हमें सामग्री को खिड़की या फ्रेम में रखने की आवश्यकता है और अभी भी पता है कि ब्लॉक को देखने के लिए कितनी ऊंचाई होगी)। उदाहरण में, ये 2 गुण #tabcontent {...} में निर्दिष्ट हैं।

अगला, हम टॉगल बटन के साथ हेडर दिखाने का ध्यान रखते हैं। एंकरों को स्विच करते समय इसे स्थानांतरित नहीं करना चाहिए, इसलिए यह #tabcontent के बाहर, #tabs ब्लॉक में स्थित है। और आपको चयनित निष्क्रिय टैब की छवि के साथ दबाए गए बटन को बंद करने की आवश्यकता है। मूल निर्णय में कोई समापन नहीं था। ताकि CSS1 पर कार्यान्वयन की संभावनाएं हैं, आपको सुपर-आधुनिक कुछ भी उपयोग करने की आवश्यकता नहीं है। सामग्री के प्रत्येक पृष्ठ ( #tabcontent li ) पर एक बटन के डुप्लिकेट को असाइन करें और इसे दबाए गए चित्रण करें। हम प्रत्येक बटन को मैन्युअल रूप से सेट करते हैं ताकि लंगर के साथ स्क्रॉल करते समय यह बटन दबाए जाने की स्थिति को बिल्कुल हिट करे। हम बटन के टेक के लिए z- इंडेक्स असाइन करते हैं ताकि यह सबसे ऊपर दिखाई दे। (यह पता चला है कि IE6-8 के लिए और बाकी के लिए, यह थोड़ा अलग तकनीकों द्वारा किया जाता है।) हम एक ही कोड में क्रॉस-ब्राउज़र गुणों को जोड़ते हैं।

सिद्धांत रूप में, हम 2 और 3 पंक्तियों के टैब का वर्णन कर सकते हैं, अगर हम सभी पंक्तियों में डुप्लिकेट बटन की स्थिति की सही गणना करते हैं। यदि आप प्रत्येक पृष्ठ के ऊपर शीर्षकों की पूर्ण डुप्लिकेट बनाते हैं (वांछित टैब दिखाई देता है, तो बाकी अदृश्य है), आप स्वचालित रूप से भरे गए बहु-पंक्ति टैब भी बना सकते हैं। एक संबंधित प्रश्न उठता है: क्या सामग्री का दोहराव सुंदर है? यदि JS अक्षम है, तो हम सभी ब्राउज़रों में किसी अन्य तरीके से टैब नहीं बनाएंगे। यदि यह अक्षम नहीं है, तो हम उसी समाधान पर जेएस का उपयोग करेंगे (आखिरकार, डुप्लिकेटिंग प्रक्रिया भी बहुत बदसूरत है;) हम क्लाइंट पर कोड की नकल करेंगे। (लेख के उदाहरणों में सामग्री के पूर्ण दोहराव का कोई उदाहरण नहीं है, यह दृष्टिकोण के भविष्य के विकास के लिए एक अवसर है।)

अंत में, हम यह सुनिश्चित करते हैं कि टैब दूसरी पंक्ति में नहीं लिपटे हैं, क्योंकि हमारे पास एक-पंक्ति समाधान है। 2 उदाहरणों को विभिन्न तरीकों से निष्पादित किया जाता है। पहले (bA9mF / 45) में - बस संपत्ति सफेद-स्थान: Nowrap; , दूसरे में (bA9mF / 52) - हेडर की चौड़ाई सेट करना ताकि यह हमेशा इसमें शामिल सभी टैब की तुलना में व्यापक हो ( #tabs {न्यूनतम-चौड़ाई: 573px; * चौड़ाई: 573px;} )

निर्णय

संशोधन के साथ समाधान का परीक्षण किया गया है और आगे के विकास के लिए तैयार है: jsfiddle.net/bA9mF/45 ( देखें )।
यह इस तरह दिखता है (Fx8-10, Opera11.61, Chrome 16, Safari 5.02 Win):

अंतिम सक्रिय बटन के .pressed बटन का कवरेज और अन्य बटन पर माउस को मँडरा करने की प्रतिक्रिया दिखाई जाती है।
एफएक्स में, -मोज़-ट्रांज़िशन काम नहीं करता है (यूपीडी 2 में तय); सफारी 5.02 में, ग्रेडिएंट्स इस उदाहरण में काम नहीं करते हैं, इसलिए यह समान रूप से भरा हुआ है (यह सामान्य रूप से पुराने संस्करण में संभव है)। Fx3.6 भी काम करता है, लेकिन बिना -मोज़-संक्रमण के।
ब्राउज़रों में कुछ फ़ॉन्ट विविधताएँ .pressed बटनों द्वारा छिपाई गई हैं, लेकिन थोड़ा अलग लेआउट के साथ सटीक पिक्सेल कवरेज भी प्राप्त करने योग्य है, और साथ ही IE7-8 में एक सामान्य कार्यान्वयन है। ऐसा करने के लिए, आपको फ्लोट पर बटन बनाने की आवश्यकता है: बाएं और उनके बीच अंतराल को ठीक करें, जो अब इनलाइन-ब्लॉक के कारण थोड़ा सा तैर रहे हैं।
UPD : LAN ने बताया कि सफारी 5.1 में सब कुछ मैक और विन पर ग्रेडिएंट के साथ दिखाई दे रहा है। इतना बेहतर है, अब CSS कोड Safari 5.0 के लिए सामान्य गिरावट (एकसमान ग्रेस्केल) के साथ काम करता है। शैलियों -webkit-linear-gradient का उपयोग करती हैं, जिसे Chrome 10+, सफारी 5.1+ में पेश किया गया था।
UPD 2 : सॉफ्टलिंक के अनुसार, " संक्रमण एफएफ में काम करता है, लेकिन इसकी एक ख़ासियत है: यदि हम स्थिति बदलते हैं, तो इस ब्राउज़र के लिए हमें प्रारंभिक निर्देशांक निर्दिष्ट करने होंगे। " इस प्रकार, यह स्थिति शीर्ष जोड़ने के लिए पर्याप्त है: 0; #tabs ली में ताकि एफएक्स काम करे (उसका उदाहरण यहां है )।

UPD 3 22.30: सभी ब्राउज़रों के लिए एक समाधान है। jsfiddle.net/bA9mF/52 ( देखें )
IE6 में एक मामूली प्राकृतिक गिरावट है - बटन केवल तभी सक्रिय होते हैं जब आप सीधे लिंक पर होवर करते हैं और काम नहीं करते हैं: hover (और IE6 में लागू करने के लिए नहीं करना चाहिए। .htc फ़ाइलें बनाई जाती हैं)। यदि यह ब्राउज़र मोड में है तो IE8 का समान प्रभाव है : कम्पैटिबल मोड , जिस स्थिति में यह स्वचालित रूप से डॉक्यूमेंट मोड को चालू करेगा: Ie7, Ie8 नहीं। एक अलग पेज में है । इसलिए (यह IE ब्राउज़र के लिए एक सामान्य आवश्यकता है) आपको यह सुनिश्चित करने की आवश्यकता है कि ब्राउज़र संगतता मोड में नहीं है। (IE ब्राउज़र मोड के बारे में अधिक जानकारी के लिए, इस विषय की चर्चा टिप्पणियों में SelenIT2 के साथ देखें ।
IE6 और IE7 में पेज और प्रभाव क्या दिखते हैं:

UPD 4 13.02 10.30: ओपेरा 10.51, 11.50 - दोनों समाधान bA9mF / 52 संस्करण (प्रोटोटाइप काम करता है, हालांकि एक ही सिद्धांत पर) में समर्थित नहीं हैं। हैरानी की बात है: यह लाइन की वजह से काम नहीं करता है #tabcontent li> div {मार्जिन-टॉप: 266px; ...}, जिसे यदि हटा दिया जाता है, तो यह काम करेगा, लेकिन इसकी आवश्यकता है ताकि यह सभी ब्राउज़रों में एंकर के बिना सही ढंग से काम करे। आश्चर्य की बात है कि इस लाइन के बिना यह हर जगह सही ढंग से काम करता है, और ओपेरा में 10.51 से भी। त्वरित फिक्स: jsfiddle.net/bA9mF/65/embedded/result लेकिन ओपेरा (11.61 से पहले) का एक और दुर्भाग्य है: लगाए गए टैब एक संकीर्ण खिड़की के साथ चलते हैं।