弹出和“悬浮”元素

2024-07-07 00:33:59

Popup and "Airborn" Elements

桌面用户界面和Web用户界面在“HTML画布”的大小上是不同的-HTML呈现的区域。在Web UI中，HTML呈现在浏览器的标签中，通常跨越整个桌面。但是桌面窗口，我们渲染HTML的地方，往往比这小。

在Web UI中，当我们需要显示一些弹出元素时，大多数时候，它将适合桌面宽的画布。但在桌面UI中并非如此-窗口较小，我们可能需要在窗口框外显示弹出窗口。

这就是为什么Sciter支持所谓的窗口弹出元素。此类弹出窗口的示例：

工具提示，
在 <select> 中列出，
在 <input|date> 中查看日历，
context <menu> 和菜单栏。
自定义弹出窗口和飞越。

Tooltips

Static tooltips

简单的文本工具提示由需要它们的元素上的 title 属性定义：

<some title="text">

在Sciter中，工具提示可能有更丰富的内容--里面有HTML。这些工具提示由 tooltip 属性定义：

<some tooltip="this my <b>rich</b> toolto">

Dynamic tooltips

在某些情况下，您可能需要为用户提供具有动态内容的工具提示。为了实现这一点，您可以在组件中处理 "tooltiprequest" 事件：

class Component extends Element {
  cnt = 0;

 ["on tooltiprequest"](evt) {
    evt.source = Element.create(<popup>shown {++this.cnt} times</popup>);
 return true; // handled
 }
}

Styling tooltips

工具提示被创建为具有role=“tooltip”属性集的 popup 元素。因此，您可以将其样式设置为

popup[role="tooltip"] { 
 background:gold;
 padding: 1em; 
  ...
}

如果你需要特定于特定元素的工具提示渲染，使用带有子组合符的选择器：

some > popup[role="tooltip"] { ... }

Context `<menu>`s

上下文菜单是桌面UI中非常流行的功能，因此Sciter支持它们。

为了定义组件的上下文菜单，请提供 "contextmenu" 事件处理程序：

class Component extends Element {

 ["on contextmenu"](evt) {
    evt.source = Element.create(<menu.context>
 <li.first>First action</li>
 <li.second>Second action</li>
 </menu>);
 return true; // handled
 }
 // menu item click handler
 ["on click at menu.popup > li.first"]() {
 ...
 }
}

尖端

你也可以内联定义事件处理器：

 ["on contextmenu"](evt) {
    evt.source = Element.create(<menu.context>
 <li onclick={() => this.doFirst()}>First action</li>
 <li onclick={() => this.doSecond()}>Second action</li>
 </menu>);
 return true; // handled
 }

弹出元素以所谓的“鼠标模式”显示-您的代码只是初始化它们的外观。当用户单击弹出元素之外的某个位置或应用程序失去焦点时，弹出元素会自动关闭。

要在代码中启动弹出窗口，请使用Element.popup（）函数，例如：

function PopupAwatar({user}) {
 return <popup.awatar> 
 <picture src={user.awatarUrl} />
 <caption>{user.fullName}</caption> 
 </popup>
}

element.popup(Element.create(<PopupAwatar user={...}/>),{options});

Popup元素可以像任何其他元素一样设置样式，例如使用样式集：

function PopupAwatar({user}) {
 return <popup.awatar styleset={__DIR__ + "awatar.css#popup"}> 
 </popup>
}

尖端

在CSS中，可以通过popup-position定义popup定位

“popup-request”- evt.source是将要显示的popup元素，发送到popup锚/所有者元素。
“popup-ready”- evt.source是显示时的popup元素。
“popup-dismissing”-evt.target是popup元素，在popup销毁之前发送给popup。
“popup-dismissed”-evt.target是弹出所有者元素，在弹出销毁后发送。

Airborn elements

Airborn元素也是窗口化的DOM元素，但具有确定的生存期：您可以使用 element.takeOff({options}) 方法在代码中显式地创建和隐藏它们。

示例，将元素显示为空传：

element.takeOff({
 x:posX,
 y:posY,
 relativeTo:"window",
 window:"attached"
});

例如，“着陆回”空中元素：

element.takeOff();

文档手册