XUL透明异形旋转窗体

200行不到的代码，实现透明异形旋转窗体。
下载(25MB)： http://oltag.com:8080/yaolixing/18/11/00/OHUIv52.0.1_3_webTrans20180106.rar

XUL透明异形旋转窗体

<?xml version="1.0"?>

<?xml-stylesheet href="chrome://global/skin" type="text/css"?>

<?xml-stylesheet href="chrome://xulApp/skin/index.css" type="text/css"?>

<xul:window id="test-window" title="他山跨平台混合应用开发框架 V52"

		xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"

		xmlns:xbl="http://www.mozilla.org/xbl"

        xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

        xmlns:svg="http://www.w3.org/2000/svg"

        xmlns:html="http://www.w3.org/1999/xhtml"

		xmlns="http://www.w3.org/1999/xhtml"

		drawintitlebar='true'

		onload='onload()' >

  <div style='background:url(../skin/images/mp18517973_1434019011825_16.gif) no-repeat -25px 4px;height:170px;' />

  <script type="application/javascript" src="chrome://xulApp/content/js/common.js" />

  <script type="application/javascript" src="chrome://xulApp/content/js/global.js" />

  <script type="application/javascript" src="chrome://xulApp/content/js/index.js" />

 <xul:tooltip id="aHTMLTooltip" page="true"/>

 	<xul:hbox flex="1">

		<xul:vbox width="2" style="background-color: grey;overflow: hidden;">

			<xul:resizer dir="topleft"  style="cursor: nw-resize;"/>

			<xul:resizer dir="left" flex="1" style="cursor: w-resize;"/>

			<xul:resizer dir="bottomleft" style="cursor: sw-resize;"/>

		</xul:vbox>

		<xul:vbox  flex="1" >

			<xul:vbox height='2px' style="background-color: grey; overflow: hidden;"><xul:resizer  dir="top"  style="cursor: n-resize;"/></xul:vbox>

			<xul:vbox flex="1">

			   <xul:hbox  id='tbar'>

			        <xul:hbox class='toolbar' >

						<xul:label id="appicon" flex='1'/>

						<xul:label id='apptitle' >他山跨平台混合应用开发框架 V52</xul:label>

					</xul:hbox>

					<xul:hbox class='toolbar' flex="1"><spacer id="titlebar-spacer" flex="1"/></xul:hbox>

					<xul:hbox class='toolbar' >

						<xul:label id="minimize" flex='1' tooltiptext="最小化"/>

						<xul:deck class='toolbar-split'/>

						<xul:label id="maximize" tooltiptext="最大化"  />

						<xul:deck class='toolbar-split'/>

						<xul:label id="close" tooltiptext="关闭"  title="关闭" />

					</xul:hbox>

				</xul:hbox>

<xul:hbox flex="1" style="vertical-align:middle;color:#303030;font:normal 22px 方正静蕾简体,华文行楷,楷体_GB2312,arial, tahoma, helvetica, sans-serif;font-weight:100;">

<marquee direction='up' scrolldelay='500' style='padding-left:20px;height:500px;overflow: hidden;border:0px solid green;'>

<br />

那一夜，我听了一宿梵唱，不为参悟，只为寻你的一丝气息。<br />

那一月，我转过所有经轮，不为超度，只为触摸你的指纹。<br />

那一年，我磕长头拥抱尘埃，不为朝佛，只为贴着了你的温暖。<br />

那一世，我翻遍十万大山，不为修来世，只为路中能与你相遇。<br />

那一瞬，我飞升成仙，不为长生，只为佑你平安喜乐。<br />

那一天，那一月，那一年，那一世<br />

<br /><br />

那一天<br />

闭目在经殿的香雾中<br />

蓦然听见<br />

你诵经的真言<br />

<br /><br />

那一月<br />

我转动所有的经筒<br />

不为超度<br />

只为触摸你的指尖<br />

<br /><br />

那一年<br />

我磕长头匍匐在山路<br />

不为觐见<br />

只为贴着你的温暖<br />

<br /><br />

那一世<br />

我转山转水转佛塔呀<br />

不为修来世<br />

只为在途中与你相见<br />

<br /><br />

天空中洁白的仙鹤<br />

请将你的双翅借我<br />

我不往远处去飞<br />

只到理塘就回<br />

<br /><br />

