rpMessagePanel is a generic message panel that shows at the top of a Web page. Use the demo link below to take a look at the panel and its options.
Demo Code on Github Download zip
The rpMessagePanel is displayed with its display([options]) method. This method takes one argument; a JavaScript object with any or all of the following values.The default values are shown in bold text.
| Option |
Values |
Description |
| panelMode |
modal |
Display the message panel modally over a gray-out parent page. All input on the parent page is inhibited while the message panel is displayed modally. |
|
nonmodal |
Display the message panel nonmodally over its parent page. The parent page still accepts input while the message panel is displayed nonmodally.. |
| panelType |
error |
Display a red message panel with an “X” icon. |
|
info |
Display a yellow message panel with a “!” icon. |
| displayMode |
overlap |
Display the the message panel overlapping its parent page. |
|
pushdown |
Display the message panel while pushing down the content on the parent page. |
| slideDuration |
“fast” or “slow” or an integer value |
Set the speed at which the message panel is displayed. This is a millisecond duration for jQuery’s slideDown() method. This value is passed on to jQuery’s slideDown() method.The special values “fast” and “slow” can also be used. |
For example, to display the rpMessagePanel as a nonmodal info pushdown panel panel slowly, call display() like this:
001rp.messagePanel.display( { "panelMode" : "nonmodal",
002 "panelType" : "info",
003 "slideDuration" : "slow",
004 "displayMode" : "pushdown" } )
The rpMessagePanel provides two other public methods, create([panelTitle]) and addMessage([messageTitle], [messageText]). You must call create() once before displaying the panel; you can call addMessage() as many times as necessary to show as many message lines as you need. addMessage()’s messageText argument isn’t encoded so it can include HTML. To omit the first argument to addMessage(), use null as its value. For example, the code below:
001rp.messagePanel.create( "This is an example error message." );
002rp.messagePanel.addMessage( "Error message", "Something really bad happened." );
003rp.messagePanel.addMessage( "Error level" , "1" );
004rp.messagePanel.addMessage( "Instructions" , "Call your manager!" );
005rp.messagePanel.addMessage( null, </span>
006 <a target='_blank' href='yourUrl'>Comment on this error</a>" );
007
008rp.messagePanel.display();
displays a message panel like this:
In the example above, the options object wasn’t passed to the display() method, so the message panel is displayed using the default values.
rpMessagePanel uses the jQuery tmpl plugin to build the HTML for the message panel.There isn’t a need to add any templating code to your Web page, rpMessagePanel uses its private injectTemplateIntoPage() method to push the required HTML into your page for you.You do need to include the jQuery tmpl JavaScript into your page.
Source listing
Figure 1a. rpMessagePanel.js sourceCopy
001var rp = rp || {};
002
003rp.messagePanel = function() {
004 var panelDefinition;
005 var $messagePanel;
006
007 var template = [];
008 template.push( '<script id="messagePanelTemplate" type="text/x-jQuery-tmpl">' );
009 template.push( '<div id="messagePanel" class="error" style="display:none">' );
010 template.push( '<div id="messagePanelIcon" title="Close this panel."></div>' );
011 template.push( '<div id="headingText"><span class="heading">${error}</span></div>' );
012 template.push( '<div id="messageDetails">' );
013 template.push( '<div id="innerDetails">' );
014 template.push( '{{each errors}}' );
015 template.push( '{{if title}}' );
016 template.push( '<div>${title}: <strong>{{html message}}</strong></div>' );
017 template.push( '{{else}}' );
018 template.push( '<div><strong>{{html message}}</strong></div>' );
019 template.push( '{{/if}}' );
020 template.push( '{{/each}}' );
021 template.push( '</div>' );
022 template.push( '</div>' );
023 template.push( '<div title="Close this panel." class="closeBox" id="closeBox" >x</div>' );
024 template.push( '</div>' );
025 template.push( '</script>' );
026
027 function create( topLevelMessage ) {
028 panelDefinition = { "error" : topLevelMessage, "errors" : [] };
029 }
030
031 function addMessage( title, message ) {
032 panelDefinition.errors.push( { "title" : title, "message" : message } );
033 }
034
035 function removePanel() {
036 // If displayed nonmodally, the cached value
037 // $messagePanel may not yet be available.
038 $( "#messagePanel" ).remove();
039 }
040
041 function hidePanel( options ) {
042 $("#shadow").hide();
043 if ( $messagePanel.is( ":visible" ) ) {
044 $messagePanel.slideUp( options.slideTime );
045 }
046 removePanel();
047 }
048
049 function injectTemplateIntoPage() {
050 if ( $( "#messagePanelTemplate" ).length === 0 ) {
051 $( "body" ).append( template.join( "" ) );
052 }
053 }
054
055 function expandTemplate() {
056 var templateId = $( "#messagePanelTemplate" );
057 templateId.tmpl( panelDefinition ).prependTo( "body" );
058 $messagePanel = $( "#messagePanel" );
059 }
060
061 function prepareModalShadow() {
062 if ( $( "#shadow" ).length === 0 ) {
063 $( "body" ).append( "<div id='shadow'></div>" );
064 }
065 $("#shadow").css( "height", $( document ).height() ).hide();
066 }
067
068 function preparePanel( options ) {
069 removePanel();
070 injectTemplateIntoPage();
071 expandTemplate();
072
073 var modal = options.panelMode === "modal";
074 if ( modal ) {
075 prepareModalShadow();
076 }
077
078 if ( options.slideDuration !== "fast" && options.slideDuration !== "slow" ) {
079 options.slideDuration = options.slideDuration.toInt();
080 }
081
082 if ( options.panelType === "error" ) {
083 $messagePanel.removeClass( "warning" ).addClass( "error" );
084 }
085 else {
086 $messagePanel.removeClass( "error" ).addClass( "warning" );
087 }
088
089 if ( options.displayMode === "overlap" ) {
090 $messagePanel.css( "position", "absolute" );
091 }
092
093 if ( modal ) {
094 $("#shadow").show();
095 }
096
097 $( ".closeBox, #messagePanelIcon", $messagePanel ).click( function() {
098 hidePanel( options );
099 });
100 }
101
102 function display( runtimeOptions ) {
103 runtimeOptions = runtimeOptions || {};
104 var defaultOptions = { "panelMode" : "modal",
105 "panelType" : "error",
106 "slideDuration" : 500,
107 "displayMode" : "overlap" }
108
109 var options = $.extend( {}, defaultOptions, runtimeOptions );
110
111 preparePanel( options );
112
113 //alert( options.slideDuration );
114
115 $messagePanel.slideDown( options.slideDuration );
116 }
117
118 return {
119 create : create,
120 addMessage : addMessage,
121 display : display
122 };
123}();
124
125Function.prototype.method = function ( name, func ) {
126 this.prototype[ name ] = func;
127 return this;
128};
129
130Number.method( "toInt", function () {
131 return Math[this < 0 ? 'ceil' : 'floor'](this);
132});
133
134String.method( "toInt", function() {
135 return parseInt( this, 10 );
136});
Figure 1b. rpMessagePanel.css sourceCopy
001#shadow {
002 background-color: gray;
003 position:absolute;
004 left:0;
005 top:0;
006 width:100%;
007 z-index:100;
008 filter:alpha(opacity=65);
009 -moz-opacity:0.65;
010 -khtml-opacity: 0.65;
011 opacity: 0.65;
012 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65, FinishOpacity=65, Style=2)";
013}
014
015#messagePanel span.heading
016{
017 font-size: 1.2em;
018}
019
020#messagePanel #innerDetails {
021 font-size: 1em;
022}
023
024#messagePanel #headingText {
025 float: left;
026 display: block;
027 height: 35px;
028 padding-top: 8px;
029}
030
031#messagePanel #icon {
032 float: left;
033 cursor: pointer;
034}
035
036#messagePanel #messageDetails {
037 clear: both;
038 padding-right: 6px;
039 padding-left: 6px;
040 padding-bottom: 6px;
041}
042
043#messagePanel #innerDetails {
044 padding: 6px;
045 border: 2px silver dotted;
046 background: whitesmoke;
047 -webkit-border-radius: 6px;
048 -moz-border-radius: 6px;
049 border-radius: 6px;
050}
051
052#messagePanel #innerDetails div
053{
054 margin-top: 5px;
055}
056
057#messagePanel {
058 z-index: 5000;
059 color: #333333;
060 position: relative;
061 top: 0;
062 font-family: Arial, Helvetica, sans-serif;
063 padding-top: 4px;
064 background-position: 6px 6px;
065 background-repeat: no-repeat;
066 left: 0;
067 width: 100%;
068}
069
070#messagePanel.error {
071 background-color: #FFCCCC;
072 border-color: #FF99CC;
073 background-image: url( "../Images/error.png" );
074}
075
076#messagePanel.warning {
077 background-color: #ffc;
078 border-color: #ffcc00;
079 background-image: url( "../Images/warning.png" );
080}
081
082#messagePanel #messagePanelIcon {
083 width: 37px;
084 height: 37px;
085 float: left;
086 cursor: pointer;
087}
088
089#messagePanel span.heading
090{
091 margin-left: 10px;
092}
093
094#messagePanel span
095{
096 margin-left: 8px;
097}
098
099#messagePanel #closeBox
100{
101 position: absolute;
102 top: 0;
103 right: 0;
104 border: 2px solid #FF99CC;
105 font-family: Consolas;
106 font-size: 1.2em;
107 font-weight: 800;
108 padding: 0 8px 4px 8px;
109 background-color: red;
110 color: white;
111 cursor: pointer;
112 margin-top: 3px;
113 margin-right: 3px;
114}
