XUL透明异形旋转窗体
200行不到的代码,实现透明异形旋转窗体。
下载(25MB): http://oltag.com:8080/yaolixing/18/11/00/OHUIv52.0.1_3_webTrans20180106.rar
<?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,但在桌面端不会。
更多介绍: http://yaolixing.oltag.com/gns-8ABFFE2D-EB1E-44FA-9118-217ED7959536.html
参考:
[1]. XUL Reference: https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/XUL_Reference