Анатолий Демидович: HTA. Один незавершенный интерфейс.

Рисовал интерфейс, в итоге решил упростить, а код остался:

<html>
<head> 
 <meta http-equiv=content-type content="text-html; charset=windows-1251">
    <meta http-equiv=MSThemeCompatible content=yes>
    <hta:application  
        scroll=no
  border=none
  innerborder=no
  selection=no
    >
</head>
<style type="text/css">
 body {        
  background-color:#ccccdd;
  font:bold italic 12 sans-serif;
 }
 /* заголовок приложения */
 #header {
  position:absolute;
  left:15px;
  top:5px;  
  width:180px;   
  font:bold 16;
  text-align:center;
  z-index: 2;
 } 
 /* основной блок основного окна */ 
 #b0 {
  position: absolute;
  left: 15px;
  top: 15px;  
  width:180px; 
  z-index: 1;
 }
 /* основные блоки всплывающих окон */
 #b1{
  position: absolute;
  left: 200px;
  top: 15px;
  width:450px;  
 }

 /* внутренний блок основного окна */
 #ib0{
  background-color: #4169e1; 
  color:#fff; 
  text-align:center;
 }
 /* все внутренние блоки */
 #ib0,#ib1{
  height:370px;
  overflow: hidden;
 }
 /* внутренние блоки всплывающих окон */
 #ib1{  
  padding:4px 6px 4px 6px; 
  background-color: #ccccdd;
  color:#ccccdd;
  filter:progid:DXImageTransform.Microsoft.Fade(center = True, duration=1, enabled = False);
 }
 /* кнопки */
 .btn {
  text-align:center;
  font-size: 15; 
  border: 4px groove white;
  margin: 1px 10px 1px 10px;
  width:155px;
  height:40px;
  cursor:hand;
  filter:progid:DXImageTransform.Microsoft.Fade(center = True, duration=1);
 }
 div span {
  display: block;
  position: relative;
  top: 50%;
  left: 0%;
  width: 100%;
 }
 div span span {
  position: relative;
  top: -50%;
 }

 /* элементы закругления, z - с фильтром */ 
 b { background-color: #4169e1; }
 #r1, #r2, #r3, #r4, #r5, #r6, #r7, #r8, #r9, #r10, 
 #r1z, #r2z, #r3z, #r4z, #r5z, #r6z, #r7z, #r8z, #r9z, #r10z {
  display: block;
  height: 1px;
  overflow: hidden;
  font-size:1px;   
 }

 #r1, #r2, #r3, #r4, #r5, #r6, #r7, #r8, #r9, #r10 {
  background-color: #4169e1;
 }

 #r1z, #r2z, #r3z, #r4z, #r5z, #r6z, #r7z, #r8z, #r9z, #r10z {
  background-color: #ccccdd;
  filter:progid:DXImageTransform.Microsoft.Fade(center = True, duration=1, enabled = False);
 }

 #r10,#r10z { margin: 0 10px; }
 #r9,#r9z { margin: 0 9px; }
 #r8,#r8z { margin: 0 8px; }
 #r7,#r7z { margin: 0 7px; }
 #r6,#r6z { margin: 0 6px; }
 #r5,#r5z { margin: 0 5px; }
 #r4,#r4z { margin: 0 4px; }
 #r3,#r3z { margin: 0 3px; }
 #r2,#r2z { margin: 0 2px; }
 #r1,#r1z { margin: 0 1px; } 
 
</style>
<script language="VBScript">
 Dim x0,y0 
 Dim sBtnID
 sBtnID = vbNullString 'id нажатой кнопки
 
 Sub window_onload()
  Window.ResizeTo 665, 420
  Window.MoveTo (Screen.Width \ 2) - 320, (Screen.Height \ 2) - 280 
 End Sub
 
 '***** Перемещение окна *****
 Sub document_onmousedown()
  If window.event.button = 2 Then
   x0=window.event.x
   y0=window.event.y   
  End If
 End Sub
 
 Function document_onmousemove()
  If window.event.button = 2 Then  
   window.moveby window.event.x-x0, window.event.y-y0   
  End If
 End Function
 '***************************
 
 '***** Изменение цвета *****
 'меняем цвет кнопок
 Sub ChangeBtnColor(bColor,btnId)
  Dim sColor
  If bColor Then 
   sColor = "#0000ff"
  Else
   sColor = "#4169e1"
  End If
  With document.getElementById(btnId)     
   If btnId <> sBtnID Then    
    .filters(0).apply    
    .style.backgroundColor=sColor
    .filters(0).play    
   End If   
  End With
 End Sub 
 '
 'меняем цвет окна
 Sub ChangeWndColor(btnId)
  Dim sColor, bHide
  If sBtnID = btnId Then
   bHide = True  
  End If
  If sBtnID <> vbNullString Then
   With document.getElementById(sBtnID)  
    .filters(0).apply    
    .style.backgroundColor="#4169e1"
    .filters(0).play       
   End With   
  End If  
  If bHide Then
   sColor = "#ccccdd"        
   sBtnID = vbNullString
  Else
   sColor = "#4169e1"      
   sBtnID = btnId
  End If
  With document.getElementById("b1")
   For Each n In .childNodes    
    With n     
     .filters(0).apply
     .style.backgroundColor=sColor
     .filters(0).play
     If bHide Then
      .style.color = "#ccccdd"      
     Else
      .style.color = "#fff"      
     End If     
    End With    
   Next
  End With
  document.getElementById("ib1").innerText = document.getElementById(btnId).innerText
 End Sub
 '***************************
