你好,游客 登录
背景:
阅读新闻

纯Jquery实现年月选择,并且根据当前月份划分周次 -

[日期:2013-04-04] 来源:  作者: [字体: ]

 

帮一网友所做,效果如图。

具体功能是:点击文本框,显示年月列表,确定之后下拉列表框将这个月分为几周,比如,第一首是从1号到3号,第二周便是4号到10号,以此类推。

开始想的是使用部分jq+updatepanel+后置代码,但是总是觉得这样的效果不好,刷新一个年份就要与服务器进行交互,如果网络太差却是给人感觉不好,所以决定使用纯js和jq来做。

废话不多说。

1.首先实现年月选择列表,使用一个div将按钮列表之类全部放在其中,并且定位方式使用绝对定位,这个很重要,为了点击文本框的时候,显示出来不会讲其余的div撑开,使用绝对定位可让其悬浮在上,而不影响其他布局。布局好之后,这个放于一旁,不用设置其所在位置。它的位置后面再说,好了布局完成,贴上代码,由于是测试,有些样式就写在div里面了。

年月列表CODE
    <!--时间月份选择框-->
    <div id="d1" style="display: none; height: 222px; width: 150px; position: absolute">
        <asp:Panel ID="p1" runat="server" Width="150px" Height="222px" BackColor="#CCCCCC">
            <div style="width: 100%; height: 30px;">
                <table style="width: 100%">
                    <tr>
                        <td>
                            <input id="btnup" type="button" class="btn" value="<<" />
                            <input id="btndown" type="button" value=">>" class="btn" />
                        </td>
                        <td style="text-align: right">
                            <input id="btnhide" type="button" class="btn" value="确定" />
                        </td>
                    </tr>
                </table>
            </div>
            <div style="width: 100%; height: 170px;">
                <select size="4" name="listyymm" id="listyymm" class="listbox">
                </select>
            </div>
        </asp:Panel>
    </div>
    <!-------------------------->

2.既然布局好了,那么就要实现的绑定了,而这个列表框使用 select标记而不是listbox。这是为什么呢?因为这些功能都是js实现的,列表中的数据也是js绑定的,如果使用listbox,并且使用js绑定数据,在浏览的时候就要出错了,具体原因就不详解了。包括后面 下拉列表框同样使用的是select而不是listbox,两个样式不同只是一个size属性控制而已。
好了,将绑定年月的code贴上

绑定年月CODE
        var year = 0;
        //绑定年月
        function time() {
            $("#listyymm").empty();
            var date = new Date();
            var yy = date.getFullYear() + year;
            for (var i = 1; i <= 12; i++) {
                if (i < 10) {
                    i = "0" + i;
                }
                $("#listyymm").append("<option value='Value'>" + yy + "年" + i + "月</option>");
            }
            $('#listyymm')[0].selectedIndex = 0;
        };

在代码声明了一个year的全局变量,用于点击按钮时改变年份,而月份是固定的12月这个就不用管了。

上下年份Code
  //上下一年按钮
            $("#btndown").click(function () {
                year += 1;
                time();
            });
            $("#btnup").click(function () {
                year -= 1;
                time();
            });

好了,数据算是绑定完了,然后点击按钮将选中的数据复制到文本框中,当数据复制到文本框后并且将这个div重新隐藏。

确定Code
  //确定按钮
            $("#btnhide").click(function () {
                var itme = $("#listyymm").find("option:selected").text();
                $("#txt1:text").val(itme.toString());
                week();
                $("#d1").css("display", "none");
            });

这样算是完成一小半了。但是,为了视觉效果更好,所以,还应该做到无论文本框在哪儿,年月列表框就出现在哪儿。所以,这个时候就用到绝对定位了开始的时候是将容纳年月的div的display设为none,也就隐藏了,但点击文本框的时候就显示出来,并且让它显示在文本框下面。
所以就需要给文本框添加click事件,并且还要获取文本框在浏览器中的绝对位置,通过这个坐标来动态改变年月div。

