popup.html

ajax 聊天室,实现多人聊天,无刷新!

   $('fontColorList').style.display = 'none';
   if($('fontsList').style.display == 'block') {
      $('fontsList').style.display = 'none';
      toWin = '';
   } else {
      $('fontsList').style.left = parseInt($(win + '_setFont').offsetLeft) + 'px';
      $('fontsList').style.top = ($(win + '_toolbar').offsetTop - 94) + 'px';
      $('fontsList').style.display = 'block';
      toWin = win;
   }
}

function toggleFontSizeList(win) {
   $('emoticonList').style.display = 'none';
   $('fontsList').style.display = 'none';
   $('fontColorList').style.display = 'none';
   if($('fontSizeList').style.display == 'block') {
      $('fontSizeList').style.display = 'none';
      toWin = '';
   } else {
      $('fontSizeList').style.left = parseInt($(win + '_setFontSize').offsetLeft) + 'px';
      $('fontSizeList').style.top = ($(win + '_toolbar').offsetTop - 122) + 'px';
      $('fontSizeList').style.display = 'block';
      toWin = win;
   }
}

function toggleEmoticonList(win) {
   $('fontsList').style.display = 'none';
   $('fontSizeList').style.display = 'none';
   $('fontColorList').style.display = 'none';
   if($('emoticonList').style.display == 'block') {
      $('emoticonList').style.display = 'none';
      toWin = '';
   } else {
      $('emoticonList').style.left = (parseInt($(win + '_insertEmoticon').offsetLeft) - 119) + 'px';
      $('emoticonList').style.top = ($(win + '_toolbar').offsetTop - 73) + 'px';
      $('emoticonList').style.display = 'block';
      toWin = win;
   }
}

function toggleFontColorList(win) {
   $('fontsList').style.display = 'none';
   $('fontSizeList').style.display = 'none';
   $('emoticonList').style.display = 'none';
   if($('fontColorList').style.display == 'block') {
      $('fontColorList').style.display = 'none';
      toWin = '';
   } else {
      $('fontColorList').style.left = (parseInt($(win + '_setFontColor').offsetLeft) - 69) + 'px';
      $('fontColorList').style.top = ($(win + '_toolbar').offsetTop - 43) + 'px';
      $('fontColorList').style.display = 'block';
      toWin = win;
   }
}

function insertText(tti) {
   $(toWin + '_sendBox').value += tti;
   toggleEmoticonList();
   return false;
}

function setFont(fontname) {
   $(toWin + '_sendBox').style.fontFamily = fontname + ', sans-serif';
   $(toWin + '_setFont').innerHTML = fontname;
   toggleFontList('');
}

function setFontSize(size) {
   $(toWin + '_sendBox').style.fontSize = size + 'px';
   $(toWin + '_setFontSize').innerHTML = size;
   toggleFontSizeList('');
}

function setFontColor(color) {
   $(toWin + '_sendBox').style.color = color;
   $(toWin + '_setFontColorColor').style.backgroundColor = color;
   toggleFontColorList('');
}

function titlebarBlink(name, message, alter) {
   if(titlebarBlinker == false) {
      document.title = defaultTitle;
      return;
   }
   
   if(alter == 0) {
      document.title = name + '!';
      blinkerTimer = setTimeout("titlebarBlink('"+name+"', '"+message+"', 1)", 1000);
   } else if(alter == 1) {
      document.title = '"' + message.substring(0, 10) + (message.length > 10 ? '...' : '') + '"';
      blinkerTimer = setTimeout("titlebarBlink('"+name+"', '"+message+"', 2)", 1000);
   } else if(alter == 2) {
      document.title = defaultTitle;
      blinkerTimer = setTimeout("titlebarBlink('"+name+"', '"+message+"', 0)", 1000);
   }
}

function blinkerOn(onoff) {
   if(onoff == true)
      titlebarBlinker = true;
   else
      titlebarBlinker = false;
}

