封装JQuery UI Dialog

以下内容摘自网络，版权归原作者所有，本文旨在记录相关信息跟用法，方便自己查阅。

JQuery代码：

 1 function Alert_Msg(click_id,msg){
 2         $('#AlertMsg').dialog({
 3                autoOpen: false,
 4                width: 300,
 5                height: 200,
 6                modal: true,
 7                position: 'center',
 8                buttons: {
 9                    "确定": function() {
10                              $(this).dialog("close");
11                            }
12                }
13         }).dialog('open');
14       $('#AlertMsgBody').html(msg);
15       
16     }
17    
18    function Confirm_Msg(click_id,msg){
19        $('#ConfirmMsg').dialog({
20                autoOpen: false,
21                width: 300,
22                height: 200,
23                modal: true,
24                position: 'center',
25                buttons: {
26                    "确定": function() {
27                                 eval($("#"+click_id).val());
28                                 $(this).dialog('close');
29                            
30                            },
31                    "取消": function() {
32                                 $(this).dialog('close');
33                            }              
34                }
35        }).dialog('open');
36       $('#ConfirmMsgBody').html(msg);
37     }
38 
39     function ShowMsg(click_id,msg, Msg_Type) {
40          if (Msg_Type == "Alert_Msg") {
41              Alert_Msg(click_id,msg);
42          }
43          else if(Msg_Type=="Confirm_Msg") {
44              Confirm_Msg(click_id,msg);
45          }
46      }

前台调用：

1 <script type="text/javascript">
2          $(function(){
3              //触发JQuery UI Confirm            
4              $("#BTN_DELETE").click(function(){
5                 ShowMsg('HID_DELETE','确定删除？','Confirm_Msg');
6                 return false;
7              });
8          });
9     </script>

HTML代码：

 1 <div id="AlertMsg" title="信息确认">
 2         <p id="AlertMsgBody">
 3         </p>
 4 </div>
 5 <div id="ConfirmMsg" title="信息确认">
 6         <p id="ConfirmMsgBody">
 7         </p>
 8 </div>
 9 
10 <asp:Button ID="BTN_DELETE"  runat="server" Text="删除" OnClick="BTN_DELETE_Click" />
11  <input type="hidden" id="HID_DELETE" runat="server" />

后台代码：

1 protected void Page_Load(object sender, EventArgs e)
2         {
3             HID_DELETE.Value = Page.ClientScript.GetPostBackEventReference(BTN_DELETE,string.Empty);
4         }

以上代码是根据我自己的需求进行整理的

参考文章：http://www.cnblogs.com/hhq80/archive/2009/12/03/1615821.html (另外有部分代码来自网络)

posted on 2012-04-06 10:11 Mr.ch 阅读(332) 评论(0) 收藏举报