2012-05-06 44 views
13

nền

Trình duyệt hiện tại bỏ các thanh trạng thái cổ điển và thay vào đó vẽ một tooltip nhỏ ở dưới cùng của cửa sổ của họ hiển thị các mục tiêu liên kết trên di chuột/tập trung.Vô hiệu hóa thanh trạng thái trình duyệt văn bản

Một ví dụ của việc này hành vi (trong trường hợp của tôi không mong muốn) được minh họa trong hình bên dưới:

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


Câu hỏi

  1. Có cách nào di động để vô hiệu hóa các chú giải công cụ?
  2. Tôi có thiếu bất kỳ hạn chế rõ ràng nào để thực hiện việc này trong trường hợp cụ thể của mình không?
  3. Là nỗ lực của tôi (xem bên dưới) một cách hợp lý để hoàn thành điều này?

tôi đang làm việc trên một ứng dụng web mạng nội bộ và muốn vô hiệu hóa hành vi này đối với một số hành động ứng dụng cụ thể vì khá thẳng thắn, https://server/# ở khắp mọi nơi trông giống như một mắt đau và gây khó chịu vì trong một số trường hợp, ứng dụng của tôi vẽ thanh trạng thái của chính nó ở vị trí đó.


Nỗ lực của tôi

Tôi không phải là một nhà phát triển web bởi thương mại, vì vậy kiến ​​thức của tôi vẫn còn khá hạn chế trong lĩnh vực này.

Dù sao, đây là nỗ lực của tôi với 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() thay thế tất cả các liên kết có chứa # (ví dụ, các hành động ứng dụng cụ thể trong trường hợp của tôi) với một yếu tố span, làm cho tất cả các liên kết "bên ngoài" mở một tab/cửa sổ mới và dường như không phá vỡ xử lý giao thức tùy chỉnh.

+0

Chào mừng bạn đến Stack Overflow! –

+0

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

Trả lời

4

Có cách nào để vô hiệu hóa các chú giải công cụ này không?

Không, khác với cách giải quyết như ví dụ của bạn ở trên.

Tôi có thiếu bất kỳ hạn chế rõ ràng nào để thực hiện việc này trong trường hợp cụ thể của mình không?

Bạn dường như thiếu thực tế là toàn bộ tình huống là khó xử. Tại sao có liên kết ở tất cả nếu bạn sẽ làm cho họ trông giống như nút? Chỉ cần sử dụng các nút. Cho rằng vấn đề, tại sao bận tâm với các liên kết nếu bạn kết thúc chuyển đổi chúng ra với kéo dài anyway? Chỉ cần sử dụng nhịp.

Là nỗ lực của tôi (xem bên dưới) một cách hợp lý để hoàn thành điều này?

Nó không thực sự hợp lý như một cách tiếp cận chung, bởi vì bạn đang loại bỏ các phần tử neo khỏi tài liệu, vì vậy bất kỳ trình lắng nghe sự kiện đính kèm, expandos, vv sẽ bị mất. Nó có thể làm việc cho tình huống cụ thể của bạn, nhưng một cách tiếp cận lành mạnh hơn sẽ không sử dụng các liên kết ở nơi đầu tiên (xem ở trên).


Nếu bạn vẫn quyết tâm làm điều gì đó như thế này, ít nhất không thay thế thành phần a. Chỉ cần loại bỏ thuộc tính href và thiết lập trình xử lý sự kiện như bạn đã làm trong ví dụ của mình. Bây giờ nó không còn là một liên kết, vì vậy nó sẽ không hiển thị trong thanh trạng thái (nhưng nó vẫn là yếu tố tương tự, ít nhất).

+0

Đề xuất cuối cùng của bạn hoạt động hoàn hảo. Không biết bạn có thể làm điều đó với các phần tử 'a' trống rỗng. – TjB

+0

Nếu bạn có quyền kiểm soát đánh dấu, tôi nghiêm túc xem xét việc đặt chúng không phải là liên kết ngay từ đầu. Ví dụ các hành động thay đổi dữ liệu trong ứng dụng của bạn phải luôn luôn xảy ra bởi POST thay vì GET, ngay cả trong các ứng dụng mạng nội bộ ... nếu đó là những điều này, chúng phải là các nút chắc chắn. Điều thanh trạng thái chính nó thực sự không phải là một vấn đề quan trọng, nhưng nó có thể là một dấu hiệu của thiết kế kém. –

