Sziyu@Pixnet

DOJO網頁位置：http://dojotoolkit.org/

使用JavaScript中的Alert功能時，是否會覺得預設之Alert訊息盒樣式不好看，或是跟網頁整體設計不搭配。 

之前曾經使用過div標籤來做自己的Alert訊息欄，但此方式的缺點為此訊息盒不可以自由移動，只可顯示在網頁的固定位置。 

於是後來使用了DOJO的FloatingPane功能，來實作自訂的Alert訊息盒。

載入DOJO：

<script type="text/javascript">
 var djConfig = {isDebug: true};
</script>
<script type="text/javascript" src="js/dojo.js"></script>
<script language="JavaScript" type="text/javascript">
 dojo.require("dojo.widget.*");
 dojo.require("dojo.widget.TaskBar");
 dojo.require("dojo.widget.LayoutContainer");
 dojo.require("dojo.widget.FloatingPane");
 dojo.require("dojo.widget.ResizeHandle");
</script>

在JSP中，建立DOJO Div：

<div dojoType = "FloatingPane";
   id = "dojoMsg";
   title = "Test Title";
   constrainToContainer = "false";
   hasShadow = "false";
   resizable = "false";  
   windowState = "normal";
   displayCloseAction = "false";
   displayMinimizeAction = "false";
   displayMaximizeAction = "false";
   toggle = "explode";
   toggleDuration = "300";
   style = "background:#99CCFF; display: true;"
>

</div>

在DOJO Div中加入自訂的Alert訊息盒Content，這邊可以看到一些屬性設定，
hasShadow(是否有陰影)，resizable(是否可調整Size)，displayCloseAction(是否在標題列顯示關閉按鈕)，displayMinimizeAction(是否在標題列顯示最小化按鈕)，displayMaximizeAction(是否在標題列顯示最大化按鈕)。

整個Alert訊息盒的形式，可以透過CSS方式來作設定，以下列出FloatingPane的一些常用CSS設定：

.dojoFloatingPane {
 /* essential css */
 position: absolute;
 overflow: visible;
 z-index: 10;

 /* styling css */
 border: 1px solid;
 border-color: #336699;
 background-color: white;
}

.dojoFloatingPaneTitleBar {
 vertical-align: top;
 margin: 0px;
 z-index: 10;
 background-color: #336699;
 cursor: default;
 overflow: hidden;
 border-color: white;
 vertical-align: middle;
}

.dojoFloatingPaneTitleText {
 float: left;
 padding: 4px;
 white-space: nowrap;
 color: white;
 font-family: Verdana, Helvetica, Garamond, sans-serif;
 font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.dojoFloatingPaneClient {
 position: relative;
 z-index: 10;
 border: 1px solid;
 border-color: white;
 margin: 0px;
 background-color: white;
 padding: 0px;
 font-family: Verdana, Helvetica, Garamond, sans-serif;
 font-size: 12px;
 overflow: auto;
}

可不斷調整CSS的設定使整個Alert訊息盒的樣式合乎需求。

由於在DOJO Div中將Display設為true，所以現在應該在一開始訊息盒即會出現，再來就可設計在怎樣的情況下訊息盒會出現，內容為何。