</marquee>

</xul:hbox>

				<xul:hbox>

				<xul:deck flex="1">

				<xul:statusbar flex="1" id="statusbar"><xul:statusbarpanel flex="1">Ready</xul:statusbarpanel></xul:statusbar>

				</xul:deck>

				</xul:hbox>

    </xul:vbox>

			<xul:vbox height='2px' style="background-color: grey; overflow: hidden;"><xul:resizer  dir="bottom" style="cursor: s-resize;"/></xul:vbox>

		</xul:vbox>

		<xul:vbox width="2" style="background-color: grey; overflow: hidden;">

			<xul:resizer dir="topright" height="1" style="cursor: ne-resize;"/>

			<xul:resizer dir="right" flex="1" style="cursor: e-resize;"/>

			<xul:resizer dir="bottomright" height="1" style="cursor: se-resize;"/>

		</xul:vbox>

	</xul:hbox>

<script>

var oBtn;

function onload()

{

  var aWidth=800;

  var aHeight=787;

  var xOffset = (window.screen.availWidth  - aWidth)/2;

  var yOffset = (window.screen.availHeight - aHeight)/2;

  xOffset = xOffset > 0 ? xOffset : 0;

  yOffset = yOffset > 0 ? yOffset : 0;

  //align to screen

  window.resizeTo(aWidth, aHeight);

  window.moveTo(xOffset, yOffset);

  oBtn = Comm.$('minimize');

  Comm.addEvent(oBtn, 'mouseup', function(){

  window.minimize();

  });

  oBtn = Comm.$('close');

  Comm.addEvent(oBtn, 'mouseup', function(){

  window.close();

  });

	 var otbar = Comm.$('tbar');

	  oBtn = Comm.$('maximize');

	  (function(){

	  var isFullScreen=false;

	  var oldX=0,oldY=0,oldWidth=0,oldHeight=0;

	  function windowToScreen()

	  {

		  if(isFullScreen)

		  {

			  isFullScreen=false;

			  window.moveTo(oldX, oldY);

			  window.resizeTo(oldWidth, oldHeight);

		  }else

		  {

			  isFullScreen=true;

			  oldX=window.screenX;

			  oldY=window.screenY;

			  oldWidth=window.outerWidth;

			  oldHeight=window.outerHeight;

			  window.moveTo(0,0);

			  window.resizeTo(window.screen.availWidth, window.screen.availHeight);

			  //window.maximize();

		  }

	  }

	  Comm.addEvent(oBtn, 'mouseup', function(e){

	  windowToScreen();

	  });

	   Comm.addEvent(otbar, 'dblclick', function(){

	   windowToScreen();

	  });

	})();

	Comm.DragDropTitle(otbar);

}//onload()

</script> 

<xul:keyset>

<xul:key id="key1" modifiers="control" key="Q" oncommand="alert('你按了快捷键crtl+Q')"/>

<xul:key id="key2" modifiers="control alt" key="C" oncommand="alert('你按了快捷键crtl+alt+C')"/>

<xul:key id="key3" keycode="VK_F5" oncommand="location.reload();" />

</xul:keyset>

</xul:window>

支持html,css,js开发右键菜单
支持任意节点右键菜单
支持右键菜单在屏幕任意位置弹出显示

有人问：有了HTML5,为什么还要XUL,XUL不是要淘汰了吗？
XUL是类似于HTML5中web component的东西。但是web也好，web component也好，终究是为网页开发的，而应用开发和网页不一样，在安全性，可操作性方面，应用程序有更多需求。比如读写本地文件，调用系统服务，界面上xul提供快捷键，resizer缩放控件，spilter拆分窗口，多标签页，进度条等100多种控件(参考[1])，有些控件是可以用html实现，比如树型目录控件，但是xul提供了一致的本地外观风格，使用纯web实现，可能导致tree你要使用一个js库，table你又要使用另一个js的外观，造成界面风格的混乱。xul提供的这些多达100多种的常用控件，都是可以使用css,js,html进行修改。xul还提供多国语言，布局重用(Overlay)等特性，方便了程序开发。因为xul开发跨平台桌面的强大特性，所以被firefox重度使用和依赖，短期内是不会被淘汰，手机端在v57后会放弃使用XUL,但在桌面端不会。

秒客网

XUL透明异形旋转窗体

相关文章