一个较为个性化的出生日期选择

社交类网站注册的时候，填写生日是个必选的过程，如果用默认的select组件去做，则会容易眼花缭乱

今天分享的这个例子将年月日选择的交互过程作了优化，采用较大的布局，点选比较方便，实现也简单，

而且轻量，没有使用datePicker等jQueryUI组件。

 

 

您可以点击图片查看DEMO 也可以到 http://i.qsl.cn/reg/ 体验完整注册过程。

 

 贴其中一段代码，是选择月份的代码，选择年份 和 日期 与之大同小异

function showMonth(){
            $("#ol").find("div.pnls").hide();
            if($("#pnlm").length){
                $("#pnlm").show();
                return false;
                };
            var pnlm = $('<div id="pnlm" class="pnls pnlm"></div>'),
                temp = [1,2,3,4,5,6,7,8,9,10,11,12];
            temp = '<div><a href="#nogo">'+temp.join('</a><a href="#nogo">')+'</a><div>';    
            pnlm.html(temp).appendTo($("#ol"));
            
            pnlm.find("a").unbind("click")
                    .bind({
                        click:function(){
                            var m = $(this).text(); 
                            $(this).addClass("cur").siblings().removeClass("cur");
                            $("#month b").text(m);
                            $("#birth_month").val(m);
                            $("#day b").text("");
                            $("#birth_day").val("");
                            
                            pnlm.hide();
                            return false;
                            }
                        });
                
            return false;    

            };