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

本文介绍如何使用HTML、JavaScript和CSS开发鼠标右键菜单。在混合开发中,由于页面间数据传递不便,作者倾向于减少页面数量。文章提到了CEF不支持XP系统,并提到数据传递可使用JSON或XML。还展示了鼠标右键菜单的实现效果,并指出扩展版允许使用Web语言开发窗口,将窗口视为div进行操作,便于界面定制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

原文出处: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这个照妖镜,什么界面变量都能看得一清二楚,方便你为所欲为


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值