2012-05-06 24 views
13

पृष्ठभूमि

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

इस (अवांछनीय, मेरे मामले में) व्यवहार निम्न स्क्रीनशॉट में चित्रित किया गया है का एक उदाहरण:

http://i.imgur.com/0dAxc.png


प्रश्न

  1. वहाँ एक पोर्टेबल इन निष्क्रिय करने के लिए रास्ता नहीं है टूलटिप्स?
  2. क्या मुझे अपनी विशेष स्थिति में ऐसा करने के लिए कोई स्पष्ट कमी आई है?
  3. क्या मेरा प्रयास (नीचे देखें) इसे पूरा करने का एक उचित तरीका है?

तर्क

मैं एक इंट्रानेट वेब अनुप्रयोग पर काम कर रहा हूँ और कुछ आवेदन विशेष कार्यों के लिए इस व्यवहार को निष्क्रिय करने के क्योंकि काफी स्पष्ट रूप से, https://server/# हर जगह एक जैसे आंख को गले में लग रहा है और निकला हुआ है चाहते हैं चूंकि कुछ मामलों में मेरा एप्लिकेशन उस स्थान पर अपनी स्टेटस बार खींचता है।


मेरे प्रयास

मैं व्यापार के द्वारा एक वेब डेवलपर नहीं हूँ, इसलिए मेरी जानकारी अभी भी नहीं बल्कि इस क्षेत्र में सीमित है।

वैसे भी, यहाँ jQuery के साथ अपने प्रयास है: (यानी, मेरे मामले में आवेदन विशेष कार्रवाई) एक span तत्व के साथ, बनाता है

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Target Tooltip Test</title> 
    <style> 
     a, span.a { 
     color: #F00; 
     cursor: pointer; 
     text-decoration: none; 
     } 

     a:hover, span.a:hover { 
     color: #00F; 
     } 

     a:focus, span.a:focus { 
     color: #00F; 
     outline: 1px dotted; 
     } 
    </style> 
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
    <script> 
     $(document).ready(function() { 
     patch(); 
     }); 

     function patch() { 
     $('a').each(function() { 
      var $this = $(this).prop('tabindex', 0); 

      if($this.prop('href').indexOf('#') == -1 || $this.prop('rel').toLowerCase() == 'external') { 
      return; 
      } 

      var $span = $('<span class="a" tabindex="0"></span>'); 

      $span.prop('data-href', $this.prop('href')); 
      $span.text($this.text()); 

      $this.replaceWith($span); 
     }); 

     $('a[rel="external"]').click(function() { 
      window.open($(this).prop('data-href')); 
      return false; 
     }); 

     $('span.a').click(function() { 
      location.href = $(this).prop('data-href'); 
     }).keypress(function(event) { 
      if(event.keyCode == 13) { 
      location.href = $(event.target).prop('data-href'); 
      } 
     }).focus(function() { 
      window.status = ''; // IE9 fix. 
     }); 
     } 
    </script> 
    </head> 
    <body> 
    <ol> 
     <li><a href="http://google.com" rel="external">External Link</a></li> 
     <li><a href="#foo">Action Foo</a></li> 
     <li><a href="#bar">Action Bar</a></li> 
     <li><a href="#baz">Action Baz</a></li> 
     <li><a href="mailto:[email protected]">Email Support</a></li> 
    </ol> 
    </body> 
</html> 

patch()# युक्त सभी लिंक की जगह सभी "बाहरी" लिंक में खुलेगा एक नया टैब/विंडो और कस्टम प्रोटोकॉल हैंडलिंग तोड़ने लगते हैं।

+0

स्टैक ओवरफ़्लो आपका स्वागत है! –

+0

http://stackoverflow.com/questions/876390/reliable-cross-browser-way-of-setting-status-bar-text – j08691

उत्तर

4

क्या इन टूलटिप्स को अक्षम करने का कोई पोर्टेबल तरीका है?

नहीं, उपरोक्त आपके उदाहरण की तरह कामकाज के अलावा।

क्या मुझे अपनी विशेष स्थिति में ऐसा करने के लिए कोई स्पष्ट कमी आई है?

आपको लगता है कि पूरी स्थिति अजीब है। यदि आप उन्हें बटन की तरह दिखने जा रहे हैं तो लिंक क्यों हैं? बस बटन का प्रयोग करें। उस मामले के लिए, यदि आप किसी भी तरह से स्पैन के साथ स्विचिंग समाप्त करते हैं तो लिंक के साथ परेशान क्यों करें? बस स्पैन का उपयोग करें।

क्या मेरा प्रयास (नीचे देखें) इसे पूरा करने का एक उचित तरीका है?

यह सामान्य दृष्टिकोण के रूप में वास्तव में उचित नहीं है, क्योंकि आप दस्तावेज़ से उन एंकर तत्वों को हटा रहे हैं, इसलिए किसी भी संलग्न ईवेंट श्रोताओं, विस्तार, आदि खो जाएंगे। यह आपकी विशिष्ट स्थिति के लिए काम कर सकता है, लेकिन पहले स्थान पर लिंक का उपयोग नहीं करना चाहिए (ऊपर देखें)।


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

+0