</script>
<body>
 <span id="header">Заголовок</span> 
 <span id="b0">
  <b id="r10"></b><b id="r7"></b><b id="r5"></b><b id="r4"></b><b id="r3"></b><b id="r2"></b><b id="r2"></b><b id="r1"></b><b id="r1"></b><b id="r1"></b>  
  <div id="ib0">   
   <!-- Кнопки -->
   <div class="btn" id="btn1" onmouseenter="ChangeBtnColor True,me.id" onmouseleave="ChangeBtnColor False,me.id" onclick="ChangeWndColor me.id">    
    <span><span>Кнопка 1</span></span>
   </div>
   <div class="btn" id="btn2" onmouseenter="ChangeBtnColor True,me.id" onmouseleave="ChangeBtnColor False,me.id" onclick="ChangeWndColor me.id">
    <span><span>Кнопка 2</span></span>
   </div>   
   <div class="btn" id="btn3" onmouseenter="ChangeBtnColor True,me.id" onmouseleave="ChangeBtnColor False,me.id" onclick="ChangeWndColor me.id">
    <span><span>Кнопка 3</span></span>
   </div>
   <div class="btn" id="btn4" onmouseenter="ChangeBtnColor True,me.id" onmouseleave="ChangeBtnColor False,me.id" onclick="ChangeWndColor me.id">
    <span><span>Кнопка 4</span></span>
   </div>
   <div class="btn" id="btn5" onmouseenter="ChangeBtnColor True,me.id" onmouseleave="ChangeBtnColor False,me.id" onclick="ChangeWndColor me.id">
    <span><span>Кнопка 5</span></span>
   </div>
   <div class="btn" id="btn6" onmouseenter="ChangeBtnColor True,me.id" onmouseleave="ChangeBtnColor False,me.id" onclick="ChangeWndColor me.id">
    <span><span>Кнопка 6</span></span>
   </div>   
   <div class="btn" id="btn7" onmouseenter="ChangeBtnColor True,me.id" onmouseleave="ChangeBtnColor False,me.id" onclick="ChangeWndColor me.id">
    <span><span>Кнопка 7</span></span>
   </div>
   <div class="btn" id="btn8" onmouseenter="ChangeBtnColor True,me.id" onmouseleave="ChangeBtnColor False,me.id" onclick="ChangeWndColor me.id">
    <span><span>Кнопка 8</span></span>
   </div>
   <div class="btn" id="btn9" onmouseenter="ChangeBtnColor True,me.id" onmouseleave="ChangeBtnColor False,me.id" onclick="ChangeWndColor me.id">
    <span><span>Кнопка 9</span></span>
   </div>   
  </div>  
  <b id="r1"></b><b id="r1"></b><b id="r1"></b><b id="r2"></b><b id="r2"></b><b id="r3"></b><b id="r4"></b><b id="r5"></b><b id="r7"></b><b id="r10"></b>
 </span> 
 <span id="b1">
  <b id="r10z"></b><b id="r7z"></b><b id="r5z"></b><b id="r4z"></b><b id="r3z"></b><b id="r2z"></b><b id="r2z"></b><b id="r1z"></b><b id="r1z"></b><b id="r1z"></b>
  <div id="ib1"></div>  
  <b id="r1z"></b><b id="r1z"></b><b id="r1z"></b><b id="r2z"></b><b id="r2z"></b><b id="r3z"></b><b id="r4z"></b><b id="r5z"></b><b id="r7z"></b><b id="r10z"></b>
 </span> 
</body> 
</html>

или вот так (на любителя):

<html>
<head> 
 <meta http-equiv=content-type content="text-html; charset=windows-1251">
    <meta http-equiv=MSThemeCompatible content=yes>
    <hta:application  
        scroll=no
  border=none
  innerborder=no
  selection=no
    >
