sunshine-layx
Version:
A magical window.
449 lines (446 loc) • 19.9 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1,minimum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
<title><%=htmlWebpackPlugin.options.title %></title>
</head>
<body>
<button id="create">Create</button>
<button id="create2">Create2</button>
<button id="create3">Create3</button>
<button id="create4">Create4</button>
<button id="create5">Create5</button>
<button id="create6">Create6</button>
<button id="notice">Info</button>
<button id="notice2">Success</button>
<button id="notice3">Warning</button>
<button id="notice4">Error</button>
<div id="about-layx" style="display:none;padding: 10px;line-height: 1.5;">
<h2>Layx 一个神奇的UI窗口</h2>
<p>Layx
诞生于一次C/S架构系统往B/S架构系统迁移项目中。起初，我们想在B/S架构上实现类C/S架构窗口功能，但百度、谷歌过后依然没能找到合适的Javascript插件。于是乎在2018年05月01日五一劳动节期间连夜赶工创造出了
Layx 。</p>
<p>目前 Layx 拥有和C/S架构一样灵活的操作方式，支持网页多窗口、多任务协同操作，支持窗口各种事件。</p>
<h2>Layx 一个神奇的UI窗口</h2>
<p>Layx
诞生于一次C/S架构系统往B/S架构系统迁移项目中。起初，我们想在B/S架构上实现类C/S架构窗口功能，但百度、谷歌过后依然没能找到合适的Javascript插件。于是乎在2018年05月01日五一劳动节期间连夜赶工创造出了
Layx 。</p>
<p>目前 Layx 拥有和C/S架构一样灵活的操作方式，支持网页多窗口、多任务协同操作，支持窗口各种事件。</p>
<h2>Layx 一个神奇的UI窗口</h2>
<p>Layx
诞生于一次C/S架构系统往B/S架构系统迁移项目中。起初，我们想在B/S架构上实现类C/S架构窗口功能，但百度、谷歌过后依然没能找到合适的Javascript插件。于是乎在2018年05月01日五一劳动节期间连夜赶工创造出了
Layx 。</p>
<p>目前 Layx 拥有和C/S架构一样灵活的操作方式，支持网页多窗口、多任务协同操作，支持窗口各种事件。</p>
<h2>Layx 一个神奇的UI窗口</h2>
<p>Layx
诞生于一次C/S架构系统往B/S架构系统迁移项目中。起初，我们想在B/S架构上实现类C/S架构窗口功能，但百度、谷歌过后依然没能找到合适的Javascript插件。于是乎在2018年05月01日五一劳动节期间连夜赶工创造出了
Layx 。</p>
<p>目前 Layx 拥有和C/S架构一样灵活的操作方式，支持网页多窗口、多任务协同操作，支持窗口各种事件。</p>
<h2>Layx 一个神奇的UI窗口</h2>
<p>Layx
诞生于一次C/S架构系统往B/S架构系统迁移项目中。起初，我们想在B/S架构上实现类C/S架构窗口功能，但百度、谷歌过后依然没能找到合适的Javascript插件。于是乎在2018年05月01日五一劳动节期间连夜赶工创造出了
Layx 。</p>
<p>目前 Layx 拥有和C/S架构一样灵活的操作方式，支持网页多窗口、多任务协同操作，支持窗口各种事件。</p>
<h2>Layx 一个神奇的UI窗口</h2>
<p>Layx
诞生于一次C/S架构系统往B/S架构系统迁移项目中。起初，我们想在B/S架构上实现类C/S架构窗口功能，但百度、谷歌过后依然没能找到合适的Javascript插件。于是乎在2018年05月01日五一劳动节期间连夜赶工创造出了
Layx 。</p>
<p>目前 Layx 拥有和C/S架构一样灵活的操作方式，支持网页多窗口、多任务协同操作，支持窗口各种事件。</p>
<h2>Layx 一个神奇的UI窗口</h2>
<p>Layx
诞生于一次C/S架构系统往B/S架构系统迁移项目中。起初，我们想在B/S架构上实现类C/S架构窗口功能，但百度、谷歌过后依然没能找到合适的Javascript插件。于是乎在2018年05月01日五一劳动节期间连夜赶工创造出了
Layx 。</p>
<p>目前 Layx 拥有和C/S架构一样灵活的操作方式，支持网页多窗口、多任务协同操作，支持窗口各种事件。</p>
<h2>Layx 一个神奇的UI窗口</h2>
<p>Layx
诞生于一次C/S架构系统往B/S架构系统迁移项目中。起初，我们想在B/S架构上实现类C/S架构窗口功能，但百度、谷歌过后依然没能找到合适的Javascript插件。于是乎在2018年05月01日五一劳动节期间连夜赶工创造出了
Layx 。</p>
<p>目前 Layx 拥有和C/S架构一样灵活的操作方式，支持网页多窗口、多任务协同操作，支持窗口各种事件。</p>
</div>
<script type="text/javascript">
document.getElementById("create").onclick = function () {
layx.open({
id: "hello-world",
content: {
type: 'html',
value: document.getElementById("about-layx")
},
toolBar: {
titleBar: {
title: "Layx - Create1."
}
},
topMenu: [
{
id: 'file',
label: '文件(F)',
items: [
{
id: 'new-file',
label: '新建文件'
},
{
id: 'new-window',
label: '新建窗口'
},
{
id: 'open-file',
label: '打开文件'
},
{
id: 'open-window',
label: '打开窗口'
}
]
},
{
id: 'edit',
label: '编辑(E)',
items: [
{
id: 'child-one',
label: '点击我',
handler: function (ev, win) {
alert("谢谢支持。");
},
items: [
{
id: 'new-file',
label: '新建文件'
},
{
id: 'new-window',
label: '新建窗口'
},
{
id: 'open-file',
label: '打开文件'
},
{
id: 'open-window',
label: '打开窗口'
}
]
},
{
id: 'child-two',
label: '子菜单二'
},
{
id: 'child-three',
label: '子菜单三'
},
{
id: 'child-four',
label: '子菜单四'
},
{
id: 'child-five',
label: '子菜单五'
}
]
},
{
id: 'view',
label: '查看(V)'
},
{
id: 'other',
label: '其他(T)'
},
{
id: 'help',
label: '帮助(H)'
}
],
contextMenu: [{
id: 'create',
label: '新增窗口',
handler: function (ev, win) {
alert("点击了新增，窗口句柄为：" + win.id);
},
items: [
{
id: 'child-one',
label: '子菜单一'
},
{
id: 'child-two',
label: '子菜单二',
items: [
{
id: 'child-one',
label: '点击我',
handler: function (ev, win) {
alert("谢谢支持。");
}
},
{
id: 'child-two',
label: '子菜单二'
},
{
id: 'child-three',
label: '子菜单三'
},
{
id: 'child-four',
label: '子菜单四'
},
{
id: 'child-five',
label: '子菜单五'
}
]
},
{
id: 'child-three',
label: '子菜单三'
}
]
},
{
id: 'edit',
label: '编辑窗口',
handler: function (ev, win) {
alert("点击了编辑，窗口句柄为：" + win.id);
}
},
{
id: 'del',
label: '关闭窗口',
handler: function (ev, win) {
layx.destroy(win.id);
}
},
{
id: 'about',
label: '关于...',
handler: function (ev, win) {
alert("点击了关于，窗口句柄为：" + win.id);
}
}]
});
}
document.getElementById("create2").onclick = function () {
layx.open({
id: "hello-world2",
content: {
type: 'local-url',
value: '../local.html'
},
toolBar: {
background: "#f5f5f5",
titleBar: {
title: "Layx - Create2.",
useSubTitle: true
}
},
offset: [100, 50],
topMenu: [
{
id: 'file',
label: '文件2(F)',
items: [
{
id: 'new-file',
label: '新建文件'
},
{
id: 'new-window',
label: '新建窗口'
},
{
id: 'open-file',
label: '打开文件'
},
{
id: 'open-window',
label: '打开窗口'
}
]
},
{
id: 'edit',
label: '编辑(E)',
items: [
{
id: 'child-one',
label: '点击我',
handler: function (ev, win) {
alert("谢谢支持。");
},
items: [
{
id: 'new-file',
label: '新建文件'
},
{
id: 'new-window',
label: '新建窗口'
},
{
id: 'open-file',
label: '打开文件'
},
{
id: 'open-window',
label: '打开窗口'
}
]
},
{
id: 'child-two',
label: '子菜单二'
},
{
id: 'child-three',
label: '子菜单三'
},
{
id: 'child-four',
label: '子菜单四'
},
{
id: 'child-five',
label: '子菜单五'
}
]
},
{
id: 'view',
label: '查看(V)'
},
{
id: 'other',
label: '其他(T)'
},
{
id: 'help',
label: '帮助(H)'
}
],
contextMenu: [
{
id: 'refresh',
label: '刷新IFrame',
handler: function (ev, win) {
var frameContent = win.getComponent("content-container/content");
if (frameContent.contentWindow) {
frameContent.contentWindow.location.reload();
}
}
},
{
id: 'del',
label: '关闭窗口',
handler: function (ev, win) {
layx.destroy(win.id);
}
},
{
id: 'about',
label: '关于...',
handler: function (ev, win) {
alert("点击了关于，窗口句柄为：" + win.id);
}
}]
});
}
document.getElementById("create3").onclick = function () {
layx.open({
id: "hello-world3",
content: {
type: 'html',
value: '一个神奇的UI窗口'
},
parclose: true,
toolBar: {
titleBar: {
title: "Layx - Create3."
}
},
offset: "rightBottom"
});
}
document.getElementById("create4").onclick = function () {
layx.open({
id: "hello-world4",
content: {
type: 'html',
value: '一个神奇的UI窗口'
},
toolBar: {
titleBar: {
title: "Layx - Create4."
}
},
offset: "bottomCenter"
});
}
document.getElementById("create5").onclick = function () {
layx.open({
id: "hello-world5",
content: {
type: 'html',
value: '一个神奇的UI窗口'
},
toolBar: {
titleBar: {
title: "Layx - Create5."
}
},
offset: "leftTop"
});
}
document.getElementById("create6").onclick = function () {
layx.open({
id: "hello-world6",
content: {
type: 'html',
value: '一个神奇的UI窗口'
},
toolBar: {
titleBar: {
title: "Layx - Create6."
}
},
statuBar: {
content: '状态栏'
},
offset: "rightTop"
});
}
document.getElementById("notice").onclick = function () {
layx.notice({
title: '消息提示',
message: '我是消息提示消息提示消息提示消息提示'
});
}
document.getElementById("notice2").onclick = function () {
layx.notice({
title: '成功提示',
type: 'success',
message: '我是消息提示消息提示消息提示消息提示'
});
}
document.getElementById("notice3").onclick = function () {
layx.notice({
title: '警告提示',
type: 'warning',
message: '我是消息提示消息提示消息提示消息提示'
});
}
document.getElementById("notice4").onclick = function () {
layx.notice({
title: '错误提示',
type: 'error',
message: '我是消息提示消息提示消息提示消息提示'
});
}
</script>
</body>
</html>