styles.css

.up .notification-loading {
  padding: 40px;
  margin: 40px 0;
  background: url("../images/loading.gif") no-repeat 50% 50%;
}
.up .notification-portlet-wrapper {
  overflow: auto;
}
.up .notification-portlet-wrapper .notification-options {
  overflow: auto;
}
.up .notification-portlet-wrapper .notification-options .notification-date-filter {
  float: left;
}
.up .notification-portlet-wrapper .notification-options .notification-refresh {
  float: right;
}
.up .notification-portlet-wrapper .notification-container .notification-trigger {
  margin-bottom: 10px;
  cursor: pointer;
}
.up .notification-portlet-wrapper .notification-container .notification-trigger h3 {
  padding-top: 0;
}
.up .notification-portlet-wrapper .notification-container .notification-content {
  padding-bottom: 10px;
}
.up .notification-portlet-wrapper .notification-container .notification-content ul {
  margin: 0;
}
.up .notification-portlet-wrapper .notification-detail-wrapper {
  padding: 20px 20px;
}
.up .notification-portlet-wrapper .notification-detail-wrapper .notification-back-button {
  overflow: auto;
}
.up .notification-portlet-wrapper .notification-detail-wrapper .notification-back-button a {
  display: block;
  float: left;
}
.up .notification-portlet-wrapper .portlet-msg-error {
  margin-top: 10px;
}

.up .notification-portlet-wrapper p {
  font-size: 11px;
  line-height: 18px;
}
.up .notification-portlet-wrapper .notification-trigger.hover h3, .up .notification-portlet-wrapper .notification-trigger.active h3 {
  color: #000 !important;
}
.up .notification-portlet-wrapper .notification-trigger h3 {
  color: #444 !important;
  font-weight: normal !important;
  border: none;
}
.up .notification-portlet-wrapper .notification-content li {
  list-style: none !important;
  line-height: 18px;
  font-size: 11px;
}
.up .notification-portlet-wrapper .notification-detail-wrapper .notification-back-button a:link, .up .notification-portlet-wrapper .notification-detail-wrapper .notification-back-button a:visited {
  font-weight: normal !important;
  color: #444 !important;
}
.up .notification-portlet-wrapper .notification-detail-wrapper .notification-back-button a:hover {
  color: #000 !important;
}
.up .notification-portlet-wrapper .notification-detail-wrapper .notification-source {
  font-family: georgia, serif;
  font-size: 10px;
  color: #888;
  font-style: italic;
  margin-top: -11px;
}
.up .notification-portlet-wrapper .notification-detail-wrapper .notification-source a {
  color: #888 !important;
  text-decoration: none !important;
}
.up .notification-portlet-wrapper .notification-detail-wrapper .notification-source a:hover {
  color: #888 !important;
  text-decoration: underline !important;
}
.up .notification-portlet-wrapper .notification-detail-wrapper h3 {
  margin-bottom: 3px;
}

.up .notification-portlet-wrapper {
  overflow: auto;
}
.up .notification-portlet-wrapper .notification-container .notification-trigger {
  padding: 10px;
  border: 1px solid #ccc;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  -khtml-border-radius: 6px;
  border-radius: 6px;
}
.up .notification-portlet-wrapper .notification-container .notification-trigger.active, .up .notification-portlet-wrapper .notification-container .notification-trigger.hover {
  border-color: #000 !important;
}
.up .notification-portlet-wrapper .notification-container .notification-trigger.active h3 {
  background-image: url("../images/bullet-down.png");
}
.up .notification-portlet-wrapper .notification-container .notification-trigger h3 {
  padding-left: 15px;
  background: url("../images/bullet-right.png") no-repeat left 50%;
}
.up .notification-portlet-wrapper .notification-container .notification-content ul {
  margin: 0;
  padding-left: 11px;
}
.up .notification-portlet-wrapper .notification-detail-wrapper {
  padding: 20px 20px;
}
.up .notification-portlet-wrapper .notification-detail-wrapper .notification-back-button {
  overflow: auto;
}
.up .notification-portlet-wrapper .notification-detail-wrapper .notification-back-button a {
  padding: 10px;
  padding-left: 25px;
  border: 1px solid #ccc;
  color: #111 !important;
  text-decoration: none;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  -khtml-border-radius: 6px;
  border-radius: 6px;
  background: url("../images/bullet-left.png") no-repeat 10px 50%;
}
.up .notification-portlet-wrapper .notification-detail-wrapper .notification-back-button a:hover {
  border-color: #000 !important;
  text-decoration: none !important;
}

test.jsp

<%@ page contentType="text/html" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="portlet" uri="http://java.sun.com/portlet" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="rs" uri="http://www.jasig.org/resource-server" %>
<portlet:defineObjects/>

<link rel="stylesheet" href="<c:url value="/styles/styles.css"/>" type="text/css" media="screen" />

<div id="${n}container" class="notification-portlet">

  <!-- loading -->
  <div class="notification-loading"></div>

  <div class="notification-portlet-wrapper" style="display: none;">
  
    <!-- options menu -->
    <div class="notification-options">
      <p class="notification-date-filter">View: <a href="#">All</a> | <a href="#">Today</a></p>
      <p class="notification-refresh"><a href="#">Refresh</a></p>
    </div>
  
    <!-- notifications -->
	  <div class="notification-container"></div>

    <!-- detail view -->
    <div class="notification-detail-wrapper" style="display: none;">
      <div class="notification-back-button">
        <a href="#">Back</a>
      </div>
      <div class="notification-detail-container"></div>
    </div>

    <!-- errors -->
		<div class="portlet-msg-error" style="display: none;"></div>  

	</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"/>" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"/>" type="text/javascript"></script>
<script src="<c:url value="/scripts/underscore.min.js"/>" type="text/javascript"></script>
<script src="<c:url value="/scripts/jquery.accordion.js"/>" type="text/javascript"></script>
<script src="<c:url value="/scripts/jquery.notifications.js"/>" type="text/javascript"></script>

<!-- call ajax on dynamic portlet id -->
<script type="text/javascript">
  var ${n} = ${n} || {};
  ${n}.jQuery = jQuery.noConflict(true);

  ${n}.jQuery("#${n}container").notifications({ 
    url: '/data/dummy.json'
  });
</script>