</head>
<style type="text/css">
 body {        
  background-color:#ccccdd;
  font:bold italic 12 sans-serif;
 }
 /* заголовок приложения */
 #header {
  position:absolute;
  left:15px;
  top:5px;  
  width:180px;   
  font:bold 16;
  text-align:center;
  z-index: 2;
 } 
 /* основной блок основного окна */ 
 #b0 {
  position: absolute;
  left: 15px;
  top: 15px;  
  width:180px; 
  z-index: 1;
 }
 /* основные блоки всплывающих окон */
 #b1{
  position: absolute;
  left: 200px;
  top: 15px;
  width:450px;  
 }

 /* внутренний блок основного окна */
 #ib0{
  background-color: #4169e1; 
  color:#fff; 
  text-align:center;
 }
 /* все внутренние блоки */
 #ib0,#ib1{
  height:370px;
  overflow: hidden;
 }
 /* внутренние блоки всплывающих окон */
 #ib1{  
  padding:4px 6px 4px 6px; 
  background-color: #ccccdd;
  color:#ccccdd;
  filter:progid:DXImageTransform.Microsoft.Fade(center = True, duration=1, enabled = False);
 }
 /* кнопки */
 .btn {
  text-align:center;
  font-size: 15; 
  border: 4px groove white;
  margin: 1px 10px 1px 10px;
  width:155px;
  height:40px;
  cursor:hand;
  filter:progid:DXImageTransform.Microsoft.Fade(center = True, duration=1);
 }
 div span {
  display: block;
  position: relative;
  top: 50%;
  left: 0%;
  width: 100%;
 }
 div span span {
  position: relative;
  top: -50%;
 }

 /* элементы закругления, z - с фильтром */ 
 b { background-color: #4169e1; }
 #r1, #r2, #r3, #r4, #r5, #r6, #r7, #r8, #r9, #r10, 
 #r1z, #r2z, #r3z, #r4z, #r5z, #r6z, #r7z, #r8z, #r9z, #r10z {
  display: block;
  height: 1px;
  overflow: hidden;
  font-size:1px;   
 }

 #r1, #r2, #r3, #r4, #r5, #r6, #r7, #r8, #r9, #r10 {
  background-color: #4169e1;
 }

 #r1z, #r2z, #r3z, #r4z, #r5z, #r6z, #r7z, #r8z, #r9z, #r10z {
  background-color: #ccccdd;
  filter:progid:DXImageTransform.Microsoft.Fade(center = True, duration=1, enabled = False);
 }

 #r10,#r10z { margin: 0 10px; }
 #r9,#r9z { margin: 0 9px; }
 #r8,#r8z { margin: 0 8px; }
 #r7,#r7z { margin: 0 7px; }
 #r6,#r6z { margin: 0 6px; }
 #r5,#r5z { margin: 0 5px; }
 #r4,#r4z { margin: 0 4px; }
 #r3,#r3z { margin: 0 3px; }
 #r2,#r2z { margin: 0 2px; }
 #r1,#r1z { margin: 0 1px; } 
 
</style>
<script language="JavaScript">
 var x0,y0 
 var sBtnID = "" //id нажатой кнопки
 
 function window_onload() {
  window.resizeTo(665, 420);
  window.moveTo((screen.width/2) - 320,(screen.height/2) - 280);
 } 
 
 //***** Перемещение окна *****
 function document_onmousedown() {
  if (window.event.button == 2) {
   x0=window.event.x;
   y0=window.event.y;   
  }
 }
 
 function document_onmousemove() {
  if (window.event.button == 2) 
   window.moveBy(window.event.x-x0,window.event.y-y0);  
 }
 //***************************
 
 //***** Изменение цвета *****
 //меняем цвет кнопок
 function changeBtnColor(bColor,btnId) {
  var sColor
  if (bColor)
   sColor = "#0000ff";
  else
   sColor = "#4169e1";     
  if (btnId != sBtnID) {    
   var b = document.getElementById(btnId);
   b.filters.item(0).apply();
   b.style.backgroundColor=sColor;
   b.filters.item(0).play();
  }  
 }
 
 //меняем цвет окна
 function changeWndColor(btnId) {
  var sColor, bHide;
  if (sBtnID == btnId)
   bHide = true;  
  if (sBtnID != "") {
   var b = document.getElementById(sBtnID);
   b.filters.item(0).apply();
   b.style.backgroundColor="#4169e1";
   b.filters.item(0).play();    
  }  
  if (bHide) {
   sColor = "#ccccdd";    
   sBtnID = "";
  }
  else {
   sColor = "#4169e1";   
   sBtnID = btnId;
  }  
  for(var i = 0, b1 = document.getElementById("b1").childNodes;i < b1.length;i++) {  
   b1[i].filters.item(0).apply();
   b1[i].style.backgroundColor=sColor;
   b1[i].filters.item(0).play();
   if (bHide)
    b1[i].style.color = "#ccccdd"; 
   else
    b1[i].style.color = "#fff";   
  }  
  document.getElementById("ib1").innerText = document.getElementById(btnId).innerText;
 }
 //*************************** 
