हब्रहाब सॉसेज नेविगेशन

आज, DayliJS न्यूज़लेटर पर, मैंने एक महान विस्तार की खोज की - jQuery सॉसेज , जो आपको पृष्ठ पर एक बहुत ही सुविधाजनक नेविगेशन स्कीम जोड़ने की अनुमति देता है - हेडर द्वारा अलग किए गए ब्लॉक सामग्री की ऊंचाई के सापेक्ष स्केल किए जाते हैं और वेबस्टॉर्म या नेटबींस में अलग-अलग घोषणाओं के रूप में प्रदर्शित होते हैं (कुछ ऐसा ही बाईं ओर देखा जा सकता है। पोस्ट)।


छवि क्लिक करने योग्य jQuery सॉसेज उदाहरण की ओर जाता है

यह लेखों की बड़ी सूची और अनुच्छेदों को नेविगेट करने का एक बहुत ही सुविधाजनक तरीका है। प्रयोग के लिए, मैंने इस प्लगइन को jQuery और jQuery UI से अलग करने का फैसला किया और इसे Habr (मूल प्लगइन कुछ KB अतिरिक्त स्क्रिप्ट खींचता है) के तहत तेज कर दिया। मेरा एक्सटेंशन आलेख ब्लॉक या हेडिंग ब्लॉक स्कैन करता है और उन्हें ब्लॉक की एक श्रृंखला में प्रदर्शित करता है। जब एक ब्लॉक पर मँडराते हैं, तो एक हेडिंग दिखाई जाती है, एक ब्लॉक पर क्लिक करके पेज संबंधित पेज शीर्षक पर स्क्रॉल हो जाएगा। दुर्भाग्य से, सभी पोस्ट अच्छी तरह से स्वरूपित नहीं होते हैं, इसलिए नेविगेशन की यह विधि हमेशा प्रभावी नहीं होती है। क्योंकि यह एक प्रयोग है, तो jQuery सॉसेज की कुछ विशेषताओं को अभी भी काट दिया गया है।

निष्क्रिय मोड में ब्लॉक पारभासी है - यह पढ़ने से विचलित नहीं करता है।

लेख सूची मोड में रंग

हरा - विषय लिंक।
नीला विषय है।
काला एक अनुवाद है।
वायलेट कंपनी के ब्लॉक में एक विषय है।

विषय मोड में रंग

लाल - टिप्पणियाँ।
ग्रे - संतृप्ति के आधार पर, हेडर के स्तर को दर्शाता है।
ब्लू फ्रेम - वीडियो, ऑडियो या कोई भी फ्लैश ड्राइव।
पीला फ्रेम - चित्र।
हरे रंग का फ्रेम कोड (केवल <स्रोत> टैग) है।

"लेखों की सूची" मोड में सामान्य दृश्य

संदर्भ

उपयोगकर्ता स्क्रिप्ट पर स्क्रिप्ट पृष्ठ
स्रोत कोड

नेविगेशन विधि और आलोचना में सुधार के लिए सुझाव और सुझाव का स्वागत है!

युपीडी
जोड़ा ब्लॉक पट्टिका
जब आप किसी स्तंभ पर होवर करते हैं, तो यह नेविगेशन की आसानी के लिए फैलता है
जब आप किसी ब्लॉक पर होवर करते हैं, तो ब्लॉक शीर्षक वाले टूलटिप्स प्रदर्शित होते हैं
"ब्लॉक से सॉसेज" का प्रारंभिक दृश्य "ऊर्ध्वाधर बुकमार्क की सूची" से बदल दिया गया है
हेडर में लिंक और विषय लिंक के शीर्षक के साथ फिक्स्ड बग
ओपेरा में z- इंडेक्स पॉप-अप हेडर के साथ एक बग फिक्स्ड
ओपेरा में फिक्स्ड बग "टिप्पणी ब्लॉक नहीं दिखाया गया है"

UPD2
ऑल्टसपैम की सलाह पर पैराग्राफ के अंदर के विशेष ब्लॉक को हाइलाइट किया गया है: कोड, मीडिया प्लेयर, चित्र।