JSBalloon：DHTML 应用程序的非模态反馈机制

• 下载源文件和演示项目 - 19.2 KB
• 下载文档 - 17.7 KB

引言

在开发一个大型的内联网应用程序时，我发现验证错误、保存确认消息和其他用户反馈事件导致我不得不弹出和响应大量的模态对话框。这个DHTML对象提供了一个类似微软托盘气泡的弹出气泡。虽然我同意弹出窗口在Web环境中大多是一种滋扰，但这种富工具提示的形式可能非常有助于简化用户体验。

JSBalloon的一个特性，以autoHide属性的形式，例如，它能够在用户鼠标移动到工具提示上时立即隐藏它，从而迅速允许他们继续工作。另一个优点是能够在气泡中放置HTML代码和表单元素，从而为用户提供可选的功能，这些功能可以很容易地被忽略或自行隐藏。然而，这项练习的主要目的是尽量减少用户需要进行的点击和鼠标移动次数。

背景

JSBalloon 并不打算替代其他优秀的 DHTML (JavaScript) 弹出窗口库，例如 Jwin Popup Library 或 overLIB。相反，它旨在非常简单地增强 DHTML 环境中的工具提示功能。请注意，该代码经过测试，只能在 Microsoft Internet Explorer 6 中运行。此外，它是为固定屏幕创建的。

Using the Code

将 JSBalloon.js 文件复制到您的 Web 服务器后，您唯一需要做的就是使用它所在的完整路径更新 JSBalloonPath 变量。这是定位图像和图标所必需的。

在实例化新对象时，请确保您的 JSBalloon 变量是全局作用域的，并且每个对象仅实例化一次

<script language="JavaScript">

var b4=new JSBalloon({ width:150, 
                       autoAway:false, 
                       autoHide:false,
                       showCloseBox:true});

创建对象后，您可以使用 Show 方法显示气泡，并使用 Hide 方法隐藏它。

以下示例演示如何显示气泡。请注意，B3 是页面上按钮的 ID。锚点是可选的，您可以使用 top 和 left 命名参数将气泡放置在页面上的任何位置。

b4.Show({title:'JavaScript Balloon Example',
    message:'This is an example of a JSBalloon object. '+
        'It\'s primary application is to provide ' +
        'a modeless feedback to DHTML applications.',
    anchor:B3});

您还可以混合和匹配参数和属性

var bl=new JSBalloon({ width:300});

function testBalloon()
{        
    bl.autoHide=false;
    bl.transShow=true;
    bl.autoAway=false;
    bl.showCloseBox=true;
    bl.transShowFilter="progid:DXImageTransform.Microsoft"+
        ".Stretch(stretchstyle=SPIN)";
    bl.transHideFilter="progid:DXImageTransform.Microsoft"+
        ".Slide(slidestyle=HIDE,Bands=1)";
    bl.Show({title:'JavaScript Balloon Example',
        message:'This is an example of a JSBalloon object. ' + 
                'It\'s primary application is to provide a '+
            'modeless feedback to DHTML applications.',
        anchor:B3, icon:'Info'});
}

并隐藏

b4.Hide();

请注意，如果 autoHide 为 true，则不必调用 Hide。此外，如果 autoAway 为 true，则当用户将鼠标移动到气泡上时，将调用 Hide 方法。

请查看包含的源代码文档，了解所有方法和属性。

历史

• 2005 年 9 月 7 日：初始版本