JQuery ui 美化confirm的代码
2013-09-05 20:24
417 查看
今天在改进参加一个全国比赛的项目作品时,发现使用了大量的alert和comfirm,于是自己想实现了弹出一个图形化的对话框,这样会变的非常友好,因为时间不多,直接黏贴代码,分享一下view sourceprint? //当页面加载完毕时添加一个隐藏的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/网页特效"></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、写处理代码view sourceprint? $("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(); } }); }); }); 看看效果怎么样(还没有做美工)
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015034/ce28deb2251a9b0ef9c66a05ff0ae4b3.gif)
type="text/css" /><script src="../js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>3、写处理代码view sourceprint? $("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(); } }); }); }); 看看效果怎么样(还没有做美工)
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015034/ce28deb2251a9b0ef9c66a05ff0ae4b3.gif)
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015034/c9d52f4a1adf3556884ec131b6a9f094.gif)
相关文章推荐
- 美化Visual Studio代码编辑器的字体,使中文和英文使用不同的字体
- C++主题年技巧积累#1——UltraEdit的代码美化
- [置顶] 建议53:用状态模式美化代码,关于python-state工具包的理解
- 巧用JBuilderX代码美化工具
- 一堆纯代码美化的页面元素,效果请点运行查看(转)
- jQuery ui插件的使用方法代码实例
- jQuery星级评论表单美化代码
- Java的代码美化工具
- CSS Beautify – 方便的在线 CSS 代码美化工具
- C++主题年技巧积累#1——UltraEdit的代码美化
- C++主题年技巧积累#1——UltraEdit的代码美化
- asp.net c#后台页代码 如何使用confirm这样的函数,并获得其bool返回值?
- editplus配置笔记(新建文件模板、代码美化、PHP手册、函数自动完成)
- 利用atom-beautify来美化代码
- 美化js系统函数alert,confirm,prompt,并实现lightbox效果
- HTML/CSS/Javascript代码在线压缩、格式化(美化)工具
- 浅谈javascript alert和confirm的美化
- C, C++, C#, ObjectiveC, D, Java, Pawn and VALA 代码格式化(美化) (uncrustify)
- C++主题年技巧积累#1——UltraEdit的代码美化
- tuzicms美化input(file)浏览按钮代码