文本框click事件Code
 $(function () {
            //文本框单击事件
            $("#txt1").click(function () {
                $("#d1").css("display", "block");
                var top = ($("#txt1").offset().top);
                top += 25;
                var left = $("#txt1").offset().left;
                $("#d1").css("top", top);
                $("#d1").css("left", left);
                time();

            });

3.既然年月绑定好了,那么就要以周为单位来分割这个月了。

首先做好显示周次的样式布局。其实很简单,也就是一个select标记

<select name="dropweek" id="dropweek" class="dropweek"></select>

然后获取这个月的1号是周几,然后通过1号和1号对应的周次来推算了后面每天对应的周次。这个逻辑花了我不少时间,脑袋实在不够用了。其实整个程序最复杂就是这个周次分割了。代码贴上。

周次分割月份Code
  //绑定周
        function week() {
            var text = $("#txt1").val()
            var ymd = text.substring(0, 4) + "-" + text.substring(5, 7) + "-1";
            var week = new Date(Date.parse(ymd.replace(/\-/g, "/")));
            var w = week.toString().substring(0, 3);
            var yymm = new Date(text.substring(0, 4), text.substring(5, 7), 0);
            var day = yymm.getDate();
            var dd = 1;
            switch (w) {
                case "Mon": dd = 0; break;
                case "Tue": dd = 1; break;
                case "Wed": dd = 2; break;
                case "Thu": dd = 3; break;
                case "Fri": dd = 4; break;
                case "Sat": dd = 5; break;
                case "Sun": dd = 6; break;
            }
            var aw = 5;
            if (day == 28 && dd == 0) {
                aw = 4;
            }
            var i = 1;
            $("#dropweek").empty();
            for (var i = 0; i < aw; i++) {
                var start = i * 7 + 1 - dd;
                var end = i * 7 + 7 - dd;
                if (start < 1) {
                    start = 1;
                }
                if (end > day) {
                    end = day;
                }
                var str = ("第" + (i + 1) + "周 <" + text.substring(5, 7) + "月" + start + "号—" + text.substring(5, 7) + "月" + end + "号>").toString();
                $("#dropweek").append("<option value='Value'>" + str + "</option>");
            }
            $('#dropweek')[0].selectedIndex = 0;
            var itme = $("#dropweek").find("option:selected").text();
            $("#txtweek:text").val(itme.toString());
        }

现在虽然绑定上了,但是在后置代码中要怎么去获取他选中项的数据呢?而且这里是html标记,不是服务端的控件,后置代码中是不能直接获取了,那么有人说添加一个runat="server" 后面使用request来获取,,但是我没能成功,所以想了一个折中的办法。使用一个服务端的textbox,装在div里面隐藏在页面中,列表中选中项改变时就将值复制到文本框中,这样还有一个好处就是在后置代码中直接使用textbox.text就获取到了,比较符合平时的使用。

4.这样也就完成了。最后贴上完整的代码。

完整Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src=http://blog.csdn.net/dyllove98/article/details/"Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        var year = 0;
        //绑定年月
        function time() {
            $("#listyymm").empty();
            var date = new Date();
            var yy = date.getFullYear() + year;
            for (var i = 1; i <= 12; i++) {
                if (i < 10) {
                    i = "0" + i;
                }
                $("#listyymm").append("<option value='Value'>" + yy + "年" + i + "月</option>");
            }
            $('#listyymm')[0].selectedIndex = 0;
        };
        //绑定周
        function week() {
            var text = $("#txt1").val()
            var ymd = text.substring(0, 4) + "-" + text.substring(5, 7) + "-1";
            var week = new Date(Date.parse(ymd.replace(/\-/g, "/")));
            var w = week.toString().substring(0, 3);
            var yymm = new Date(text.substring(0, 4), text.substring(5, 7), 0);
            var day = yymm.getDate();
            var dd = 1;
            switch (w) {
                case "Mon": dd = 0; break;
                case "Tue": dd = 1; break;
                case "Wed": dd = 2; break;
                case "Thu": dd = 3; break;
                case "Fri": dd = 4; break;
                case "Sat": dd = 5; break;
                case "Sun": dd = 6; break;
            }
            var aw = 5;
            if (day == 28 && dd == 0) {
                aw = 4;
            }
            var i = 1;
            $("#dropweek").empty();
            for (var i = 0; i < aw; i++) {
                var start = i * 7 + 1 - dd;
                var end = i * 7 + 7 - dd;
                if (start < 1) {
                    start = 1;
                }
                if (end > day) {
                    end = day;
                }
                var str = ("第" + (i + 1) + "周 <" + text.substring(5, 7) + "月" + start + "号—" + text.substring(5, 7) + "月" + end + "号>").toString();
                $("#dropweek").append("<option value='Value'>" + str + "</option>");
            }
            $('#dropweek')[0].selectedIndex = 0;
            var itme = $("#dropweek").find("option:selected").text();
            $("#txtweek:text").val(itme.toString());
        }
        $(function () {
            //文本框单击事件
            $("#txt1").click(function () {
                $("#d1").css("display", "block");
                var top = ($("#txt1").offset().top);
                top += 25;
                var left = $("#txt1").offset().left;
                $("#d1").css("top", top);
                $("#d1").css("left", left);
                time();

            });
            //确定按钮
            $("#btnhide").click(function () {
                var itme = $("#listyymm").find("option:selected").text();
                $("#txt1:text").val(itme.toString());
                week();
                $("#d1").css("display", "none");
            });
            //上下一年按钮
            $("#btndown").click(function () {
                year += 1;
                time();
            });
            $("#btnup").click(function () {
                year -= 1;
                time();
            });
            //dropdownonchange

            $("#dropweek").change(function () {
                var itme = $("#dropweek").find("option:selected").text();
                $("#txtweek:text").val(itme.toString());
            });

        });



    </script>
    <style type="text/css">
        .listbox
        {
            width: 148px;
            height: 190px;
            border: 1px solid #c0c0c0;
        }
        .btn
        {
            width: 44px;
            height: 22px;
            border: 1px solid #c0c0c0;
            background-color: #f0f0f0;
        }
        .dropweek
        {
            width: 220px;
            height: 22px;
            border: 1px solid #c0c0c0;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <!--时间月份选择框-->
    <div id="d1" style="display: none; height: 222px; width: 150px; position: absolute">
        <asp:Panel ID="p1" runat="server" Width="150px" Height="222px" BackColor="#CCCCCC">
            <div style="width: 100%; height: 30px;">
                <table style="width: 100%">
                    <tr>
                        <td>
                            <input id="btnup" type="button" class="btn" value="<<" />
                            <input id="btndown" type="button" value=">>" class="btn" />
                        </td>
                        <td style="text-align: right">
                            <input id="btnhide" type="button" class="btn" value="确定" />
                        </td>
                    </tr>
                </table>
            </div>
            <div style="width: 100%; height: 170px;">
                <select size="4" name="listyymm" id="listyymm" class="listbox">
                </select>
            </div>
        </asp:Panel>
    </div>
    <!-------------------------->
    <div>
        &nbsp;<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
        <asp:TextBox ID="txt1" onfocus="this.blur()" runat="server"></asp:TextBox>
        <div style="display: none">
            <asp:TextBox ID="txtweek" runat="server"></asp:TextBox></div>
        <select name="dropweek" id="dropweek" class="dropweek">
        </select>
    </div>
    </form>
</body>
</html>

后置代码获取两个数据
       //输出年月
            Response.Write(txt1.Text);
        //输出dropdownlist中选中项,也就是第?周 是 几号至几号
            string str = txtweek.Text;
            Response.Write(str);
       

 

 






收藏 推荐 打印 | 录入:admin | 阅读:
相关新闻