</script>
<body onload="window_onload()" onmousedown="document_onmousedown()" onmousemove="document_onmousemove()">
 <span id="header">Заголовок</span> 
 <span id="b0">
  <b id="r10"></b><b id="r7"></b><b id="r5"></b><b id="r4"></b><b id="r3"></b><b id="r2"></b><b id="r2"></b><b id="r1"></b><b id="r1"></b><b id="r1"></b>  
  <div id="ib0">   
   <!-- Кнопки -->
   <div class="btn" id="btn1" onmouseenter="changeBtnColor(true,this.id)" onmouseleave="changeBtnColor(false,this.id)" onclick="changeWndColor(this.id)">    
    <span><span>Кнопка 1</span></span>
   </div>
   <div class="btn" id="btn2" onmouseenter="changeBtnColor(true,this.id)" onmouseleave="changeBtnColor(false,this.id)" onclick="changeWndColor(this.id)">
    <span><span>Кнопка 2</span></span>
   </div>   
   <div class="btn" id="btn3" onmouseenter="changeBtnColor(true,this.id)" onmouseleave="changeBtnColor(false,this.id)" onclick="changeWndColor(this.id)">
    <span><span>Кнопка 3</span></span>
   </div>
   <div class="btn" id="btn4" onmouseenter="changeBtnColor(true,this.id)" onmouseleave="changeBtnColor(false,this.id)" onclick="changeWndColor(this.id)">
    <span><span>Кнопка 4</span></span>
   </div>
   <div class="btn" id="btn5" onmouseenter="changeBtnColor(true,this.id)" onmouseleave="changeBtnColor(false,this.id)" onclick="changeWndColor(this.id)">
    <span><span>Кнопка 5</span></span>
   </div>
   <div class="btn" id="btn6" onmouseenter="changeBtnColor(true,this.id)" onmouseleave="changeBtnColor(false,this.id)" onclick="changeWndColor(this.id)">
    <span><span>Кнопка 6</span></span>
   </div>   
   <div class="btn" id="btn7" onmouseenter="changeBtnColor(true,this.id)" onmouseleave="changeBtnColor(false,this.id)" onclick="changeWndColor(this.id)">
    <span><span>Кнопка 7</span></span>
   </div>
   <div class="btn" id="btn8" onmouseenter="changeBtnColor(true,this.id)" onmouseleave="changeBtnColor(false,this.id)" onclick="changeWndColor(this.id)">
    <span><span>Кнопка 8</span></span>
   </div>
   <div class="btn" id="btn9" onmouseenter="changeBtnColor(true,this.id)" onmouseleave="changeBtnColor(false,this.id)" onclick="changeWndColor(this.id)">
    <span><span>Кнопка 9</span></span>
   </div>   
  </div>  
  <b id="r1"></b><b id="r1"></b><b id="r1"></b><b id="r2"></b><b id="r2"></b><b id="r3"></b><b id="r4"></b><b id="r5"></b><b id="r7"></b><b id="r10"></b>
 </span> 
 <span id="b1">
  <b id="r10z"></b><b id="r7z"></b><b id="r5z"></b><b id="r4z"></b><b id="r3z"></b><b id="r2z"></b><b id="r2z"></b><b id="r1z"></b><b id="r1z"></b><b id="r1z"></b>
  <div id="ib1"></div>  
  <b id="r1z"></b><b id="r1z"></b><b id="r1z"></b><b id="r2z"></b><b id="r2z"></b><b id="r3z"></b><b id="r4z"></b><b id="r5z"></b><b id="r7z"></b><b id="r10z"></b>
 </span> 
</body> 
</html>

По-моему интересно получилось. Может сгодится на что :).

Анатолий Демидович

Страницы

суббота, 8 сентября 2012 г.

HTA. Один незавершенный интерфейс.

Комментариев нет:

Отправить комментарий

Страницы

суббота, 8 сентября 2012 г.

HTA. Один незавершенный интерфейс.

Комментариев нет:

Отправить комментарий

суббота, 8 сентября 2012 г.