iOS6Alert.js 演示

基本演示

<点击这些按钮可以预览效果 
$("body").ios6alert({
	title : "jq22.com",
	content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel eros sit amet nunc molestie varius id in lacus. Praesent at tincidunt dolor. In ac odio tincidunt, ultrices arcu et, consectetur ligula."
});

无标题

$("body").ios6alert({
	content : "无标题对话框实例"
});

对话框类型

$("body").ios6alert({
	title : "jq22.com",
	content : "默认对话框",
	type : 0
});

$("body").ios6alert({
	title : "jq22.com",
	content : "点击确定或取消",
	type : 1
});

$("body").ios6alert({
	title : "jq22.com",
	content : "确定要删除这条消息吗？",
	type : 2
});

声音

$("body").ios6alert({
	title : "jq22.com",
	content : "带有声音的提示框\n\n此功能不支持IE8及更低版本的浏览器",
	sound : "sounds/Complete.mp3"
});

自动关闭

$("body").ios6alert({
	title : "jq22.com",
	content : "此对话框将在3秒后自动关闭",
	autoClose : 3000
});

禁用键盘操作

$("body").ios6alert({
	title : "jq22.com",
	content : "此默认插件支持的键盘操作：\n\n在默认类型的对话框下按“Esc、Y、空格、Enter”均可退出\n\n在“确定/取消”类型的对话框下按“Y、空格、Enter”相当于Yes，按“Esc、N”相当于No",
	pressKeys : false
});

自定义按钮文字

$("body").ios6alert({
	title : "jq22.com",
	content : "自定义按钮文字实例1",
	buttonText : {
		Yes : "Continue"
	}
});

$("body").ios6alert({
	title : "jq22.com",
	content : "自定义按钮文字实例2",
	type : 1,
	buttonText : {
		Yes : "All Right",
		No : "No, Thanks"
	}
});

$("body").ios6alert({
	title : "jq22.com",
	content : "Are you sure to uninstall this application?",
	type : 2,
	buttonText : {
		Delete : "Uninstall",
		No : "Not now"
	}
});

回调函数

$("body").ios6alert({
	title : "jq22.com",
	content : "点击“确定”或“取消”后，插件将执行不同的脚本。",
	type : 1,
	onClickYes : function(){
		alert("点击了“确定”");
	},
	onClickNo : function(){
		alert("点击了“取消”");
	}
});

$("body").ios6alert({
	title : "jq22.com",
	content : "点击“删除”或“取消”后，插件将执行不同的脚本。\n\n“删除”按钮相当于“确定”。",
	type : 2,
	onClickYes : function(){
		alert("点击了“删除”");
	},
	onClickNo : function(){
		alert("点击了“取消”");
	}
});

$("body").ios6alert({
	title : "jq22.com",
	content : "只要对话框被关闭，事件就会被执行。",
	type : 1,
	onClose : function(){
		alert("关闭事件测试");
	}
});

连续事件处理实例

for(i = 1; i <= 5; i ++){
	$("body").ios6alert({
		title : "jq22.com",
		content : "第" + i + "条消息"
	});
}

通过附加Class功能来自定义样式

$("body").ios6alert({
	title : "jq22.com",
	content : "对话框自定义样式演示1",
	addClass : "myalertstyle1"
});
点击此处展开/隐藏CSS部分 
.ios6alert.myalertstyle1{
	color:#0FF;
}
.ios6alert.myalertstyle1 .side_top .alt_titlebar{
	font-size:20px;
	color:#0F6;
}
.ios6alert.myalertstyle1 .alt_content{
	font-size:18px;
}
.ios6alert.myalertstyle1 .alt_button .alt_button_bg{
	color:#06F;
	font-size:20px;
}

