openplanning

Hướng dẫn và ví dụ Javascript Menubar

Xem thêm các chuyên mục:

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook

1- window.menubar

Thuộc tính (property) window.menubar trả về một đối tượng Menubar đại diện cho thanh menu (menu bar) trên trình duyệt. Tuy nhiên hầu như bạn không thể tương tác với Menubar thông qua Javascript vì nó có rất ít API cho bạn.

window.menubar

// Or simple:

menubar
Xu thế của các trình duyệt hiện đại là làm cho cửa sổ Viewport càng rộng càng tốt, vì vậy chúng bỏ đi các thành phần khác như Statusbar, hoặc làm nhỏ Menubar.
Hình minh họa thanh menu của trình duyệt Firefox 1.0.
Thanh menu đã bị thu nhỏ trên phiên bản Firefox hiện đại

menubar.visible

Thuộc tính (property) menubar.visible trả về true nếu thanh menu đang hiển thị trên trình duyệt, ngược lại trả về false.
Chú ý, với các trình duyệt hiện đại, bạn không thể sét đặt giá trị mới cho menubar.visible, nếu bạn cố tình làm điều đó nó cũng không có tác dụng.
menubar-example.html

<!DOCTYPE html>
<html>
<head>
    <title>Menubar</title>
    <meta charset="UTF-8">
</head>
<body>
    <h3>menubar.visible</h3>

    <br/><br/>
    <button onclick="alert(menubar.visible)">
        alert(menubar.visible)
    </button>

</body>
</html>
Ví dụ, sử dụng window.open(..) để mở một cửa sổ mới không có thanh menu.
open-new-window-example.html

<!DOCTYPE html>
<html>
<head>
    <title>Menubar</title>
    <meta charset="UTF-8">
    <script>

        function openNewWindow()  {
           var winFeature = 'menubar=no,resizable=yes';

           // Open a New Windows.
           window.open('some-page.html','MyWinName',winFeature);
        }
    </script>
</head>
<body>
    <h3>Menubar</h3>

    <button onclick="openNewWindow()">
      Open a New Window without menubar
    </button>

</body>
</html>
some-page.html

<!DOCTYPE html>
<html>
<head>
    <title>Some Page</title>
    <meta charset="UTF-8">
</head>
<body onload="alert('menubar.visible? ' + menubar.visible)">
    <h3>Some Page</h3>

    <p>1</p>
    <p>1 2</p>
    <p>1 2 3</p>
</body>
</html>

 

Xem thêm các chuyên mục:

Có thể bạn quan tâm

Đây là các khóa học trực tuyến bên ngoài website o7planning mà chúng tôi giới thiệu, nó có thể bao gồm các khóa học miễn phí hoặc giảm giá.