APEX: Notifications mit jquery-bounce-Effekt hervorheben

Es gib verschiedene Arten, auf Messages hinzuweisen. Damit sind die kleinen Textboxen gemeint, die z.B. nach einem Page-Process angezeigt werden.

Ein sehr einfacher Weg ist die Verwendung eines Effekts aus dem jquery-UI. Ich habe mich für den „Bounce“-Effekt entschieden. Dieser bewirkt, dass die Textbox z.B. von oben herab an ihre gewohnte Position „fällt“. Um die Meldung nicht dauerhaft anzuzeigen, wird sie mit dem „Fadeout“-Effekt nach wenigen Augenblicken ausgeblendet.

Wie jquery in APEX eingebunden wird, habe ich schon in vergangenen Beiträgen gezeigt. Um den „Bounce“-Effekt in der gesamten Anwendung darzustellen, verändert man am besten das Pagetemplate, von dem die Anwendung gebrauch macht. Bei meinem Theme 13 und dem „Two Level Tabs“-Pagetemplate sieht der Header-Code anschließend so aus:

<html lang="&BROWSER_LANGUAGE." xmlns="http://www.w3.org/1999/xhtml" xmlns:htmldb="http://htmldb.oracle.com">
<head>
<link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_13/theme_3_1.css" type="text/css" />
<link rel="stylesheet" href="#WORKSPACE_IMAGES#jquery-ui-1.8.custom.css" type="text/css" />
<script type="text/javascript" src="#WORKSPACE_IMAGES#jquery-1.4.min.js"></script>
<script type="text/javascript" src="#WORKSPACE_IMAGES#jquery-ui-1.8.custom.min.js"></script>
#HEAD#
<title>#TITLE#</title>
</head>
<body onload="#ONLOAD#"><noscript>&MSG_JSCRIPT.</noscript>#FORM_OPEN#<a name="PAGETOP"></a>
<script type="text/javascript">
$().ready(function()
{
   $("#t13MessageHolder").effect("bounce", { times:3 }, 500);
   $("#t13MessageHolder").fadeOut('slow');
});
</script>

Zu erkennen ist, dass ich zuerst die CSS und JS-Dateien von jquery und der UI Datei eingebunden habe, um dann bei jedem Seitenaufruf für den DIV-Container „t13Messageholder“ den „Bounce“-Effekt und das Fadeout aufzurufen. Wer ein anderes Theme als Nr. 13 verwendet, muss die Bezeichnung für den DIV-Container entsprechend anpassen.

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

2 Antworten zu APEX: Notifications mit jquery-bounce-Effekt hervorheben

  1. peter sagt:

    servus, hast du dazu ein funktionierendes beispiel online?
    gruß

  2. cc13 sagt:

    Geh mal auf meinen Test-Workspace: http://apex.oracle.com/pls/apex/f?p=53258:1

    Wenn du dort keinen Raum auswählst, aber den Button „Buchung eintragen“ klickst, erscheint die Messagebox mit Bounce-Effekt.

Schreibe einen Kommentar

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