1 (изменено: dab00, 2012-09-08 05:50:30)

Тема: HTA/VBS/JavaScript: Один незавершенный интерфейс

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


<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>

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

2

Re: HTA/VBS/JavaScript: Один незавершенный интерфейс

Действительно, интересно. У меня вот тоже в загашнике заготовочка нашлась:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Еще один шаблон</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=8" />
  <meta http-equiv="Content-Language" content="ru" />
  <meta http-equiv="imagetoolbar" content="no" />
  <hta:application
   applicationName="HTApp-XVIIg"
   border="none"
   caption="no"
   contextMenu="no"
   id="HTApp"
   innerBorder="no"
   scroll="no"
   selection="no"
   singleInstance="yes"
   showInTaskBar="yes"
   version="0.3"
   />
  <script type="text/jscript" language="JScript">
    var bw=240,bh=200; // размер окна
  </script>
  <style type="text/css">
   *{background-color:#999;border-bottom:solid 1px #666;border-left:solid 1px #ccc;border-right:solid 1px #666;border-top:solid 1px #ccc;font:normal 14px/18px Arial;margin:0;overflow:hidden;padding:0;scrollbar-3dlight-color:#999;scrollbar-arrow-color:#666;scrollbar-darkshadow-color:#999;scrollbar-face-color:#999;scrollbar-highlight-color:#ccc;scrollbar-shadow-color:#666;scrollbar-track-color:#999;}
   body{left:0;position:absolute;top:0;}
   span{display:block;height:18px;position:absolute;text-align:center;width:18px;}
   #hdr{border:none;}
   #mov{align:center;height:16px;left:2px;padding:1px;width:16px;position:absolute;top:2px;}
   #ttl{color:#369;font-weight:bold;left:24px;top:2px;}
   #hlp{color:#cff;font:normal 16px/15px Webdings;right:46px;top:2px;}
   #cmp{border-bottom:solid 1px #ccc;border-left:solid 1px #666;border-right:solid 1px #ccc;border-top:solid 1px #666;color:#9f9;font:normal 16px/16px Webdings;right:24px;top:2px;}
   #clz{color:#f9f;font:normal 17px/16px Webdings;right:2px;top:2px;}
   #gen{left:2px;position:absolute;top:24px;}
   #opt{left:1px;border:none;position:absolute;top:1px;visibility:visible;}
   #dbl{border-bottom:solid 1px #ccc;border-left:solid 1px #666;border-right:solid 1px #ccc;border-top:solid 1px #666;margin:1px;}
   #hab{border:none;left:2px;overflow:visible;padding:8px;position:absolute;top:2px;visibility:hidden;z-index:2;}
   #wrk{border:none;left:4px;position:absolute;top:4px;}
   #ndt{bottom:2px;color:#336;left:2px;}
   #ntm{bottom:2px;color:#336;right:24px;}
   #rsz{bottom:2px;color:#363;font:normal 19px/19px Wingdings;right:2px;text-indent:-1px;}
/* Далее - стили для элементов не из шаблона (классы и идентификаторы) */
  
  </style>
</head>
<body
 onload="clock();"
 onkeydown="if(event.keyCode==27)window.close();"
 onhelp="help(document.getElementById('hlp'));"
 >
  <div id="hdr">
    <img id="mov" src="/* 16x16 gif/ico/data */" alt="" />
    <span class="ws" id="ttl"></span>
  </div>
  <span id="hlp" onclick="help(this);">i</span>
  <span id="cmp" onclick="opts(this);">@</span>
  <span id="clz" onclick="window.close();">r</span>
  <div id="gen">
    <div id="dbl"><!-- Справка -->
      <textarea id="hab" readonly>
Справка:

Шаблон HTA приложения
   2pix версия 0.3

Справка        F1
Выход        Esc

    Сергей Ёлкин (2010)
      </textarea>
      <div id="wrk">
       Рабочая область

        <script type="text/jscript" language="JScript">
        //рабочие функции
        </script>
      </div>
    </div>
    <div id="opt">
     Опции

      <script type="text/jscript" language="JScript">
      //опциональные функции
      </script>
    </div>
  </div>
  <!-- Футер -->
  <span class="ws" id="ndt"></span>
  <span class="ws" id="ntm"></span>
  <span id="rsz">v</span>
</body>
<script type="text/jscript" language="JScript">
  var
   tl=document.getElementById('ttl'),
   nt=document.getElementById('ntm'),
   nd=document.getElementById('ndt'),
   gc=document.getElementById('gen'),
   db=document.getElementById('dbl'),
   ha=document.getElementById('hab'),
   op=document.getElementById('opt'),
   hd=document.getElementById('hdr'),
   wa=document.getElementById('wrk'),
   rs=document.getElementById('rsz'),
   x0,
   y0,
   ov=true,
   hv=false,
   ww=bw,
   wh=bh;
  tl.innerHTML=document.title;
  szfmt();

  function szfmt(){
    window.resizeTo(ww,wh);
    document.body.style.width=(ww-2)+'px';
    document.body.style.height=(wh-2)+'px';
    tl.style.width=(ww-96)+'px';
    (ww-34)%2==0?nt.style.width=(ww-34)/2+'px':nt.style.width=((ww-33)/2)+'px';
    nd.style.width=(ww-34)/2+'px';
    gc.style.width=(ww-8)+'px';
    gc.style.height=(wh-52)+'px';
    db.style.width=(ww-12)+'px';
    db.style.height=(wh-56)+'px';
    op.style.width=(ww-10)+'px';
    op.style.height=(wh-54)+'px';
    ha.style.width=(ww-28)+'px';
    ha.style.height=(wh-72)+'px';
    wa.style.width=(ww-18)+'px';
    wa.style.height=(wh-62)+'px';
  }
  function clock(){
    window.setTimeout('clock()',1000);
    gt:{
      var
       zt=new Date(),
       zm=zt.getMinutes()<10?'0'+zt.getMinutes():''+zt.getMinutes(),
       zh=zt.getHours(),
       zd=zt.getDate(),
       zz=zt.getMonth()<9?'0'+(zt.getMonth()+1):''+(zt.getMonth()+1),
       zy=zt.getFullYear();
      if((zh+':'+zm)==nt.innerHTML)break gt;
      nt.innerHTML=zh+':'+zm;
      if((zd+'.'+zz+'.'+zy)==nd.innerHTML)break gt;
      nd.innerHTML=zd+'.'+zz+'.'+zy;
    }
  }
  function help(tb){
    if(hv){
      tb.style.borderBottomColor=tb.style.borderRightColor='#666';
      tb.style.borderLeftColor=tb.style.borderTopColor='#ccc';
      ha.style.visibility='hidden';
      hv=false;
    }else{
      tb.style.borderBottomColor=tb.style.borderRightColor='#ccc';
      tb.style.borderLeftColor=tb.style.borderTopColor='#666';
      if(ov)opts(document.getElementById('cmp'));
      ha.style.visibility='visible';
      hv=true;
    }
  }
  function opts(tb){
    if(ov){
      tb.style.borderBottomColor=tb.style.borderRightColor='#666';
      tb.style.borderLeftColor=tb.style.borderTopColor='#ccc';
      op.style.visibility='hidden';
      ov=false;
    }else{
      tb.style.borderBottomColor=tb.style.borderRightColor='#ccc';
      tb.style.borderLeftColor=tb.style.borderTopColor='#666';
      if(hv)help(document.getElementById('hlp'));
      op.style.visibility='visible';
      ov=true;
    }
  }

  hd.onmousedown=function(){
    if(event.button==1){
      hd.style.cursor='move';
      x0=event.x;
      y0=event.y;
    }
  }
  hd.onmousemove=function(){
    if(event.button==1){
      window.moveBy(event.x-x0,event.y-y0);
      return false;
    }
    hd.style.cursor='auto';
  }
  rs.onmousedown=function(){
    if(event.button==1){
      rs.style.cursor='move';
      x0=event.x;
      y0=event.y;
    }
  }
  rs.onmousemove=function(){
    if(event.button==1){
      ww+=event.x-x0;
      if(ww<bw)ww=bw;
      x0=event.x;
      wh+=event.y-y0;
      if(wh<bh)wh=bh;
      y0=event.y;
      szfmt();
      return false;
    }
    rs.style.cursor='auto';
  }
  rs.onmouseup=function(){
    with(window.event.srcElement){
      style.borderBottomColor=style.borderRightColor='#666';
      style.borderLeftColor=style.borderTopColor='#ccc';
    }
  }
  
  document.onmouseover=function(){
    if((window.event.srcElement.tagName=='SPAN')&&
     (window.event.srcElement.className!='ws'))
      window.event.srcElement.style.backgroundColor='#c93';
    return true;
  }
  document.onmouseout=function(){
    if(window.event.srcElement.tagName=='SPAN')
     window.event.srcElement.style.backgroundColor='#999';
    if((window.event.srcElement.id=='clz')||
     (window.event.srcElement.id=='rsz')){
      with(window.event.srcElement){
        style.borderBottomColor=style.borderRightColor='#666';
        style.borderLeftColor=style.borderTopColor='#ccc';
      }
    }
  }
  document.onmousedown=function(){
    if((window.event.srcElement.id=='clz')||
     (window.event.srcElement.id=='rsz')){
      with(window.event.srcElement){
        style.borderBottomColor=style.borderRightColor='#ccc';
        style.borderLeftColor=style.borderTopColor='#666';
      }
    }
  }
</script>
</html>

3

Re: HTA/VBS/JavaScript: Один незавершенный интерфейс

Понравилось использование Wingdings, Webdings, спасибо. Из-за часиков не всегда корректно отрабатывает перемещение, но это не победишь.

4

Re: HTA/VBS/JavaScript: Один незавершенный интерфейс

Вот ещё совсем уж простенький, в стандартных виндовых цветах, имитирует многооконность (табы):

<job id="sfx"><comment>

!!!  Сохраните этот текст как файл с раширением .wsf и запустите  !!!

</comment><object id="a" progid="Shell.Application" />
<object id="f" progid="Scripting.FileSystemObject" />
<object id="s" progid="ADODB.Stream" />
<object id="x" progid="MSXML2.DOMDocument" />
<script type="text/jscript" language="JScript">
var c=getResource('b'),d=f.getBaseName(/filename="(.+)"/.exec(c)[1]),
r=x.createElement('root'),y=0,
z=f.getSpecialFolder(2)+'\\'+f.getBaseName(f.getTempName())+'.zip';
r.text=c.replace(/^\s*(.+\s+){4}/,''),r.dataType='bin.base64';
s.type=1,s.open(),s.write(r.nodeTypedValue),s.saveToFile(z),s.close();
if(f.fileExists(z)){while(f.folderExists(d+(y?' '+y:'')))y++;
f.createFolder(d+(y?' '+y:''));
for(var i=0;i<a.nameSpace(z).items().count;i++){
a.nameSpace(f.getAbsolutePathName(d+(y?' '+y:''))).copyHere(
a.nameSpace(z).items().item(i),0);}f.deleteFile(z);}
</script><resource id="b">

MIME-Version: 1.0
Content-Type: application/octet-stream; name="Template PMDI.zip"
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename="Template PMDI.zip"

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
dGFQSwUGAAAAAAEAAQA/AAAAJQcAAAAA

</resource></job>