2012-10-08 22 views
6

Tôi có ứng dụng tàu điện ngầm đang cố gắng thiết kế Màn hình đăng nhập cho ứng dụng của mình. Tôi muốn thiết kế màn hình đăng nhập của mình như màn hình đăng nhập Microsoft. Tôi đã tìm thấy kiểm soát Popup trong XAML nhưng không tìm thấy trong html 5 Có điều khiển đặc biệt nào tồn tại trong các ứng dụng tàu điện ngầm không. Tôi muốn thiết kế trang đăng nhập của mình như thế này.Kiểm soát cửa sổ bật lên trong windows8 Ứng dụng Metro?

enter image description here Cảm ơn bạn.

<body style="background-color:#1d3665;"> 
<div class="loginPage fragment"> 
    <header aria-label="Header content" role="banner"> 
     <button class="win-backbutton" aria-label="Back" disabled></button> 
     <h1 class="titlearea win-type-ellipsis"> 
      <span class="pagetitle">Welcome to loginPage</span> 
     </h1> 
    </header> 
    <section aria-label="Main content" role="main"> 
     <table style="position: absolute;background-color:skyblue;"> 
      <tr> 
       <td><input type="text"><br/></td> 
      </tr> 
      <tr> 
      <td> 
       <input type="password"/> 
       </td> 
      </tr> 
     </table> 
    </section> 
</div> 

Trả lời

1

Nếu bạn đang chứng thực chống lại Microsoft Account (cung cấp mặc định Microsoft Account Login Box), bạn có thể muốn thử SDK Live, mà sẽ đăng nhập vào Microsoft Account. Và nếu bạn muốn tạo cơ chế đăng nhập của riêng bạn với giao diện người dùng tìm kiếm một cách tương tự như Tài khoản Microsoft, bạn có thể thử Trình cắm thêm UI của JQuery và tùy chỉnh nó. Có sẵn điều khiển bật lên trong đó.

2

Ứng dụng cửa hàng Windows JavaScript không có quyền truy cập vào cửa sổ bật lên được tích hợp trông/hoạt động giống như hộp thoại đăng nhập Tài khoản Microsoft.

Có một nhắn hộp kinh nghiệm đơn giản trong Windows.UI.Popups.MessageBox, nhưng nó không có khả năng bổ sung thêm các điều khiển, vv

Đối với kinh nghiệm của mình, bạn đang tìm kiếm một phương thức UI - để xây dựng mà bạn có thể xây dựng nó tương đối đơn giản là chính mình (Chỉ cần thêm một phần tử position: absolute vào phần thân và làm cho nó lấp đầy màn hình - phần còn lại của phần tử/vị trí đó nằm trong toàn quyền kiểm soát của bạn). của nhiều thư viện trợ giúp ở ngoài kia.

+0

Dominic Hopton, Bạn đang thử với mã trên có thể giúp tôi. –

3

Sử dụng điều khiển WinJS.UI.Flyout. Nó có thể được sử dụng cho hộp thoại xác nhận, đăng nhập, quảng cáo và khác. Ngoài ra, bạn có thể đặt vị trí mà tại đó được hiển thị.

Bạn có thể đọc tài liệu here. Ở đây bạn có Guidelines and checklist. Và một example.