hiAlerts 使用说明示例

写在最前

本脚本插件是根据 jquery.alerts 改进得来,包括了常用的几种提示框,
兼容IE6+,及firefox,opera等流行浏览器,
基于原插件易用和可控能力强的基础上,
添加了 渐变提示效果
添加了 hiBoxhiOverAlert 方法,(添加了不少代码,不过压缩后才6k,还好了),
对提示框的样式进行了简单的重定义, 用样式定义了圆角,当然修改起来会麻烦些,
不喜欢或者修改起来觉得费劲的朋友可以修改样式(#ctl, #cbl, #ctr, #cbr{dispaly:none;})来删除圆角效果

当然这个插件最大的好处还是可以用样式表能定义出各式各样的提示框,
如果你够熟悉样式的话,相信这个插件对你改善提示框及弹出框能有很好的帮助。
如下是示例和代码调用方法,详细请看本html源码,
注:如果提示框不需要拖动效果可以不带 jquery.ui.draggable.js

译者及改进: 不羁虫

样例

hiAlert
hiAlert('这是一个常见的警示框,就如一个问好hi', '请注意');

hiConfirm

hiConfirm('你确认此操作吗?', '确认框', function(r) {
    hiOverAlert('你的反馈是: ' + r);
});

hiPrompt
hiPrompt('请填写:', '默认值', '输入框, function(r) {
	if( r ) alert('你填入的内容是“' + r+'”');
});

hiBox
hiBox('#objBox', '重要提示',400,'','','.a_close');

hiBox参数:
hiBox(obj,title,w,h,submit,cancel,callback)
obj: 被指定打开的对象(对象唯一),用css选择器来对应,如:#openBox, .overP
title: 标题,不设置,默认为“提示”
w: hiBox宽度,不设置为auto
h: hiBox宽度,不设置为auto
submit: 可设置内容中的对象为"submit",如果有callback,点此返回callback行为
cancel: 可设置内容中的对象为"cancel",对象方式如'obj'
callback: 设置返回函数

hiOverAlert
hiOverAlert('我默认提示3秒钟');

hiOverAlert('我自定义提示1.5秒钟',1500);

$.alerts.dialogClass = "over_3";
hiOverAlert('我自定义提示< strong>2秒钟< /strong>',2000);
$.alerts.dialogClass = null;

其他示例

可使用HTML标签
hiAlert('你可以使用HTML标签, 例如 < strong>bold< /strong>, < em>italics< /em>, 
和 < u>underline< /u>!'); (去除标签空格)

可以定义添加class,达到通过不同样式,来丰富提示界面
通过给 $.alerts.dialogClass  赋值新的class ,
如:$.alerts.dialogClass = 'style_1'; 
你可以通过对新的class如: 
#popup_container.style_1 #popup_title 进行新的样式定义来赋予hiAlerts系列新的样式,
使你的提示框可以在一个页面里有更多表现

这是一段用了测试的文字,是为了应用hiBox而放置在页面底部的, hiAlertsie6表现还不是很好,如果默认没有宽度的话,宽度将会是css里默认的 320px尤其是对 hiBox来讲320px可能是不太美观的,所以应用时能设置宽度最好带上宽度,高度可以自适应。当然如果你设置了高度,而文档超出了高度,会自动出现横向及纵向滚动条
关闭