select选择框

kxapi - 实现模拟select选择框的基本功能

by calefy

HTML

<script src="http://s.kaixin001.com.cn/js/base/Haibei_Combo-000761409.js"></script>
<script src="http://s.kaixin001.com.cn/js/kxbase-0029d51b6.js"></script>
<script src="http://s.kaixin001.com.cn/js/apps/common/Select-38m232k3.js"></script>
<div class="box">
    <a href="#" class="select" id="year">
        <span class="input">年</span>
        <i class="icon"></i>
        <input type="hidden" name="year" />
    </a>
    <a href="#" class="select" id="month">
        <span class="input">月</span>
        <i class="icon"></i>
        <input type="hidden" name="month" />
    </a>
    <a href="#" class="select" id="day">
        <span class="input">日</span>
        <i class="icon"></i>
        <input type="hidden" name="day" />
    </a>
</div>

<br/>
<div>
    <p>* 每个Select元素是一个 a 标记，是为了保证通过Tab键得到焦点时，可以显示下拉框</p>
    <p>* 结构中有一个显示文本的span，和一个用来存储值的type="hidden" 的input，保证作为表单提交时方便操作</p>
    <p>* 想要让下拉框选中某个默认的值，只需要在list中将该项添加.hover即可</p>
    <p>* 只要需要的结构保持不变，其他类名都可以配置改变</p>
</div>

<!--年-->
<div class="list" data-type="year">
    <ul>
        <li>1980</li>
        <li>1981</li>
        <li>1982</li>
        <li>1983</li>
        <li>1984</li>
        <li>1985</li>
        <li class="hover">1986</li>
        <li>1987</li>
        <li>1988</li>
        <li>1989</li>
        <li>1990</li>
    </ul>
</div>

<!--月-->
<div class="list" data-type="month">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
    </ul>
</div>

<!--日-->
<div class="list" data-type="day">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
       ...

CSS

ul,li{padding:0;margin:0;}
.box{padding:25px;}

.select{display:inline-block;outline:none;position:relative;text-decoration:none;cursor:default;}
.select .input{display:block;border:1px solid #aaa;padding:5px;width:80px;}
.select .icon{position:absolute;top:12px;right:5px;cursor:pointer;border-width:5px 5px 0;border-color:#444 transparent;border-style:solid;}

.list{display:none;position:absolute;border:1px solid #999;width:90px;height:200px;overflow:auto;line-height:23px;background-color:#fff;}
.list li{border-bottom:1px solid #eee;cursor:pointer;padding-left:5px;}
.list li.hover{background-color:#eee;}

JavaScript

/**
 * 测验select选择框
 */
K.App('ASelectTest', ['jQuery', 'apps/common/Select']).define(function(require) {
    var $ = require('jQuery'),
        Select = require('apps/common/Select');

    return {
        'main': function() {
            var year, month, day;

            year = new Select({
                'trigger': '#year',
                'input': '#year input',
                'text': '#year .input',
                'listCon': 'div[data-type=year]',
                'listItem': 'div[data-type=year] li',
                'hoverClass': 'hover'
            });

            month = new Select({
                'trigger': '#month',
                'input': '#month input',
                'text': '#month .input',
                'listCon': 'div[data-type=month]',
                'listItem': 'div[data-type=month] li',
                'hoverClass': 'hover'
            });

            day = new Select({
                'trigger': '#day',
                'input': '#day input',
                'text': '#day .input',
                'listCon': 'div[data-type=day]',
                'listItem': 'div[data-type=day] li',
                'hoverClass': 'hover'
            });

            this.year = year;
            this.month = month;
            this.day = day;

            // 选中一个月份后，天数处理
            month.on(Select.Event.SelectedItem, $.proxy(this.afterSelectedMonth, this));

        },

        /**
         * 选中月份后更新对应的天数
         *   - 更新天数的下拉，会有31、30、29、28四种情况
         *   - 更新天数选项的显示值。如果上次选了31天，这次月份变为2，那么显示的31就要变成1
         */
        'afterSelectedMonth': function(selectedInfo) {
/*
            window.console && window.console.log(
                ['选中的月份dom: ', selectedInfo.item,
                 ' value: ', selectedInfo.value]
            );
            */

            var year = this.year,
                month = this.month,
                day = this.day,

                domDays = $('div[data-type=day] ul').html(''),

                m =...