function browserWidth() {
   if (self.innerWidth) {
      return self.innerWidth;
   } else if (document.documentElement && document.documentElement.clientWidth) {
      return document.documentElement.clientWidth;
   } else if (document.body) {
      return document.body.clientWidth;
   }
   return 630;
}

function browserHeight() {
   if (self.innerWidth) {
      return self.innerHeight;
   } else if (document.documentElement && document.documentElement.clientWidth) {
      return document.documentElement.clientHeight;
   } else if (document.body) {
      return document.body.clientHeight;
   }
   return 470;
}

window.onunload = function() {
   self.opener.IMWindows[winName] = self.opener.IMWindows[winName].old;
   self.opener.IMWindows[winName].show();
   self.opener.$(winName + '_rcvd').innerHTML = $(winName + '_rcvd').innerHTML;
}
</script>

<style type="text/css">
body {
	overflow:hidden;
	color: #000;
	font-family: Tahoma, Arial, sans-serif;
	font-size: 10px;
	background-color:#ebe6e1;
	background-image: none;
	padding: 0;
	margin: 0;
}
</style>
</head>

<body onload="create();" class="dialog_content">
<div class="itemList" id="fontsList">
   <a href="#" onclick="setFont('Tahoma');return false;">Tahoma</a>
   <a href="#" onclick="setFont('Verdana');return false;">Verdana</a>
   <a href="#" onclick="setFont('Georgia');return false;">Georgia</a>
   <a href="#" onclick="setFont('Garamond');return false;">Garamond</a>
   <a href="#" onclick="setFont('Arial');return false;">Arial</a>
   <a href="#" onclick="setFont('Times New Roman');return false;">Times New Roman</a>
   <a href="#" onclick="setFont('Courier New');return false;">Courier News</a>
</div>
<div class="itemList" id="fontSizeList">
   <a href="#" onclick="setFontSize(8);return false;">8</a>
   <a href="#" onclick="setFontSize(10);return false;">10</a>
   <a href="#" onclick="setFontSize(12);return false;">12</a>
   <a href="#" onclick="setFontSize(14);return false;">14</a>
   <a href="#" onclick="setFontSize(16);return false;">16</a>
   <a href="#" onclick="setFontSize(18);return false;">18</a>
   <a href="#" onclick="setFontSize(20);return false;">20</a>
   <a href="#" onclick="setFontSize(22);return false;">22</a>
   <a href="#" onclick="setFontSize(24);return false;">24</a>
</div>
<div class="itemList" id="emoticonList">
   <table>
      <tr>
         <td><a href="#" onmousedown="return false;"><img class="emotIcon" src="images/emoticons/smile.gif" width="19" height="19" style="border:0;" onclick="insertText(':)');" /></a></td>
         <td><a href="#" onmousedown="return false;"><img class="emotIcon" src="images/emoticons/grin.gif" width="19" height="19" style="border:0;" onclick="insertText(':D');" /></a></td>
         <td><a href="#" onmousedown="return false;"><img class="emotIcon" src="images/emoticons/wink.gif" width="19" height="19" style="border:0;" onclick="insertText(';)');" /></a></td>
         <td><a href="#" onmousedown="return false;"><img class="emotIcon" src="images/emoticons/embarassed.gif" width="19" height="19" style="border:0;" onclick="insertText(':[');" /></a></td>
         <td><a href="#" onmousedown="return false;"><img class="emotIcon" src="images/emoticons/love.gif" width="19" height="19" style="border:0;" onclick="insertText(':*');" /></a></td>
      </tr>
      <tr>
         <td><a href="#" onmousedown="return false;"><img class="emotIcon" src="images/emoticons/sad.gif" width="19" height="19" style="border:0;" onclick="insertText(':(');" /></a></td>
         <td><a href="#" onmousedown="return false;"><img class="emotIcon" src="images/emoticons/cry.gif" width="19" height="19" style="border:0;" onclick="insertText(':\'(');" /></a></td>
         <td><a href="#" onmousedown="return false;"><img class="emotIcon" src="images/emoticons/cool.gif" width="19" height="19" style="border:0;" onclick="insertText('8-)');" /></a></td>
         <td><a href="#" onmousedown="return false;"><img class="emotIcon" src="images/emoticons/angry.gif" width="19" height="19" style="border:0;" onclick="insertText('>:o');" /></a></td>
         <td><a href="#" onmousedown="return false;"><img class="emotIcon" src="images/emoticons/surprised.gif" width="19" height="19" style="border:0;" onclick="insertText(':O');" /></a></td>
      </tr>
      <tr>
         <td><a href="#" onmousedown="return false;"><img class="emotIcon" src="images/emoticons/serious.gif" width="19" height="19" style="border:0;" onclick="insertText(':|');" /></a></td>
         <td><a href="#" onmousedown="return false;"><img class="emotIcon" src="images/emoticons/sick.gif" width="19" height="19" style="border:0;" onclick="insertText(':-S');" /></a></td>
         <td><a href="#" onmousedown="return false;"><img class="emotIcon" src="images/emoticons/tongue.gif" width="19" height="19" style="border:0;" onclick="insertText(':P');" /></a></td>
         <td><a href="#" onmousedown="return false;"><img class="emotIcon" src="images/emoticons/heart.gif" width="19" height="19" style="border:0;" onclick="insertText('<3');" /></a></td>
         <td><a href="#" onmousedown="return false;"><img class="emotIcon" src="images/emoticons/heartbroken.gif" width="19" height="19" style="border:0;" onclick="insertText('</3');" /></a></td>
      </tr>
   </table>
