Dojo 1.7 Dialog和ToolTip 教程

原文：http://dojotoolkit.org/documentation/tutorials/1.7/dialogs_tooltips/

原文作者：David Walsh

译者：Elaine Liu

Dojo 1.7 难度级别：初级

用户交互是构建富客户端网络应用的第一要素。浏览器提供了alert和对话框作为基本的用户交互方式，但这些基本的交互非常简陋并且不够灵活。因此，Dijit，这个Dojo工具包提供的用户界面框架，提供了由dijit/Tooltip, dijit/Dialog, 以及dijit/TooltipDialog等widget在内的一系列跨浏览器的，可扩展的，可定制主题的控件，来弥补了浏览器的基本交互功能存在的不足。在本教程中，你将会学习以上控件，包括使用范例以及相关细节。

了解Tooltips

原生的“Tooltip”是在浏览器内使用title属性创建DoM节点。这些Tooltip就像他们看起来那样简陋：不能控制显示时长，不能包含富文本，不同浏览器之间的呈现也很不一致。Dijit的dijit/Tooltip 类解决了以上所有问题：

允许在Tooltip内包含HTML内容
提供了控制Tooltip显示的位置和时长的方法
当浏览器大小变化时可以对Tootips进行重定位和大小调整
提供4中优雅美观的Tooltip显示主题
实现了可靠的跨浏览器的策略，允许其显示在Flash元素上
懒汉创建模式 - 只有当Tooltip必须显示的时候才创建Tooltip节点

使用dijit/Tooltip跟使用任何Dijit控件的步骤一样：在页面添加所需要的样式单，给body节点添加相应的css类名，并且请求该控件的JavaScript类

<head>
<!-- use the "claro" theme -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css">
<!-- load dojo and provide config via data attribute -->
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad:true"></script>
<script>
    // Load the Tooltip widget class
    require(["dijit/Tooltip",  "dojo/parser", "dojo/domReady!"], function(Tooltip){
 
    });
</script>
</head>
<!-- add the "claro" CSS class to the body -->
<body class="claro">
 
</body>

当主题和控件类都加载好之后，可以使用如下编程方式来创建一个Tooltip

// Create a new Tooltip
var 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"]
});

重要的dijit/Tooltip属性包括：

ConnectId - 一个ID或者DOM节点数组，用于存放Tooltip将要连接的对象
label - 置于Tooltip内部的HTML或者文本内容
showDelay - Tooltip显示的延时

常用的dijit/Tooltip方法包括：

addTarget - 如果还未连接目标，则可调用此方法添加连接目标
close - 关闭Tooltip实例，即将其置为不可见
open - 打开Tooltip实例，即将其置为可见
removeTarget - 将某个节点从Tooltip连接目标队列中移除
set - 允许改变属性值，多是Tooltip的内容，比如(myTip.set("label","New content!"))

dijit/Tooltip对象还有一个可以配置的defaultPosition队列属性，可用于控制Tooltip实例显示位置的顺序。这个队列可以根据开发者的需要而改变。

Tooltip.defaultPosition = ["above", "below", "after", "before"];
注意：改变Tooltip.defaultPosition将适用于所有的Tooltip实例

dijit/Tooltip使用示例

下面是dijit/Tooltip最普通的使用例子

声明式创建Tooltip

<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>

查看示例

编程式创建Tooltip

// Add Tooltip of his picture
new Tooltip({
    connectId: ["nameTip"],
    label: "<img src='rod-stewart.jpg' alt='Rod Stewart' width='300' height='404' />"
});
// Add Tooltip of North London
new Tooltip({
    connectId: ["londonTip"],
    label: "<img src='emirates-stadium.jpg' alt='The Emirates in London' width='400' height='267' />"
});
//Add Tooltip of record
new Tooltip({
    connectId: ["recordsTip"],
    label: "<img src='every-picture.jpg' alt='Every Picture Tells a Story' width='200' height='197' />"
});
// Add custom Tooltip
var myTip = new Tooltip({
    connectId: ["hoverLink"],
    label: "Don't I look funky?",
    "class": "customTip"
});

查看示例

另一个示例——作品细节

<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'">
        <img style="width:100px; height:133px; display:block; float:left; margin-right:10px;" src="../images/braveheart.jpg" />
        <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'">
        <img style="width:100px; height:133px; display:block; float:left; margin-right:10px;" src="../images/brotherhood.jpg" />
        <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'">
        <img style="width:100px; height:133px; display:block; float:left; margin-right:10px;" src="../images/count.jpg" />
        <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>

基本的Tooltip控件提供了丰富的信息表达特性，但如果你需要一个控件能够提供更多的功能，那么Dijit的Dialog控件将是一个完美的选择！

了解Dialog

当需要从用户这里得到信息，或者提供一个提示，浏览器原生的提供了alert和confirm方法，但是这些都太呆板简陋了。幸运的是，Dojo Toolkit提供了一个很好的选择：dijit/Dialog。就像dijit/Tooltiip一样，dijit/Dialog允许包含HTML内容并且定制主题。下面是一个dijit/Dialog的用法：

// Create a new instance of dijit/Dialog
var 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;"
});

一个关于dijit/Dialog的重要因素是Dialog的实例是累加在一个“栈”上面的，这样你可以将多个Dialog实例叠加在一起。Displaying dialogs are also backed up by an iFrame so that they are ensured to always be "on top" of other elements. 多个Dialog共享同一个dijit/DialogUnderlay实例。

重要的dijit/Dialog属性包括：

content - Dialog中包含的HTML或者文本内容
draggable - 表示这个Dialog是否可以拖动
href - 如果Dialog的内容是由一个Ajax调用得到，则href指向内容文件的路径
loadingMessage - 当Ajax内容还在加载的时候，Dialog中显示的消息。
open - 返回true如果该Dialog实例正处于打开状态
title - Dialog的名称

常用的dijit/Dialog方法

hide - 隐藏dialog和underlay
refresh - 如果该Dialog是基于Ajax的，刷新Dialog的内容
show - 显示dialog和underlay

dijit/Dialog同时还提供了Dijit 控件具有的callback方法，例如onShow, onHide, onLoad, onClick等等。

dijit/Dialog示例

以下是dijit/Dialog常见的例子：

示例——使用条例

<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>

查看示例

对话框栈

<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>

查看示例

Ajax对话框与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>

查看示例

了解dijit/TooltipDialog

Dijit TooltipDialog 控件融合了Tooltip和Dialog的优点，创建了一个可以获得focus的，可包含丰富弹出内容的元素。TooltipDialog控件经常以下拉对话框的形式由其他的控件触发打开，比如由dijit/form/DropDownButton打开。Tooltip和TooltipDialog的区别在于TooltipDialog可以一直停留保持打开状态直至用户点击该控件以外的元素才关闭。这样Tooltip就可以包含可点击的链接，表单元素等。

dijit/TooltipDialog具有和Tooltip和Dialog相同的属性方法和事件。

dijit/TooltipDialog示例

下拉按钮

<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>

查看示例

在你需要一个可交互的弹出内容，又不想使用一个完整的Dialog时，TooltipDialog是最好不过的选择。

结论

Dojo工具包不仅使你能够更轻松的完成基本的交互任务，而且提供了跨浏览器一致的，灵活的，可定制主题的控件。本文讨论的控件提供了是浏览器自带的基本功能额外的选择。欢迎使用dijit的Tooltip,Dialog以及TooltipDialog来丰富你的网站！

posted on 2012-05-29 10:11 springside5 阅读(1203) 评论(0) 编辑收藏举报