JSBalloon: 提升DHTML应用用户体验的模态对话框

在开发大型内部网应用程序时,发现在验证错误、保存确认消息和其他用户反馈事件之间,需要弹出和响应大量的模态对话框。JSBalloon提供了一个类似于微软系统托盘气球的弹出窗口。虽然在网络环境中弹出窗口通常很烦人,但这种丰富的工具提示可能非常有助于简化用户体验

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

JSBalloon并不是要替代其他一些优秀的DHTML(JavaScript)弹出库,例如Jwin Popup Library或overLIB。相反,它旨在作为DHTML环境中工具提示功能的非常简单的增强。请注意,代码已在Microsoft Internet Explorer 6中进行了测试,并且是为固定屏幕创建的。

使用代码

将JSBalloon.js文件复制到web服务器后,需要更新JSBalloonPath变量,以指向它所在的完整路径。这是为了定位图像和图标。

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

<script language="JavaScript"> var b4 = new JSBalloon({ width: 150, autoAway: false, autoHide: false, showCloseBox: true }); </script>

创建对象后,可以使用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方法将被调用。

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485