Dojo 1.7 dialog and tooltip tutorial

Original article: http://dojotoolkit.org/documentation/tutorials/1.7/dialogs_tooltips/

Original Author: David Walsh

Translator: Eline Liu

Dojo 1.7 difficulty level: elementary

User interaction is the first element for building rich client network applications. The browser provides alert and dialog boxes as basic user interaction methods, but these basic interactions are very simple and inflexible. Therefore, dijit, a user interface framework provided by the dojo toolkit, provides a series of cross-browser frameworks, including dijit/tooltip, dijit/dialog, and dijit/tooltipdialog widgets, scalable, customizable theme controls to make up for the shortcomings of the browser's basic interaction functions. In this tutorial, you will learn the above controls, including examples and related details.

The native "tooltip" of tooltips is to use the title attribute in the browser to create a DOM node. These tooltip are as simple as they look: they cannot control the display duration, contain rich text, and present different browsers. The dijit/tooltip class of dijit solves all the above problems:

• HTML content can be included in tooltip
• Provides a method to control the position and duration of the tooltip display.
• When the browser size changes, you can relocate tootips and adjust the size of the browser.
• Provides 4 elegant and elegant tooltip display themes
• Implements a reliable cross-browser policy that allows it to be displayed on flash elements.
• Lazy Creation Mode-A tooltip node is created only when the tooltip must be displayed.

The steps for using dijit/tooltip are the same as those for using any dijit control: add the required style sheet to the page, add the corresponding CSS class name to the body node, and request the Javascript class of the control.

After the subject and control classes are loaded, you can use the following programming method to create a tooltip
// Create a new Tooltipvar tip = new Tooltip({    // Label - the HTML or text to be placed within the Tooltip    label: '<div class="myTipType">This is the content of my Tooltip!</div>',    // Delay before showing the Tooltip (in milliseconds)    showDelay: 250,    // The nodes to attach the Tooltip to    // Can be an array of strings or domNodes    connectId: ["myElement1","myElement2"]});


Important dijit/tooltip attributes include:

 

 
  
Connectid-an ID or DOM node array used to store the objects to be connected by the tooltip
 
  
Label-HTML or text content placed inside tooltip
 
  
Showdelay-tooltip display latency

 
Common dijit/tooltip methods include:

 

 
  
Addtarget-if the target has not been connected, you can use this method to add a connection target.
 
  
Close-close the tooltip instance and make it invisible
 
  
Open-open the tooltip instance and make it visible
 
  
Removetarget-remove a node from the tooltip connection destination queue
 
  
Set-the attribute value can be changed, mostly the tooltip content, such as (mytip. Set ("label", "new content! "))

 

The dijit/tooltip object also has a configurable defaultposition queue attribute, which can be used to control the order of positions displayed by the tooltip instance. This queue can be changed based on developers' needs.
Tooltip. defaultposition = ["above", "below", "after", "before"];
Note: Changing tooltip. defaultposition applies to all tooltip instances.
Dijit/tooltip usage example
The following is a common example of dijit/tooltip usage.
Declarative tooltip Creation
<button id="TooltipButton" onmouseover="dijit.Tooltip.defaultPosition=['above', 'below']">Tooltip Above</button><div class="dijitHidden"><span data-dojo-type="dijit.Tooltip" data-dojo-props="connectId:'TooltipButton'">I am <strong>above</strong> the button</span></div> <button id="TooltipButton2" onmouseover="dijit.Tooltip.defaultPosition=['below','above']">Tooltip Below</button><div class="dijitHidden"><span data-dojo-type="dijit.Tooltip" data-dojo-props="connectId:'TooltipButton2'">I am <strong>below</strong> the button</span></div> <button id="TooltipButton3" onmouseover="dijit.Tooltip.defaultPosition=['after','before']">Tooltip After</button><div class="dijitHidden"><span data-dojo-type="dijit.Tooltip" data-dojo-props="connectId:'TooltipButton3'">I am <strong>after</strong> the button</span></div> <button id="TooltipButton4" onmouseover="dijit.Tooltip.defaultPosition=['before','after']">Tooltip Before</button><div class="dijitHidden"><span data-dojo-type="dijit.Tooltip" data-dojo-props="connectId:'TooltipButton4'">I am <strong>before</strong> the button</span></div>
View the example of creating a tooltip in programming
// Add Tooltip of his picturenew Tooltip({    connectId: ["nameTip"],    label: "
View examples
Another example-work details

