Sfondo

Browser moderni farla finita con la barra di stato classico e invece disegnare un piccolo suggerimento in fondo a loro finestre che visualizza la destinazione del collegamento al passaggio del mouse/focus.Disattivazione testo barra di stato del browser

Un esempio di questo comportamento (indesiderato, nel mio caso) è illustrato nello screenshot seguente:

Domande

C'è un modo portatile per disattivare questi tooltip?
Mi mancano alcuni ovvi inconvenienti per farlo nella mia situazione particolare?
Il mio tentativo (vedi sotto) è un modo ragionevole per realizzare questo?

Ragionamento

Sto lavorando su un'applicazione web intranet e vorrei disattivare questo comportamento per alcune azioni specifiche dell'applicazione perché, francamente, https://server/# appare ovunque come un occhio-dolente ed è invadente poiché in alcuni casi la mia applicazione disegna la propria barra di stato in quella posizione.

mio tentativo

Io non sono un web-developer di professione, così la mia conoscenza è ancora piuttosto limitata in questo settore.

Comunque, ecco il mio tentativo con jQuery:

<!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() sostituisce tutti i link che contengono # (ad esempio, le azioni specifiche per l'applicazione nel mio caso), con un elemento di span, rende tutti i link "esterni" Apri in una nuova scheda/finestra e non sembra interrompere la gestione del protocollo personalizzato.

fonte

2012-05-06 TjB

Benvenuti a Stack Overflow! –

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

C'è un modo portatile per disabilitare queste descrizioni?

No, oltre a soluzioni alternative come nell'esempio sopra riportato.

Mi mancano alcuni ovvi inconvenienti per farlo nella mia situazione particolare?

Sembra che manchi il fatto che l'intera situazione sia scomoda. Perché avere dei collegamenti se li farai sembrare pulsanti? Basta usare i pulsanti. Del resto, perché preoccuparsi con i collegamenti se si finisce per passare fuori con span comunque? Basta usare span.

Il mio tentativo (vedere di seguito) è un modo ragionevole per eseguire ciò?

Non è molto ragionevole come approccio generale, perché rimuovi questi elementi di ancoraggio dal documento, quindi tutti gli ascoltatori di eventi collegati, gli espansioni, ecc. Andranno persi. Potrebbe funzionare per la tua situazione specifica, ma un approccio più sano sarebbe quello di non utilizzare i collegamenti in primo luogo (vedi sopra).

Se siete ancora decisi a fare qualcosa di simile, almeno non sostituire l'elemento a. Basta sbarazzarsi del suo attributo href e impostare un listener di eventi come hai fatto nel tuo esempio. Ora non è più un link, quindi non verrà visualizzato nella barra di stato (ma è ancora lo stesso elemento, almeno).

fonte

2012-05-06 05:06:22

Il tuo ultimo suggerimento funziona perfettamente. Non sapevo che potevi farlo con gli elementi 'a' vuoti. – TjB

Se hai il controllo sul markup, prenderei seriamente in considerazione il fatto di non renderli link in primo luogo. Ad esempio, le azioni che modificano i dati nella tua applicazione dovrebbero sempre avvenire tramite POST piuttosto che GET, anche nelle app intranet ... se è questo che dovrebbero essere, dovrebbero essere i pulsanti di sicuro. La cosa della barra di stato non è davvero un problema significativo, ma potrebbe essere un'indicazione di design scadente. –

Grazie per i tuoi suggerimenti. I pulsanti hanno più senso semanticamente nella maggior parte dei miei casi d'uso. Giocherò con questo. – TjB

Il tooltip fornisce un'indicazione all'utente dove un collegamento li porterà se cliccato. Fa parte dell'esperienza utente del browser standard e sarà atteso dagli utenti del tuo sito. Cambiare questa aspettativa perché non pensi che sembrerà piacevole porterà probabilmente a una scarsa esperienza utente. Qualsiasi contenuto mostrato in quell'area sarà visibile non appena l'utente si fermerà sopra un tag di collegamento.

So che qualsiasi collegamento che non mi dice dove sta andando sembra piuttosto sospetto per me.

fonte

2012-05-06 04:42:44 Bill

Grazie per aver fornito una risposta. Mi rendo conto che questa non è una buona idea il 99% delle volte, tuttavia, nel mio caso, la maggior parte di questi link sono azioni che assomigliano a pulsanti e altri elementi dell'interfaccia utente di Windows. La mia app dovrebbe funzionare come un'applicazione desktop, ma nel browser. Penso che in questo caso, è giusto disabilitare il suggerimento solo per quegli elementi per ragioni estetiche. I collegamenti esterni e i protocolli personalizzati rimangono inalterati. – TjB

In realtà non è una buona idea il 100% delle volte, ecco perché i browser hanno smesso di lasciare che le persone finiscano con il contenuto della barra di stato. Perché non te ne vai e vedi se qualcuno si lamenta? – Bill

Non è solo un problema estetico, però. Dai uno sguardo a questo screenshot dal link fornito da j08691 qui sopra: http://i.imgur.com/mlnYN.png Il tooltip sta bloccando il contenuto del sito. Nel caso di un'applicazione web che implementa una propria barra di stato, è un valido motivo per disabilitarla per azioni specifiche dell'applicazione. Ancora una volta, i collegamenti esterni non sono stati modificati. – TjB

provare questo

$(this).removeAttr("href"); 
$(this).click(function(){}).mouseover(function(){.........}).etc

fonte

2012-10-01 22:43:10 user1234396

<button onclick="window.open('yoururlhere.html','_self')">your link text here</button>

Si noti che questa tratta Ctrl-clic come clic ordinarie e disabilita tasto destro del mouse. Non so sui clic intermedi.

Si potrebbe anche usare "a" e sostituire semplicemente href con onclick come nel codice sopra, ma quando ho provato che il mio stile "a: hover" ha smesso di funzionare. Apparentemente una "a" senza href è considerata non recuperabile, almeno in Firefox. Così sono passato a "pulsante" e "pulsante: hover" e tutto andava bene.

Capisco che questa soluzione sarà considerata una cattiva pratica, ma in alcune situazioni, ad esempio il sito che sto facendo composto principalmente da foto a schermo intero, principi di trionfo dell'estetica.

fonte

2012-11-09 06:53:55 tommie

Questo è quello che faccio con 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'); 
      }); 
     });

fonte

2013-09-20 11:12:10 Daantje

Funziona con middle/right click? – Timmmm

No, l'esempio è solo il normale clic del mouse. Cambia click() su mouse() per catturare tutti i pulsanti del mouse che penso. Non testato ... Questo forse aiuta; http://stackoverflow.com/a/2725963/536590 – Daantje

Disattivazione testo barra di stato del browser

Sfondo

Domande

Ragionamento

mio tentativo

risposta

Problemi correlati