JQuery ui 实现类似于confirm的功能
今天在改进参加一个全国比赛的项目作品时,发现使用了大量的alert和comfirm,于是自己想实现了弹出一个图形化的对话框,这样会变的非常友好,因为时间不多,直接黏贴代码,分享一下
//当页面加载完毕时添加一个隐藏的div
$(function(){
var boardDiv = "<div id='message' style='display:none;'><span id='spanmessage'></span></div>";
$(document.body).append(boardDiv);
});
//只是提示信息alert
function message(text) {
$("#spanmessage").text(text);
$("#message").dialog({
title:"企业信息管理系统,提示您",
modal: true,
buttons: {
"确定": function() {
$(this).dialog("close");
}
}
});
}
//类似于confirm的功能
//说明callback是如果要选择是,要执行的方法
function queren(text, callback) {
$("#spanmessage").text(text);
$("#message").dialog({
title: "企业信息管理系统,提示您",
modal: true,
resizable: false,
buttons: {
"否": function() {
$(this).dialog("close");
},
"是": function() {
callback.call();//方法回调
$(this).dialog("close");
}
}
});
}
使用示例(一个静态删除功能的示例)
1、先引用JQuery库如( <script src="http://www.cnblogs.com/js/jquery-1.4.2.js" type="text/javascript"></script>)
2、在引用JQuery ui库
<link href="../css/css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet"
type="text/css" />
<script src="../js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
3、写处理代码
$("a[delete=true]").click(function() {
var id = $(this).attr("curId");
queren("确认要删除吗?", function() {
$.post("productDel.ashx", { "action": "delete", "id": id }, function(data, status) {
if (data == "ok") {
message("删除成功!");
$("a[curId='" + id + "']").parent().parent().parent().parent().remove();
}
});
});
});
看看效果怎么样(还没有做美工)

----转载请注明出处http://www.cnblogs.com/JerryWang1991/ 谢谢!
浙公网安备 33010602011771号