天天看点

使用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,就能看到修改后的界面

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

使用自定义字体

担心客户机器没装相应字体,影响显示效果?没关系,我们使用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>
           
使用html,js,css开发鼠标右键菜单

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

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

这是打开的关于窗口的最终效果:

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

鼠标右键菜单效果:

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

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

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

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

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

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

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

manifest chrome/transparentXulApp/chrome.manifest

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

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