jQuery使用之（三）

最新推荐文章于 2024-07-15 11:27:32 发布

猫爷001

最新推荐文章于 2024-07-15 11:27:32 发布

阅读量459

点赞数

分类专栏： jQuery 文章标签： jQuery my97 my97 datepicker

本文链接：https://blog.csdn.net/maoye198602102339/article/details/83508753

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jQuery 的插件

一，jQuery UI

jQuery官网：https://jqueryui.com/

jQuery中文网：http://www.jqueryui.org.cn/

jQuery学习网：http://www.runoob.com/jqueryui/jqueryui-use.html

下面是一个对话框的应用例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css">
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.theme.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script>
        $(function () {
            $("#mydiv").dialog(
                {
                    autoOpen:false,
                    buttons:[
                        {
                            text:"确认提交",
                            click:function () {
                                $("#mydiv").dialog("close");
                            }
                        },
                        {
                            text:"返回修改",
                            click:function () {
                                $("#mydiv").dialog("close");
                            }
                        }
                    ]
                }
                );
            $("#btn").bind("click",function () {
               var  userNmae = $("#userNmae").val();
               var  userAge = $("#userAge").val();
               var  userSex = $("#userSex").val();
               console.log(userNmae)
               $("#mydiv div:first").html("用户姓名: " + userNmae);
                $("#mydiv div:eq(1)").html("用户年龄：" + userAge);
                $("#mydiv div:last").html("用户性别：" + userSex);
               $("#mydiv").dialog("open");
            });
        });
    </script>
</head>
<body>
    用户姓名：<input type="text" id="userNmae"><br>
    用户年龄：<input type="text" id="userAge"><br>
    用户性别：<input type="text" id="userSex"><br>
    <input type="button" id="btn" value="提交">
    <div id="mydiv" title="请确认您的信息">
        <div>12</div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

二，日历插件

my97Date插件官网：http://www.my97.net/

示例：

my97的常用属性

属性	类型	默认值	说明
el	string	null	指定一个控件的id，存储日期显示值
doubleCalendar	bool	false	双月模式，设为ture，弹出2个月日期框
dateFmt	string	yyyy-MM-dd	日期显示格式
realDateFmt	string	yyyy-MM-dd	计算机识别，正真日期格式，建议使用默认值
realTimeFmt	string	HH：mm：ss	同上
minDate	string	1900-01-01 00：00：00	最下日期（要与上面的realDateFmt匹配）
maxDate	string	2099-12-31 23：59：59	最大日期（要与上面的realDateFmt匹配）
firstDayOfWeek	int	0	周的第一天，0表示星期日
isShowWeek	bool	false	是否显示周
highLineWeekDay	bool	true	是否高亮显示周六、日
isShowClear	bool	true	是否显示清空按钮
isShowOK	bool	true	是否显示确定按钮
isShowTaday	bool	true	是否显示今天按钮