今天给大家介绍一个非常好用的前端插件jQuery UI。
jQuery UI是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。
下面是一个以jQuery UI实现的弹出登录框功能，代码非常简单。
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/jquery-ui.css">
</head>
<body>
<h1>jQueryUI：Widgets —— Dialog</h1>
<h3>弹出式对话框</h3>
<a id="btn-login" class="btn btn-success" href="#">我要登录</a>
<div id="dialog-login" title="用户登录">
<form action="">
用户名：<input type="text"><br>
密码名：<input type="password"><br>
</form>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script src="JS/jquery-ui.js"></script>
<script>
var $dialog=$("#dialog-login")
$dialog.dialog({
autoOpen:false,
modal:false,
show:{effect:"blind",duration:1000},
hide:{effect:"explode",duration:1000},
buttons:{
"登录":()=>setTimeout(()=>{
alert("登录成功");
$dialog.dialog("close");
},1000),
"取消":()=>$dialog.dialog("close")
},
close(){
$("form").get(0).reset()
}
});
$("#btn-login").click(()=>{
$dialog.dialog("open")
})
</script>
</body>
</html>