Jquery UI 封装 Alert框
msyndra 2011-10-13
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="gbk">
<title>jQueryUIDialog-Modalconfirmation</title>
<linkrel="stylesheet"href="../../themes/base/jquery.ui.all.css">
<scriptsrc="../../jquery-1.6.2.js"></script>
<scriptsrc="../../external/jquery.bgiframe-2.1.2.js"></script>
<scriptsrc="../../ui/jquery.ui.core.js"></script>
<scriptsrc="../../ui/jquery.ui.widget.js"></script>
<scriptsrc="../../ui/jquery.ui.mouse.js"></script>
<scriptsrc="../../ui/jquery.ui.button.js"></script>
<scriptsrc="../../ui/jquery.ui.draggable.js"></script>
<scriptsrc="../../ui/jquery.ui.position.js"></script>
<scriptsrc="../../ui/jquery.ui.dialog.js"></script>
<linkrel="stylesheet"href="../demos.css">
<script>
$(function(){
//aworkaroundforaflawinthedemosystem(http://dev.jqueryui.com/ticket/4375),ignore!
$("#dialog:ui-dialog").dialog("destroy");
$("#dialog-confirm").dialog({
resizable:false,
height:140,
modal:true,
buttons:{
"确定":function(){
alert("ok");
$(this).dialog("close");
},
'取消':function(){
alert("cancel");
$(this).dialog("close");
}
}
});
});
</script>
</head>
<body><div class="demo">
<div id="dialog-confirm" title="Empty the recycle bin?">
<p><spanclass="ui-iconui-icon-alert"style="float:left;margin:07px20px0;"></span>Theseitemswillbepermanentlydeletedandcannotberecovered.Areyousure?</p>
</div>
</div><!-- End demo -->
</body>
</html>
