CMS simpleNotify V1.1 – Android Like Toast

In der JQuery UI API findet man Dialogboxen ( UI Dialog ), die abhängig vom UI Theme ein bestimmtes Aussehen haben.
Unter umständen braucht man aber nicht so eine riesige Box und ein Bestätigung Button.

Dafür gibt es im Android die “Toast” dies ist eine einfache kleine Information, die eingebetet werden und nach bestimmter Zeit wieder Verschwinden.
Dieses habe ich hier nun als JQuery Plug-in im Angebot.

Die Initialisierung ist recht einfach:

JQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Dann kommt das Plugin dazu:
<script type="text/javascript" src="JSPfad/jquery.ui.simpleNotify.js"></script>

Download

$('body').simpleNotify('Test Information',5000);

hierbei ist mit “$(‘body’)” der Html – Body angesprochen als Element in der es eingebettet werden soll (kann verändert werden). Als Nächstes kommt der Plug-in aufruf mit .simpleNotify( Text , dauer );

Das war dann schon alles, mehr ist nicht mehr nötig. Mit dem UI – Stylesheet werden für die Kanten dieser Infobox auch der UI -Style verwendet.
*************************************************************************************
Durch ein Problem mit der Positionierung wurde das Plugin noch einmal überarbeitet.
Die Handhabung bleibt gleich bis auf die Übergabe des ‘Body’, hier wird nun das Element angesprochen.

$('.toast').simpleNotify('Test Information',5000);

Hier nun ein Beispiel mit dem nötigen Quelltext.

jQuery(function() {
    jQuery(".toast").click(
      function(){
        jQuery(this).simpleNotify('dies ist ein Beispiel',5000);
      }
    );
});

Beispiel

Danke für Ihr Interesse.

 

Toast 

 

Dieser Beitrag wurde unter Projekte abgelegt und mit , , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>