<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<link href="JQuery/jquery-ui-1.12.1.custom/jquery-ui.css" rel="stylesheet" />
<script src="JQuery/jquery-2.0.0.js" type="text/javascript"></script>
<script src="JQuery/jquery-ui-1.12.1.custom/jquery-ui.js" type="text/javascript"></script>
</head>
<body>
<style type="text/css">
li {
margin-top:10px;
}
</style>
<!-- 日期选择器只需要在页面上提供一个文本框即可 -->
请选择日期:<input id="txtDate" type="text"/>
<!-- 折叠面板 -->
<div style="width:500px">
<div id="accordionDiv">
<p>第一部分</p>
<div>
<ul>
<li>这是第一部分的内容</li>
<li>这是第一部分的内容</li>
<li>这是第一部分的内容</li>
<li>这是第一部分的内容</li>
</ul>
</div>
<p>第二部分</p>
<div>
<ul>
<li>这是第二部分的内容</li>
<li>这是第二部分的内容</li>
<li>这是第二部分的内容</li>
<li>这是第二部分的内容</li>
</ul>
</div>
<p>第三部分</p>
<div>
<ul>
<li>这是第三部分的内容</li>
<li>这是第三部分的内容</li>
<li>这是第三部分的内容</li>
<li>这是第三部分的内容</li>
</ul>
</div>
</div>
</div>
<!-- 对话框 -->
<div id="dialogDiv" title="这是一个简单的对话框">
<p>这是对话框里边的内容</p>
</div>
<input type="button" id="btnShowDialog" value="打开对话框"/>
<script type="text/javascript">
$(function () {
//调用datepicker()方法来绑定日期选择面板
$("#txtDate").datepicker();
//选中总的div,调用accordion()方法即可实现折叠面板功能
$("#accordionDiv").accordion();
//调用dialog()方法绑定对话框
$("#dialogDiv").dialog({
title:"这是对话框的标题",
autoOpen: false,
show: "blind",
hide: "explode",
buttons: {
"OK": function () {
$("#dialogDiv").dialog('close');//调用close方法关闭对话框
}
}
});
//单击按钮打开对话框
$("#btnShowDialog").click(function () {
$("#dialogDiv").dialog('open');//调用open方法打开对话框
$("#dialogDiv").dialog({
modal:true//modal属性设置对话框后遮罩一层灰纱
})
});
});
</script>
</body>
</html>
JQueryUI控件日期选择器
最新推荐文章于 2024-08-15 07:30:00 发布