網頁

2012年12月7日 星期五

範例 - JavaScript 實作blockUI

之前有一個做跳出訊息的元件的需求
原本是要用element 的 title 屬性來做
不過因為mobile版本的瀏覽器不支援滑動的動作
所以簡單的作一個跳出訊息的 blockUI component
外觀上套了圓角的CSS
因為是用在 mobile 介面上,所以完全不考慮 IE
雖然現在 firefox 和 chrome 對新規格的支援都還不錯,還是有加了一些對應舊版的處理
以下為程式碼:

HTML part

<div id="blockUI"></div>
<div id="blockUIDisplayContent">
  <div id="messageBox"></div>
  <div id="blockUIButton">ok</div>
</div>

CSS part

#blockUI{
display: none;
background-color: black;
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 500;
opacity: 0.5;
filter:alpha(opacity=50);
}
#blockUIDisplayContent{
display:none;
background-color: white;
width: 70%;
height: 70%;
position: absolute;
left: 15%;
top: 15%;
z-index: 501;
border-radius: 10%;
border-top-right-radius: 2%;
border-bottom-left-radius: 2%;
-moz-border-radius: 10%;
-moz-border-radius-topright: 2%;
-moz-border-radius-bottomleft: 2%;
-webkit-border-radius: 10%;
-webkit-border-top-right-radius: 2%;
-webkit-border-bottom-left-radius: 2%;
}
#messageBox{
display:block;
width: 75%;
height: 77%;
border-radius: 10%;
border-top-right-radius: 2%;
border-bottom-left-radius: 2%;
-moz-border-radius: 10%;
-moz-border-radius-topright: 2%;
-moz-border-radius-bottomleft: 2%;
-webkit-border-radius: 10%;
-webkit-border-top-right-radius: 2%;
-webkit-border-bottom-left-radius: 2%;
vertical-align:middle;
text-align:center;
margin-left:12.5%;
margin-top:5%;
}
#blockUIButton{
position:relative;
display:block;
background-color: rgb(0, 136, 204);
width: 10%;
text-align:center;
vertical-align:middle;
margin-left:45%;
margin-top:0.5%;
cursor: pointer;
}

JavaScript part

function blockUIContainer(){
  this.message = "";
}
blockUIContainer.prototype.addMessage = function(msg){
  msg = "<span style='line-height:150%;'>" + msg + '</span><br />';
  this.message += msg;
}
blockUIContainer.prototype.clearMessage = function(){
  this.message = "";
}
blockUIContainer.prototype.display = function(){
  document.getElementById("blockUI").style.display = "block";
document.getElementById("blockUIDisplayContent").style.display = "block";
document.getElementById("blockUIButton").onclick = blockUIContainer.close;
var msgBox = document.getElementById("messageBox");
msgBox.innerHTML = "";
if(this.message) msgBox.innerHTML = this.message;
}
blockUIContainer.close = function(){
document.getElementById("blockUI").style.display = "none";
document.getElementById("blockUIDisplayContent").style.display = "none";
}


實際使用情況如下:

function setTopbarTitle(){
  var topbar=document.getElementById("topbar");
var bui = new blockUIContainer();

if(window.addEventListener){
topbar.addEventListener("mouseover", function(){
         bui.clearMessage();
         for(var i = 1; i < topbar.children.length; i++){
            if(topbar.children[i].innerHTML === "") continue;
            bui.addMessage(topbar.children[i].innerHTML);
           }
         bui.display();
      } ,false);
}
}

setTopbarTitle();

沒有留言:

張貼留言