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();
                       }
                   });
               });
           });

看看效果怎么样(还没有做美工)

    

  

posted @   wangyan9110  阅读(4386)  评论(1编辑  收藏  举报
编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示