2012-05-06 3 views
13

фон

Современные браузеры покончит с баром классического статуса и вместо того, чтобы сделать небольшую подсказку в нижней части окон, который отображает цель ссылки на парения/фокус.Отключение Строка состояния браузера текст

Примером этого (нежелательно, в моем случае) поведение показано на следующем скриншоте:

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


Вопросы

  1. Есть ли переносимый способ отключить эти всплывающие подсказки?
  2. У меня отсутствуют какие-либо очевидные недостатки для этого в моей конкретной ситуации?
  3. Является ли моя попытка (см. Ниже) разумным способом достижения этого?

Рассуждая

Я работаю над веб-приложения интрасети и хотели бы, чтобы отключить это поведение для некоторых конкретных приложений действий, потому что, откровенно говоря, https://server/# везде выглядит как глаз, боль и навязчивым поскольку в некоторых случаях мое приложение создает свою собственную строку состояния в этом месте.


Моя попытка

Я не веб-разработчик по профессии, так что мое знание все еще довольно ограничены в этой области.

Во всяком случае, вот моя попытка с 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() заменяет все ссылки, содержащие # (т.е. применение конкретных действий в моем случае) с span элементом, делает все «внешние» ссылки открываются в новая вкладка/окно и, похоже, не нарушает обработку пользовательских протоколов.

+0

Добро пожаловать на переполнение стека! –

+0

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

ответ

4

Есть ли переносной способ отключения этих всплывающих подсказок?

Нет, кроме обходных решений, подобных вашему примеру выше.

У меня отсутствуют какие-либо очевидные недостатки для этого в моей конкретной ситуации?

Вам, кажется, не хватает факта, что вся ситуация неудобна. Почему у вас вообще есть ссылки, если вы собираетесь сделать их похожими на кнопки? Просто используйте кнопки. Если уж на то пошло, зачем беспокоиться о ссылках, если вы в конечном итоге отключите их с пролетами? Просто используйте интервалы.

Является ли моя попытка (см. Ниже) разумным способом достижения этого?

Это не совсем разумно, как общий подход, поскольку вы удаляете эти элементы привязки из документа, поэтому любые подключенные прослушиватели событий, расширения и т. Д. Будут потеряны. Он может работать для вашей конкретной ситуации, но более здравый подход состоял бы в том, чтобы не использовать ссылки в первую очередь (см. Выше).


Если вы по-прежнему полон решимости сделать что-то вроде этого, по крайней мере не заменяют a элемент. Просто избавитесь от его атрибута href и настройте прослушиватель событий, как и в вашем примере. Теперь это уже не ссылка, поэтому она не будет отображаться в строке состояния (но это по-прежнему один и тот же элемент, по крайней мере).

+0

Ваше последнее предложение работает отлично. Не знал, что вы можете сделать это с пустыми элементами 'a'. – TjB

+0

Если у вас есть контроль над разметкой, я бы серьезно подумал о том, чтобы они не были ссылками в первую очередь. Например, действия, которые изменяют данные в вашем приложении, всегда должны выполняться POST, а не GET, даже в приложениях интрасети ... если это то, что они есть, они должны быть кнопками точно. Сама строка состояния сама по себе не представляет существенной проблемы, но может показаться плохим дизайном. –

+0

Спасибо за ваши предложения. Кнопки большей степени воспринимаются семантически в большинстве моих случаев использования. Я буду играть с этим. – TjB

1

Всплывающая подсказка служит для указания пользователю, где ссылка будет принимать их при нажатии. Это часть обычного пользовательского интерфейса браузера, и его ожидают пользователи вашего сайта. Изменение этого ожидания, потому что вы не думаете, что оно выглядит хорошо, вероятно, приведет к плохой работе с пользователями. Любое содержимое, отображаемое в этой области, будет видно, как только пользователь перестанет зависать над тегом ссылки.

Я знаю, что любая ссылка, которая не говорит мне, куда она идет, выглядит довольно подозрительной для меня.

+0

Спасибо за предоставленный ответ. Я понимаю, что это не очень хорошая идея в 99% случаев, однако в моем случае большинство этих ссылок - это действия, которые выглядят как кнопки и другие элементы интерфейса Windows. Мое приложение должно действовать как настольное приложение, но в браузере. Я думаю, что в этом случае можно отключить всплывающую подсказку только для этих элементов по эстетическим соображениям. Внешние ссылки и пользовательские протоколы остаются нетронутыми. – 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 щелчки как обычные клики и отключает щелчок правой кнопкой мыши. Я не знаю о средних кликах.

Вы также можете использовать «a» и просто заменить href на onclick, как в приведенном выше коде, но когда я попытался, мой стиль «a: hover» перестает работать. По-видимому, «a» без href считается неотразимым, по крайней мере, в Firefox. Поэтому я переключился на стиль «button» и «button: hover», и все было хорошо.

Я понимаю, что это решение будет считаться плохой практикой, но в некоторых ситуациях, например, сайт, который я делаю, состоящий в основном из полноэкранных фотографий, принципы козырей эстетики.

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

Нет, пример - обычный щелчок мыши. Измените click() на mousedown(), чтобы поймать все кнопки мыши, я думаю. Не проверено ... Это может помочь; http://stackoverflow.com/a/2725963/536590 – Daantje