आपका अंतिम सुझाव पूरी तरह से काम करता है। पता नहीं था कि आप खाली 'ए' तत्वों के साथ ऐसा कर सकते हैं। – TjB

+0

यदि आपके पास मार्कअप पर नियंत्रण है, तो मैं गंभीरता से उन्हें पहले स्थान पर लिंक बनाने पर विचार नहीं करता हूं। उदाहरण के लिए आपके अनुप्रयोग में डेटा बदलने वाले कार्यों को हमेशा इंट्रानेट ऐप्स में जीईटी के बजाय POST द्वारा किया जाना चाहिए ... यदि ये वही हैं, तो उन्हें निश्चित रूप से बटन होना चाहिए। स्टेटस बार चीज वास्तव में एक महत्वपूर्ण समस्या नहीं है, लेकिन यह खराब डिजाइन का संकेत हो सकता है। –

+0

आपके सुझावों के लिए धन्यवाद। बटन मेरे अधिकांश उपयोग मामलों में अर्थपूर्ण रूप से अधिक समझ में आता है। मैं इसके साथ खेलूँगा। – TjB

1

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

मुझे पता है कि कोई भी लिंक जो मुझे नहीं बताता कि यह कहां जा रहा है, मुझे बहुत संदिग्ध लग रहा है।

+0

उत्तर देने के लिए धन्यवाद। मुझे एहसास है कि यह 99% समय का अच्छा विचार नहीं है, हालांकि, मेरे मामले में, इनमें से अधिकतर लिंक बटन और अन्य विंडोज़ यूआई तत्वों की तरह दिखते हैं। मेरा ऐप डेस्कटॉप ऐप की तरह कार्य करना चाहिए, लेकिन ब्राउज़र में। मुझे लगता है कि इस उदाहरण में, केवल सौंदर्य तत्वों के लिए उन तत्वों के लिए टूलटिप को अक्षम करना ठीक है। बाहरी लिंक और कस्टम प्रोटोकॉल छूटे रह गए हैं। – TjB

+0

वास्तव में यह 100% समय का अच्छा विचार नहीं है, यही कारण है कि ब्राउज़र ने लोगों को उस स्टेटस बार सामग्री के साथ मकसद देना बंद कर दिया है। आप इसे क्यों छोड़ते हैं और देखते हैं कि कोई शिकायत करता है या नहीं? – Bill

+0

हालांकि, यह केवल एक सौंदर्य समस्या नहीं है। ऊपर दिए गए j08691 द्वारा प्रदान किए गए लिंक से इस स्क्रीनशॉट पर एक नज़र डालें: http://i.imgur.com/mlnYN.png टूलटिप साइट सामग्री को अवरुद्ध कर रहा है। किसी ऐसे वेब एप्लिकेशन के मामले में जो स्वयं की स्टेटस बार लागू करता है, यह एप्लिकेशन-विशिष्ट कार्रवाइयों के लिए इसे अक्षम करने का एक कानूनी कारण है। फिर, बाहरी लिंक छूटे हुए हैं। – TjB

1

कोशिश इस

$(this).removeAttr("href"); 
$(this).click(function(){}).mouseover(function(){.........}).etc 
3
<button onclick="window.open('yoururlhere.html','_self')">your link text here</button> 

ध्यान दें कि यह साधारण क्लिक के रूप में व्यवहार करता है ctrl-क्लिक और राइट क्लिक अक्षम करता है। मुझे मध्य क्लिक के बारे में पता नहीं है।

आप "ए" का उपयोग भी कर सकते हैं और केवल ऊपर दिए गए कोड में ऑनक्लिक के साथ href को प्रतिस्थापित कर सकते हैं, लेकिन जब मैंने कोशिश की कि मेरी "ए: होवर" स्टाइल काम करना बंद कर दे। स्पष्ट रूप से एक href के बिना "ए" को कम से कम फ़ायरफ़ॉक्स में, अप्रभावी माना जाता है। इसलिए मैंने "बटन" और "बटन: होवर" स्टाइल पर स्विच किया और सब ठीक थे।

मुझे लगता है कि इस समाधान को खराब अभ्यास माना जाएगा, लेकिन कुछ स्थितियों में, उदाहरण के लिए, जो साइट मैं मुख्य रूप से पूर्ण स्क्रीन फोटो बना रहा हूं, सौंदर्यशास्त्र सिद्धांतों को ट्रम्प करता है।

1

यह है कि मैं क्या jQuery के साथ क्या है:

 //remove status bar notification... 
     $('a[href]').each(function(){ 
      u = $(this).attr('href'); 
      $(this).removeAttr('href').data('href',u).click(function(){ 
       self.location.href=$(this).data('href'); 
      }); 
     }); 
+0

क्या यह मध्य/दाएं क्लिक के साथ काम करता है? – Timmmm

+0

नहीं, उदाहरण केवल सामान्य माउस क्लिक है। मुझे लगता है कि सभी माउस बटन पकड़ने के लिए क्लिक() mousedown() पर क्लिक करें। परीक्षण नहीं किया गया ... यह शायद मदद करता है; http://stackoverflow.com/a/2725963/536590 – Daantje

संबंधित मुद्दे