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

               

 

 

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

 

具体功能是：点击文本框，显示年月列表，确定之后下拉列表框将这个月分为几周，比如，第一首是从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