<ul>    <li><a href="http://www.imdb.com/title/tt0112573/" id="movieBraveheart">Braveheart</a></li>    <li><a href="http://www.imdb.com/title/tt0237534/" id="movieBrotherhood">Brotherhood of the Wolf</a></li>    <li><a href="http://www.imdb.com/title/tt0245844/" id="movieCristo">The Count of Monte Cristo</a></li></ul><div class="dijitHidden">    <div data-dojo-type="dijit.Tooltip" data-dojo-props="connectId:'movieBraveheart'">                <p style="width:400px;"><strong>Braveheart</strong><br />Braveheart is the partly historical, partly mythological, story of William Wallace, a Scottish common man who fights for his country's freedom from English rule around the end of the 13th century...</p>        <br style="clear:both;">    </div></div><div class="dijitHidden">    <div data-dojo-type="dijit.Tooltip" data-dojo-props="connectId:'movieBrotherhood'">                <p style="width:400px;"><strong>Brotherhood of the Wolf</strong><br />In 1765 something was stalking the mountains of central France. A 'beast' that pounced on humans and animals with terrible ferocity...</p>        <br style="clear:both;">    </div></div><div class="dijitHidden">    <div data-dojo-type="dijit.Tooltip" data-dojo-props="connectId:'movieCristo'">                <p style="width:400px;"><strong>The Count of Monte Cristo</strong><br />'The Count of Monte Cristo' is a remake of the Alexander Dumas tale by the same name. Dantes, a sailor who is falsely accused of treason by his best friend Fernand, who wants Dantes' girlfriend Mercedes for himself...</p>        <br style="clear:both;">    </div></div>
The basic tooltip control provides rich information expression features, but if you need a control to provide more functions, the dijit control will be a perfect choice!
When you need to get information from the user or provide a prompt about dialog, the browser provides the alert and confirm Methods native, but these are too dull. Fortunately, the dojo toolkit provides a good choice: dijit/dijit. Just like dijit/tooltiip, dijit/dijit allows HTML content to be included and a custom topic. The following is a dijit/dijit usage:
// Create a new instance of dijit/Dialogvar myDialog = new Dialog({    // The dialog's title    title: "The Dojo Toolkit",    // The dialog's content    content: "This is the dialog content.",    // Hard-code the dialog width    style: "width:200px;"});
An important factor about dijit/dijit is that the dijit instance is accumulated on a "stack" so that you can combine multiple dijit instances. Displaying dialogs are also backed up by an IFRAME so that they are ensured to always be "on Top" of other elements. Multiple dijit shares the same dijit/dialogunderlay instance. Important dijit/dijit attributes include:

  

 
   
HTML or text content contained in content-Dialog
 
   
Draggable-indicates whether the dialog can be dragged.
 
   
Href-if the dialog content is obtained by an Ajax call, href points to the path of the Content File.
 
   
Loadingmessage-the message displayed in the dialog when the Ajax content is still being loaded.
 
   
Open-returns true if the dialog instance is in the open state
 
   
Title-dialog name

  
Common dijit/dijit Methods

  

 
   
