1 jQuery UI
- jQueryUI是一个定制好界面样式（css）的一个js框架,依赖jquery.js文件
- jQuery UI包含了许多维持状态的小部件（Widget），因此，它与典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件（Widget）使用相同的模式，所以，只要您学会使用其中一个，您就知道如何使用其他的小部件（Widget）。
- jQuery UI 主要分为3个部分：交互、微件和效果库。
1.1 使用方式
- jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>jQuery UI</title>
<script type="text/javascript" src="./js/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="./js/jquery-ui-1.12.1/jquery-ui.css">
<script type="text/javascript" src="./js/jquery-ui-1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
// {}-相当于对象
$("#birthday").datepicker({dateFormat: 'yy-mm-dd'});
});
</script>
</head>
<body>
生日：<input type="text" id="birthday" name="birthday">
</body>
</html>
2 jQuery UI 对话框控件
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>jQuery UI</title>
<script type="text/javascript" src="./js/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="./js/jquery-ui-1.12.1/jquery-ui.css">
<script type="text/javascript" src="./js/jquery-ui-1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
// 按钮参数
var params ={buttons:[
{text:'确定',click:function () {
console.log('确定');
}},
{text:'取消',click:function () {
console.log('取消');
}}]};
$("#dialog").dialog(params);
$("#dialog").dialog('close');
$('#delete').click(function () {
$("#dialog").dialog();
});
});
</script>
</head>
<body>
<div id="dialog" title="删除提示">
<p>确定要删除？</p>
</div>
<button id="delete">删除</button>
</body>
</html>
3 WEB-INF里jsp访问静态资源的注意事项
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