+0

Cảm ơn các đề xuất của bạn. Các nút có ý nghĩa ngữ nghĩa hơn trong hầu hết các trường hợp sử dụng của tôi. Tôi sẽ chơi đùa với điều này. – TjB

1

Chú giải công cụ cung cấp chỉ báo cho người dùng nơi liên kết sẽ đưa họ đến nếu được nhấp. Đó là một phần của trải nghiệm người dùng trình duyệt chuẩn và sẽ được người dùng của trang web của bạn mong đợi. Thay đổi kỳ vọng này bởi vì bạn không nghĩ rằng nó có vẻ tốt đẹp có thể dẫn đến trải nghiệm người dùng kém. Bất kỳ nội dung nào được hiển thị trong khu vực đó sẽ hiển thị ngay khi người dùng ngừng di chuột qua thẻ liên kết.

Tôi biết rằng bất kỳ liên kết nào không cho tôi biết nó sẽ trông khá đáng ngờ đối với tôi.

+0

Cảm ơn bạn đã cung cấp câu trả lời. Tôi nhận ra rằng đây không phải là một ý tưởng tốt 99% thời gian, tuy nhiên, trong trường hợp của tôi, hầu hết các liên kết này là các hành động giống như các nút và các phần tử giao diện người dùng cửa sổ khác. Ứng dụng của tôi được cho là hoạt động giống như ứng dụng dành cho máy tính để bàn, nhưng trong trình duyệt. Tôi nghĩ trong trường hợp này, có thể vô hiệu hóa chú giải công cụ chỉ cho những yếu tố đó vì lý do thẩm mỹ. Các liên kết bên ngoài và các giao thức tùy chỉnh không bị ảnh hưởng. – TjB

+0

Nó thực sự không phải là một ý tưởng tốt 100% thời gian, đó là lý do tại sao các trình duyệt đã ngừng cho phép mọi người muck với nội dung thanh trạng thái đó. Tại sao bạn không để nó lại và xem có ai phàn nàn không? – Bill

+0

Nó không chỉ là một vấn đề thẩm mỹ, mặc dù. Hãy xem ảnh chụp màn hình này từ liên kết được cung cấp bởi j08691 ở trên: http://i.imgur.com/mlnYN.png Chú giải công cụ đang chặn nội dung trang web. Trong trường hợp của một ứng dụng web thực hiện một thanh trạng thái của riêng nó, đó là một lý do hợp pháp để vô hiệu hóa nó cho các hành động ứng dụng cụ thể. Một lần nữa, các liên kết bên ngoài bị ảnh hưởng. – TjB

1

thử này

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

Lưu ý rằng điều này đối xử với Ctrl-nhấp chuột như nhấp chuột bình thường và vô hiệu hóa cách kích chuột phải. Tôi không biết về nhấp chuột giữa.

Bạn cũng có thể sử dụng "a" và chỉ thay thế href bằng onclick như trong mã ở trên, nhưng khi tôi thử kiểu dáng "a: hover" của tôi ngừng hoạt động. Rõ ràng một "a" không có một href được coi là không thể phục hồi, ít nhất là trong Firefox. Vì vậy, tôi chuyển sang "nút" và "nút: di chuột" phong cách và tất cả đều tốt.

Tôi hiểu giải pháp này sẽ được coi là thực hành không tốt, nhưng trong một số trường hợp, ví dụ trang web tôi tạo ra chủ yếu là ảnh toàn màn hình, tính thẩm mỹ vượt trội hơn các nguyên tắc.

1

Đây là những gì tôi làm với 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

Công cụ này có hoạt động ở giữa/phải không? – Timmmm

+0

Không, ví dụ chỉ là nhấp chuột bình thường. Thay đổi click() thành mousedown() để bắt tất cả các nút chuột mà tôi nghĩ. Không được thử nghiệm ... Điều này có thể giúp; http://stackoverflow.com/a/2725963/536590 – Daantje

Các vấn đề liên quan