Hide-hide dialog and underlay
 
   
Refresh-if the dialog is Ajax-based, refresh the dialog content
 
   
Show-display dialog and underlay

  
Dijit/dialog also provides callback methods for dijit controls, such as onshow, onhide, onload, and onclick.
Dijit/dialog examples below are common examples of dijit/dijit: Example-use regulations
<script>    // Require the Dialog class    require(["dijit/registry", "dijit/Dialog"], function(registry) {        // Show the dialog        showDialog = function() {            registry.byId("terms").show();        }        // Hide the dialog        hideDialog = function() {            registry.byId("terms").hide();        }    });</script><button onclick="showDialog();">View Terms and Conditions</button> <div class="dijitHidden">    <div data-dojo-type="dijit.Dialog" style="width:600px;" data-dojo-props="title:'Terms and Conditions'" id="terms">        <p><strong>Please agree to the following terms and conditions:</strong></p>        <div style="height:160px;overflow-y:scroll;border:1px solid #769dc4;padding:0 10px;width:600px"><p>        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed suscipit massa. Aenean vel turpis tincidunt velit gravida venenatis. In iaculis urna non quam tincidunt elementum. Nunc pellentesque aliquam dui, ac facilisis massa sollicitudin et. Donec tincidunt vulputate ultrices. Duis eu risus ut ipsum auctor scelerisque non quis ante. Nam tempor lobortis justo, et rhoncus mauris cursus et. Mauris auctor congue lectus auctor ultrices. Aenean quis feugiat purus. Cras ornare vehicula tempus. Nunc placerat, lorem adipiscing condimentum sagittis, augue velit ornare odio, eget semper risus est et erat....        </p></div>             <button onclick="hideDialog();">I Agree</button>        <button onclick="alert('You must agree!');">I Don't Agree</button>    </div></div>
View the example dialog box Stack
<script>    // Require the Dialog class    require(["dijit/Dialog"], function(Dialog) {        // Create counter        var counter = 1;        // Create a new Dialog        createDialog = function(first) {            // Create a new dialog            var dialog = new Dialog({                // Dialog title                title: "New Dialog " + counter,                // Create Dialog content                content: (!first ? "I am a dialog on top of other dialogs" : "I am the bottom dialog") + "<br /><br /><button onclick='createDialog();'>Create another dialog.</button>"            });            dialog.show();            counter++;        }    });     </script><button onclick="createDialog(true);">Create New Dialog</button>
View examples
Ajax dialog box and black Underlay
<style>    /* colors the underlay black instead of white     * We're using '.claro .dijitDialogUnderlay' as our selector,     * to match the specificity in claro.css */    .claro .dijitDialogUnderlay { background:#000; }</style> <script>    // Require the Dialog class    require(["dijit/registry", "dojo/parser", "dijit/Dialog"], function(registry) {        // Show the dialog        showDialog = function() {            registry.byId("ajaxDialog").show();        }    });</script>     <button onclick="showDialog();">Load Ajax Dialog</button> <div class="dijitHidden">    <!-- dialog that gets its content via ajax, uses loading message -->    <div data-dojo-type="dijit.Dialog" style="width:600px;" data-dojo-props="title:'Ajax Dialog',href:'dialog-ajax.php',loadingMessage:'Loading dialog content...'" id="ajaxDialog"></div></div>
View examples
The dijit/tooltipdialogdijit tooltipdialog control integrates the advantages of tooltip and dialog, and creates an element that can obtain focus and rich pop-up content. The tooltipdialog control is often opened by other controls in the following form of pull dialog box, for example, by dijit/form/dropdownbutton. The difference between tooltip and tooltipdialog is that tooltipdialog remains open until you click an element other than this control. In this way, tooltip can contain clickable links and form elements. Dijit/tooltipdialog has the same attribute methods and events as tooltip and dialog. Dijit/tooltipdialog example drop-down button
<script>    // Require the Button, TooltipDialog, DropDownButton, and TextBox classes     require(["dijit/form/DropDownButton", "dijit/TooltipDialog", "dijit/form/TextBox", "dojo/parser"]);     </script><div data-dojo-type="dijit.form.DropDownButton">    <span>Login</span><!-- Text for the button -->    <!-- The dialog portion -->    <div data-dojo-type="dijit.TooltipDialog" id="ttDialog">        <strong><label for="email" style="display:inline-block;width:100px;">Email:</label></strong>        <div data-dojo-type="dijit.form.TextBox" id="email"></div>        <br />        <strong><label for="pass" style="display:inline-block;width:100px;">Password:</label></strong>        <div data-dojo-type="dijit.form.TextBox" id="pass"></div>        <br />        <button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:doAlert" type="submit">Submit</button>    </div></div>
When you need an interactive pop-up and do not want to use a complete dialog, tooltipdialog is the best choice. Conclusion The dojo toolkit not only makes it easier for you to complete basic interaction tasks, but also provides consistent, flexible, And customizable theme controls across browsers. The controls discussed in this article provide additional options for the basic functions inherent in the browser. Welcome to dijit tooltip, dialog and tooltipdialog to enrich your website!