</div>
<div class="itemList" id="fontColorList">
   <table>
      <tr>
         <td class="colorItem" style="width:13px;height:13px;border:1px solid #000;background-color:#000000;" onclick="setFontColor('#000000');"></td>
         <td class="colorItem" style="width:13px;height:13px;border:1px solid #000;background-color:#b8b8b8;" onclick="setFontColor('#b8b8b8');"></td>
         <td class="colorItem" style="width:13px;height:13px;border:1px solid #000;background-color:#b4ad3b;" onclick="setFontColor('#b4ad3b');"></td>
         <td class="colorItem" style="width:13px;height:13px;border:1px solid #000;background-color:#bb5c54;" onclick="setFontColor('#bb5c54');"></td>
         <td class="colorItem" style="width:13px;height:13px;border:1px solid #000;background-color:#755a5c;" onclick="setFontColor('#755a5c');"></td>
      </tr>
      <tr>
         <td class="colorItem" style="width:13px;height:13px;border:1px solid #000;background-color:#a9b5ef;" onclick="setFontColor('#a9b5ef');"></td>
         <td class="colorItem" style="width:13px;height:13px;border:1px solid #000;background-color:#d65a20;" onclick="setFontColor('#d65a20');"></td>
         <td class="colorItem" style="width:13px;height:13px;border:1px solid #000;background-color:#e39230;" onclick="setFontColor('#e39230');"></td>
         <td class="colorItem" style="width:13px;height:13px;border:1px solid #000;background-color:#a71334;" onclick="setFontColor('#a71334');"></td>
         <td class="colorItem" style="width:13px;height:13px;border:1px solid #000;background-color:#a68978;" onclick="setFontColor('#a68978');"></td>
      </tr>
      <tr>
         <td class="colorItem" style="width:13px;height:13px;border:1px solid #000;background-color:#600c1f;" onclick="setFontColor('#600c1f');"></td>
         <td class="colorItem" style="width:13px;height:13px;border:1px solid #000;background-color:#491130;" onclick="setFontColor('#491130');"></td>
         <td class="colorItem" style="width:13px;height:13px;border:1px solid #000;background-color:#676f11;" onclick="setFontColor('#676f11');"></td>
         <td class="colorItem" style="width:13px;height:13px;border:1px solid #000;background-color:#769321;" onclick="setFontColor('#769321');"></td>
         <td class="colorItem" style="width:13px;height:13px;border:1px solid #000;background-color:#3966fe;" onclick="setFontColor('#3966fe');"></td>
      </tr>
   </table>
</div>
</body>
</html>