$("body").ios6alert({
	title : "jq22.com",
	content : "对话框自定义样式演示2",
	type : 1,
	addClass : "myalertstyle2"
});
点击此处展开/隐藏CSS部分 
.ios6alert.myalertstyle2{
	color:#0F0;
}
.ios6alert.myalertstyle2 .side_top{
	background-image:url(../images/myStyle_Background_side.png);
}
.ios6alert.myalertstyle2 .side_bottom{
	background-image:url(../images/myStyle_Background_side.png);
}
.ios6alert.myalertstyle2 .alt_bg{
	background-image:url(../images/myStyle_Background.png);
}
.ios6alert.myalertstyle2 .alt_button.alt_button_def .alt_button_bg{
	color:#F00;
}
.ios6alert.myalertstyle2 .alt_button.alt_button_def:active .alt_button_bg{
	background-image:url(../images/myStyle_ButtonDefPress_bg.png) !important;
}
.ios6alert.myalertstyle2 .alt_button.alt_button_def:active .alt_button_side_left, .ios6alert.myalertstyle2 .alt_button.alt_button_def:active .alt_button_side_right{
	background-image:url(../images/myStyle_ButtonDefPress_side.png);
}

HTML

$("body").ios6alert({
	title : "还可以在对话框上使用<i>HTML</i>",
	content : "HTML对话框演示<input value='文本框'><select><option>下拉选择框</option></select>\n<input type='button' value='按钮'>\n<font color='#FF0000'>颜色</font>",
	html : true
});
如果不声明HTML所有字符将直接显示，例如：
点击这里展开/隐藏未显示的部分 
$("body").ios6alert({
	title : "还可以在对话框上使用<i>HTML</i>",
	content : "HTML对话框演示<input value='文本框'><select><option>下拉选择框</option></select>\n<input type='button' value='按钮'>\n<font color='#FF0000'>颜色</font>"
});

$("body").ios6alert({
	title : "<img class=\"alt_icon\" src=\"images/htmldemo_icon.png\">jq22.com",
	content : "此示例运用HTML在标题上增加一个图标，图标可以自定义CSS样式。",
	html : true
});

选项说明

选项名称 默认值 描述
title   对话框的标题。
content   对话框的内容。（消息）
addClass   附加到对话框元素上的Class，可用于自定义样式等，多个Class请用空格分隔。
type 0 对话框种类（0-默认； 1-确定/取消； 2-删除/取消）
html false 是否把标题和内容作为HTML添加到对话框元素上。
sound   对话框弹出时播放的声音。（指定音频文件的路径，不支持IE8及更低版本的浏览器）
autoClose 0 自动关闭的超时时间。（单位：毫秒）
pressKeys true 是否接受键盘操作。
buttonText {
Yes : "OK",
No : "Cancel",
Delete : "Delete"
}		 显示在按钮上的文字。
Yes：确定按钮
No：取消按钮
Delete：删除按钮
onClickYes   回调函数，点击确定（或删除）按钮时执行的脚本。
onClickNo   回调函数，点击取消按钮时执行的脚本。
onClose   回调函数，对话框关闭后执行的脚本。

用法

  1. 首先，在页面上引入jQuery，然后引入ios6alert.js和ios6alert.css。（或压缩版ios6alert.min.js）
    2. 其中，ios6alert.js是插件主要部分的js，ios6alert.css中定义的是对话框的默认样式，可以根据需要进行编辑。
    对话框的HTML结构是通过js动态添加到页面上的，所以不需要在页面上额外准备内容。
    点击这里展开/隐藏默认所需图片文件列表
    images/iOS6AlertBackground_bg.png 对话框背景图像
    images/iOS6AlertBackground_side.png 对话框上下边缘图像
    images/iOS6AlertButton_bg.png 确定按钮背景图像
    images/iOS6AlertButton_side.png 所有类型按钮左右边缘图像
    images/iOS6AlertButtonDef_bg.png 取消按钮背景图像
    images/iOS6AlertButtonDefPress_bg.png 取消按钮按下时的背景图像
    images/iOS6AlertButtonDel_bg.png 删除按钮背景图像
    images/iOS6AlertButtonDelPress_bg.png 删除按钮按下时的背景图像
    images/iOS6AlertButtonPress_bg.png 确定按钮按下时的背景图像
    images/backgroundsize.min.htc 针对IE7和IE8的CSS background-size属性支持（非必需）

    以上图片的位置如有变动，请到ios6alert.css中修改相应路径。
  2. 只需要运行$("body").ios6alert(选项);即可，选项说明和示例在上文已经列出。
兼容性：IE7+（最佳效果需IE10+） Chrome Firefox Opera…
回顶部