Deaktivieren von browser status bar text
Hintergrund
Moderne Browser tun, Weg mit den Klassiker-status bar und stattdessen zeichnen Sie einen kleinen tooltip an der Unterseite der Fenster, zeigt das link-Ziel bei hover/focus.
Beispiel dieses (unerwünschte, in meinem Fall) Verhalten zeigt der folgende screenshot:
Fragen
- Gibt es eine portable Möglichkeit, diese zu deaktivieren tooltips?
- Fehlen mir irgendwelche offensichtlichen Nachteile, um dies zu tun, in meiner speziellen situation?
- Ist mein Versuch (siehe unten) ein vernünftiger Weg, dies zu erreichen?
Argumentation
Ich arbeite an einer intranet-web-Anwendung und möchte um dieses Verhalten zu deaktivieren für einige Anwendungs-spezifische Aktionen, weil ehrlich gesagt, https://server/# überall aussieht wie ein Auge-Wunde und ist aufdringlich, da in einigen Instanzen meiner Anwendung zieht seinen eigenen status bar in diesem Ort.
Mein Versuch
Ich bin kein web-Entwickler von Beruf, daher ist mein wissen noch sehr begrenzt in diesem Bereich.
Anyway, hier ist mein Versuch mit 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[]').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() ersetzt alle links, die # (d.h., auf die Anwendung bestimmter Maßnahmen in meinem Fall) mit einer span element, macht alle "externen" links öffnen in einem neuen tab/Fenster und scheint nicht zu brechen, benutzerdefinierte Protokoll-handling.
- Herzlich willkommen auf Stack Overflow!
- stackoverflow.com/questions/876390/...
Du musst angemeldet sein, um einen Kommentar abzugeben.
NÖ, andere als workarounds wie dein Beispiel oben.
Scheinen Sie zu fehlen, die Tatsache, dass die ganze situation unangenehm. Warum links, wenn Sie gehen, um Sie wie Schaltflächen Aussehen? Verwenden Sie einfach die Tasten. Für diese Angelegenheit, warum die Mühe mit den links, wenn Sie am Ende schalten Sie aus mit Spannweiten überhaupt? Verwenden Sie einfach überspannt.
Es ist nicht wirklich vernünftig, ein Allgemeines Konzept, da man das entfernen dieser Anker-Elemente aus dem Dokument, so dass alle angeschlossenen-Ereignis-Listener mit expandos, etc. verloren. Es kann die Arbeit für Ihre spezifische situation, aber ein vernünftiger Ansatz wäre es, nicht links in den ersten Platz (siehe oben).
Wenn du bist immer noch entschlossen, so etwas zu tun, zumindest nicht ersetzen Sie die
aelement. Einfach loszuwerden, seinehrefAttribut aus und legen Sie einen Ereignis-listener, wie Sie in Ihrem Beispiel. Jetzt ist es nicht mehr einen link, so wird es nicht zeigen, bis in der status-Leiste (aber es ist immer noch das gleiche element, mindestens).aElemente.Beachten Sie, dass diese leckereien Strg-Klicks als normale Klicks und deaktiviert die Rechte Maustaste. Ich weiß nicht, über die Mitte klickt.
Könnten Sie auch "ein" und nur ersetzen Sie den href mit onclick-wie im code oben, aber wenn ich versuchte, dass meine "a:hover" - styling aufgehört zu arbeiten. Offenbar ein "a" ohne ein "href" - ist als unhoverable, zumindest in Firefox. Also wechselte ich zu "Taste" und "button:hover" - styling und alles war gut.
Verstehe ich diese Lösung als eine schlechte Praxis, aber in manchen Situationen, wie zB die Seite, die ich mache sich in Erster Linie aus der Fotos-Vollbild, ästhetik übertrumpft Prinzipien.
Dem tooltip ein Hinweis an den Benutzer, wo ein link wird Sie, wenn auf Sie geklickt wird. Es ist Teil der standard-browser-user-Erfahrung und erwartet die Nutzer Ihrer Website. Ändern diese Erwartung, weil Sie nicht denken, es sieht nett aus, wird wahrscheinlich führen zu einer schlechten user experience. Alle Inhalte in diesem Bereich werden sichtbar, sobald der Benutzer hält man die Maus über ein link-tag.
Weiß ich, dass jeder link, der sagt mir nicht, wo es sieht ziemlich verdächtig für mich.
versuchen, diese
Dies ist, was ich mit jQuery: