2010-11-21 4 views
18

Một trong những vấn đề tôi nghĩ về mỗi khi tôi xây dựng ứng dụng web của mình là cách thông báo xuất hiện cho người dùng cuốiTạo thông báo "bánh mì nướng" như StackOverflow

Tôi đã thử các hộp thư như trong các ứng dụng windows, nhưng chúng trông rất tệ và gây ra sự cố khi được xuất bản trên máy chủ. Tôi đã thử một bảng cập nhật có chứa một nhãn mát ở phía trên cùng của trang của tôi .. nhưng tôi vẫn cảm thấy nó không đủ tốt ở tất cả. Đôi khi tôi gặp sự cố trong các trường hợp cụ thể khi sử dụng AJAX và nó vẫn không tốt cho người dùng ...

Tôi muốn hỏi về các thông điệp StackOverFlow xuất hiện trong một thời gian và sau đó biến mất, ví dụ như tin nhắn xuất hiện màu cam khi biểu quyết một tin nhắn lên hoặc xuống.

Tôi muốn tạo tin nhắn như thế này hoặc sử dụng lại một DLL có thể cung cấp các thông báo này. Điều này có khả thi không?

lưu ý ::: các thông điệp xuất hiện cho người dùng dựa trên điều kiện cụ thể ở phía máy chủ ..

Cảm ơn trước.

+3

Bạn có thể muốn tua lại tiêu đề của mình ít nhất. Hiện tại nó không rõ ràng và có thể dẫn đến câu hỏi được di chuyển (không chính xác) đến [Meta] (http://meta.stackoverflow.com) – ChrisF

+0

cảm thấy tự do để chỉnh sửa câu hỏi của tôi, iam không tốt bằng tiếng Anh, tôi chỉ cố gắng để cung cấp cho ý tưởng câu hỏi của tôi..thanks –

+1

Theo như cảnh báo jQuery, xem tại đây: http://stackoverflow.com/questions/2323366/jquery-1-4-2-vsdoc nó chỉ liên quan đến intellisense trong IDE – curtisk

Trả lời

9

Vâng, một phương pháp để sử dụng jGrowl (mở rộng về trả lời của Shane) thông qua cs được hiển thị bên dưới.

dụ trong biểu mẫu web này ASP.NET

Tạo một trang aspx đơn giản với 1 nút và chắc chắn rằng bạn bao gồm các tài liệu tham khảo jquery/jgrowl kịch bản và css cần thiết vào đầu trang, tôi cũng có một bảng điều khiển ScriptManager và cập nhật trên trang là tốt.

Trong đoạn code sau cho trang:

protected void Button1_Click(object sender, EventArgs e) 
{ 
    this.ShowStatus("This is your message!<br />Some HTML formatting works!<br />"); 
} 

protected void ShowStatus(string message) 
{ 
    ScriptManager sm = ScriptManager.GetCurrent(Page); 

    if (sm.IsInAsyncPostBack) 
    { 
     string script = @" 
      $(document).ready(function() { 
      $.jGrowl.defaults.theme = 'iphone'; 
      $.jGrowl('" + message + "', {theme: 'iphone',header: 'Notification',life: 8000});});"; 

     ScriptManager.RegisterStartupScript(Page,this.GetType(), "notification", script,true);       
    } 
} 

Đương nhiên sử dụng bất cứ chủ đề phù hợp với ứng dụng của bạn, chúc may mắn! Ngoài ra, phương pháp này chỉ tải kịch bản thông báo khi cần (trong trường hợp này sau khi bạn nhấp vào nút) nhưng bạn có thể kết hợp hàm "ShowStatus" với các sự kiện/kiểm tra khác trong mã phía sau.

+0

xin vui lòng u có thể giải thích phương pháp u viết :: đặc biệt là các bộ phận u sử dụng script manger trong tôi muốn biết làm thế nào nó hoạt động xin vui lòng ..thank u rất nhiều –

+1

http://msdn.microsoft.com/en-us/library/bb310408.aspx để biết thêm thông tin về RegisterStartupScript và http://msdn.microsoft.com/en-us/library/system .web.ui.scriptmanager.aspx cho chính ScriptManager, giải thích ý tưởng đằng sau cách thức và lý do chúng hoạt động. – curtisk

+0

chỉ hoạt động với IE không có firefox –

12

Để tạo hiệu ứng mà bạn có thể sử dụng những công cụ này

Jquery

jQuery thư viện giao diện người dùng. Nó cung cấp sự tương tác, widget, hiệu ứng, và theming để tạo Rich Internet Applications

bạn có thể xem một số tác dụng Jquery here

MooTools

Một ứng dụng web thư viện giao diện người dùng được xây dựng trên khuôn khổ Mootools Javascript

+3

SO điển hình trả lời: Sử dụng Jquery! –

+2

Câu trả lời nào khác mà bạn mong đợi ai đó cung cấp? Vui lòng cung cấp giải pháp thay thế tốt hơn. Cho đến lúc đó ... jQuery đá! –

+1

@MaximGershkovich Tôi sẽ (nếu tôi là người hỏi) làm thế nào để sử dụng JQuery để đạt được điều này, tức là có một plugin hoặc ví dụ về điều này trong hành động. Chỉ cần nói bạn có thể sử dụng JQuery là một chút giống như nói rằng bạn có thể nhận được một xe buýt để X nhưng không nói mà một hoặc nơi để có được nó từ. Kính trọng – Jon

17

Cụ thể, plugin jQuery jGrowl thực hiện những gì bạn đang yêu cầu.

Chỉ cần bao gồm các tập lệnh jQuery và jGrowl trong html của bạn và bắt đầu tạo thông báo bằng hàm $ .jGrowl().

Ví dụ mã:

<html> 
<head> 
<script src="path/to/jquery.js"></script> 
<script src="path/to/jgrowl.js"></script> 
<script> 
$(function() { 
    $.jGrowl("My sticky message, loaded after the rest of the page", {sticky: true}); 
    $("#mybutton").live("click", function(_) { 
    $.jGrowl("you clicked the button!");}); 
}); 
</script> 
</head> 
<body> 
<button id="mybutton">click me</button> 
</body> 
</html> 
+0

cảm ơn rất nhiều, nhưng làm thế nào để sử dụng chúng trong tập tin .cs hoặc .aspx, u có thể cho tôi ví dụ đơn giản. –

+0

ví dụ được cung cấp. Tôi đã không làm việc với NET, nhưng từ những gì tôi đọc trực tuyến nó khá đơn giản để bao gồm một cái gì đó như ở trên trong mẫu .aspx của bạn. –

+1

+1 Cuộc gọi tốt trên jGrowl, nó hoạt động độc đáo, thêm câu trả lời của riêng tôi với .NET/.cs ví dụ – curtisk

2

Một rất đẹp thông báo Plugin JavaScript là Pines Notify

Nó cũng có tính năng một widget lịch sử thông báo.

+0

đây là một trong những tuyệt vời, nhưng làm thế nào để sử dụng với .cs tập tin tôi muốn hiển thị thông báo này khi người dùng nhấp vào nút máy chủ trong asp.net .. cảm ơn rất nhiều .. tôi hy vọng nó làm việc với IE và firefox .. –

+0

điều này trông rất đẹp ,,, sau đó làm thế nào để sử dụng nó trong tập tin .cs ... tôi tìm kiếm trên trang web này, và không thể tìm thấy cách sử dụng chúng .. –