使用html,js,css开发鼠标右键菜单

原文出处：http://bbs.otherhill.com/index.php/topic/show/28

cef支持xp吗？不支持！

cef支持web开发半透明异形窗体吗？不支持！
cef支持手机端吗？不支持！
cef提供类似xul的完整的界面UI组件吗？不提供！
cef支持使用html,js,css开发真正的鼠标右键菜单吗？当然还是不支持！
那么好吧，我们继续。

打开cfg.ini，设置要打开的xul全路径，如

[Setting]
#支持全路径打开xul
url="file:///F:/MozProj/geckoWrapperV22/WebUI/chrome/content/ohui.xul"

#支持全路径打开application.ini
url="file:///F:/MozProj/geckoWrapperV22/WebUI/application.ini"

#支持相对路径打开xul
url="chrome/geckoWrapper/chrome/content/ohui.xul"

#支持相对路径打开application.ini
url="chrome/geckoWrapper/application.ini"

#支持utf-8编码  decodeURI
url=webui/xul/%E4%B8%8D%E8%A7%84%E5%88%99XUL/chrome/content/clock.xul

#支持escape编码  unescape
url=webui/xul/%B2%BB%B9%E6%D4%F2XUL/chrome/content/clock.xul

#支持中文路径
url="webui/xul/不规则XUL/chrome/content/clock.xul"

＃当然使用.html更没问题了，支持http://,https://
url=http://baidu.com/

以最后一个设置为准。
相对路径是相对于当前程序所在路径，对于OHUI工程而言，默认生成的路径位于dist/bin目录下。该目录我一般会打包一个firefox.exe,以方便大家使用firefox调试

开发快捷键
 

<xul:window>
.....
<xul:keyset>
<xul:key id="key1" modifiers="control" key="Q" oncommand="alert('你按了快捷键crtl+Q')"></xul:key>
<xul:key id="key2" modifiers="control alt" key="C" oncommand="alert('你按了快捷键crtl+alt+C')"></xul:key>
<xul:key id="key3" keycode="VK_F5" oncommand="location.reload();"></xul:key>
</xul:keyset>
</xul:window>

是不是很容易？加入F5快捷键的好处是，方便调试效果，改动代码后，按一下F5，就能看到修改后的界面

使用自定义字体
担心客户机器没装相应字体，影响显示效果？没关系，我们使用html5 font

<html:style type="text/css">
    @font-face {
        font-family:"xjlfont";
        src:url('css/xjlFont.fon');
    }
 
window
{
    font-family:xjlfont,华文行楷;
    font-size:17pt;
}
 
menubar *
{
    font-size:16pt!important;
    font-family:xjlfont,华文行楷;
}
。。。
</html:style>

使用混合开发的软件，尤喜单个页面，或者说页面越少越好，因为跨页面的数据传递比较麻烦，不像c++,传个指针过去，一堆数据就可以随便读写。混合开发时，页面之间的数据传递都是使用字符串，可以使用json, 复杂点的就用xml,他山定时里页面数据的传递用的就是xml,你也可以使用sqlite.

如果仅需要传递很少的参数，那么我们可以使用window.openDialog(url, name, features, arg1, arg2, ...)，来打开新窗口并与之数据交互。
这是打开的关于窗口的最终效果:

鼠标右键菜单效果：

与基础版不同之处在于，扩展版可以使用web语言开发窗口本身。这是和主流采用浏览器嵌入开发应用不一样的地方，好处是窗口被当成是div，可以被

css,js操作，这样各种透明，异形，渐隐渐现等特效，都可以轻松实现。以前传统开发需要几百行上千行的代码，如今可能一行css就搞定了。看看下图是css3加持下的窗口加载特效：

至于与本地系统交互，调用api,更是小菜一碟，任何混合开发框架都支持

cfg.ini中支持全路径和相对路径的打开，使用全路径的好处是，webui代码可能分散在本机各处，或者与开发环境不在同一目录下，使用相对路径是用于软件的发布，如果要使用firefox来查看运行时内存变量，也需要使用相对路径。如果想要firefox识别工程所指的chrome://路径，则需要修改firefox.exe目录下chrome.manifest文件。加入一行：
manifest chrome/transparentXulApp/chrome.manifest

使用firefox这个照妖镜，什么界面变量都能看得一清二楚，方便你为所欲为