Servis-Rhino 4211B Guia do Utilizador descarregar pdf (Página 160)

See also:

• Dojo docs – dijit.dialog – 1.10

dijit/TooltipDialog

Very similar to the dijit/Dialog, the dijit/TooltipDialog also shows a modal dialog.

However, unlike the other one, dijit/TooltipDialog has two primary differences:

• Clicking outside the dialog disposes of it.

• The dialog is positioned showing a relationship to another widget.

The TooltipDialog can be shown from a DropDownButton or through the use of the

dijit/popup mechanism. When using popup, the TooltipDialog can appear just about

anywhere.

It is the parent that is responsible for showing and hiding the dialog. Consider using focus/blur to

know when the dialog should be disposed.

Here is an example of using the TooltipDialog to launch on a node click:

<div id="launch">Click here</div>

<br />

<label for="hobby2" style="display: inline-block; width: 5em;">Hobby:</label>

<br />

</div>

require(["dojo/ready", "dojo/parser", "dijit/TooltipDialog", "dijit/form/TextBox",

"dijit/form/Button", "dijit/popup", "dojo/query", "dojo/on", "dijit/registry"],

function (ready, parser, TooltipDialog, TextBox, Button, popup, query, on, registry) {

ready(function () {

var ttd = registry.byId("ttd");

var node = query("#launch")[0];

on(node, "click", function () {

console.log("Clicked!");

popup.open({

popup: ttd,

around: node

});

ttd.focus();

});

ttd.on("blur", function () {

popup.close(ttd);

});

When defining a TooltipDialog in markup, make sure that the CSS "display" is set to "none" to hide

it until needed. Also consider setting its "outline" to also be "none" to hide its focus indicator.

Sem comentários

Servis-Rhino 4211B Guia do Utilizador Página 160