Produire des messages « toast » comme StackOverflow

L'un des problèmes Je pense à chaque fois que je construis mon application Web est la façon dont les messages doivent apparaître aux utilisateurs finauxProduire des messages « toast » comme StackOverflow

J'essayées boîtes de message comme ceux dans les applications Windows, mais ils l'air si mauvais et faire des problèmes lorsqu'il est publié sur le serveur. J'ai essayé un panneau de mise à jour contenant une étiquette cool en haut de ma page, mais je sens que ce n'est pas assez bon du tout. Parfois, j'ai des problèmes dans des cas spécifiques lors de l'utilisation d'AJAX, et il ne semble toujours pas bon pour les utilisateurs ...

Je veux poser des questions sur les messages StackOverFlow qui apparaissent pendant un moment, puis disparaissent, par exemple le message qui apparaît en orange lors du vote d'un message vers le haut ou vers le bas.

Je souhaite créer des messages comme ceux-ci ou réutiliser une DLL pouvant les fournir. Est-ce faisable?

notes ::: les messages sont apparus pour l'utilisateur en fonction des conditions spécifiques du côté du serveur ..

Merci à l'avance.

Source

2010-11-21 Anyname Donotcare

Vous pouvez reformuler votre titre à tout le moins. Actuellement, il est ambigu et pourrait conduire à la question d'être migré (incorrectement) à [Meta] (http://meta.stackoverflow.com) – ChrisF

n'hésitez pas à modifier ma question, je ne suis pas si bon en anglais, je viens d'essayer de donner mon question idea..thanks –

En ce qui concerne l'avertissement jQuery, voir ici: http://stackoverflow.com/questions/2323366/jquery-1-4-2-vsdoc il est juste lié à intellisense dans l'IDE – curtisk

Eh bien, une méthode à utiliser jGrowl (pour développer la réponse de Shane) via .cs est illustré ci-dessous.

Cet exemple formulaire web ASP.NET

Créer une page simple ASPX avec 1 bouton et assurez-vous d'inclure le script jquery/jgrowl nécessaires et références css dans la tête de page, j'ai aussi un panneau ScriptManager et mise à jour sur la page aussi.

Dans le code derrière la page:

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);       
    } 
}

utiliser naturellement quel que soit le thème qui convient à votre application, bonne chance! En outre, cette approche charge uniquement le script de notification si nécessaire (dans ce cas, après avoir cliqué sur le bouton), mais vous pouvez lier la fonction "ShowStatus" à d'autres événements/tests dans le code derrière.

Source

2010-12-13 19:03:17 curtisk

s'il vous plaît pouvez-vous expliquer la méthode que vous écrivez :: en particulier les parties que vous utilisez script manger dans je veux savoir comment ça marche s'il vous plaît ..merci tellement –

http://msdn.microsoft.com/en-us/library/bb310408.aspx pour plus d'informations sur RegisterStartupScript, et http://msdn.microsoft.com/en-us/library/system .web.ui.scriptmanager.aspx pour ScriptManager lui-même, l'expliquer l'idée derrière comment et pourquoi ils fonctionnent. – curtisk

fonctionne uniquement avec IE pas avec firefox –

Pour créer des effets que vous pouvez utiliser ces outils

Jquery

jQuery bibliothèque d'interface utilisateur. Il fournit des interactions, des widgets, des effets et thématisation pour la création d'applications Internet riches

vous pouvez voir des effets Jquery here

MooTools

Une des applications web bibliothèque d'interface utilisateur construit sur le cadre Mootools JavaScript

Source

2010-11-21 11:46:37 Sudantha

Le SO typique answer: Utilisez Jquery! –

Quelle autre réponse attendez-vous de quelqu'un à fournir? N'hésitez pas à fournir une meilleure alternative. Jusque-là ... rochers jQuery! –

@MaximGershkovich Je voudrais (si j'étais la personne qui demande) comment utiliser JQuery pour y parvenir, c'est-à-dire s'il y a un plugin ou un exemple de ceci en action. Le simple fait de dire que vous pouvez utiliser JQuery est un peu comme si vous disiez que vous pouvez prendre un bus pour X, mais ne pas dire lequel ou comment l'obtenir. Cordialement – Jon

Plus précisément, le plugin jQuery jGrowl fait ce que vous demandez.

Incluez simplement les scripts jQuery et jGrowl dans votre fichier html, et commencez à générer des messages avec la fonction $ .jGrowl().

code Exemple:

<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>

Source

2010-12-12 07:00:22

merci beaucoup, mais comment les utiliser dans un fichier .cs ou. Aspx, pouvez-vous me donner un exemple simple. –

exemple fourni. Je n'ai pas travaillé avec .NET, mais d'après ce que j'ai lu en ligne, il est assez simple d'inclure quelque chose comme le dessus dans votre template .aspx. –

+1 Bon appel sur jGrowl, ça fonctionne bien, ajouté ma propre réponse avec .NET/.cs exemple – curtisk

Un autre plug-in une notification JavaScript est très agréable Pines Notify

Il dispose également d'un widget historique de notification.

Source

2010-12-16 02:29:58 Lorenzo

c'est excellent, mais comment utiliser avec le fichier .cs je veux montrer ce message lorsque l'utilisateur clique sur le bouton du serveur dans asp.net .. merci beaucoup ..je l'espère fonctionne avec IE et Firefox .. –

cela semble si gentil ,,, puis comment l'utiliser dans le fichier .cs ... je recherche sur ce site, et ne peut pas trouver comment les utiliser .. –

Notimoo plugin en utilisant mootools.
Utilisé hier, et a aimé les options de configuration.

http://code.google.com/p/notimoo/

Source

2010-12-16 09:35:10 Vishwanath

Produire des messages « toast » comme StackOverflow

Répondre

Questions connexes