JQueryUI控件日期选择器

最新推荐文章于 2024-05-11 09:56:24 发布

一只极度渴望成长的Giser

最新推荐文章于 2024-05-11 09:56:24 发布

阅读量160

点赞数

分类专栏： Javascript、JQuery练习文章标签： JQueryUI控件日期选择器

本文链接：https://blog.csdn.net/qq_32077521/article/details/100297710

版权

Javascript、JQuery练习专栏收录该内容

69 篇文章 1 订阅

订阅专栏


<!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>

一只极度渴望成长的Giser

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JQueryUI控件日期选择器

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <link...
复制链接

扫一扫

专栏目录