移动端使用的仿ios系统选择器控件IosSelect

很好看的选择栏控件，不多说 直接贴图

可以设置下行数和列数，显示的行的数量。还可以设置默认值。
下面是代码：

<script type="text/javascript">
//生成年月日时间数组。 方便time选择器的调用.
 var now = new Date();
 var nowYear = now.getFullYear();
 var nowMonth = now.getMonth() + 1;
 var nowDate = now.getDate();

function formatYear (nowYear) {
        var arr = [];
        for (var i = nowYear; i <= nowYear + 5; i++) {
            arr.push({
                id: i ,
                value: i + '年'
            });
        }
        return arr;
    }
    function formatMonth () {
        var arr = [];
        for (var i = 1; i <= 12; i++) {
            arr.push({
                id: i ,
                value: i + '月'
            });
        }
        return arr;
    }
    function formatDate (count) {
        var arr = [];
        for (var i = 1; i <= count; i++) {
            arr.push({
                id: i ,
                value: i+ '日'
            });
        }
        return arr;
    }
    var yearData = function(callback) {
        callback(formatYear(nowYear))
    }
    var monthData = function (year, callback) {
        callback(formatMonth());
    };
    var dateData = function (year, month, callback) {
        if (/^(1|3|5|7|8|10|12)$/.test(month)) {
            callback(formatDate(31));
        }
        else if (/^(4|6|9|11)$/.test(month)) {
            callback(formatDate(30));
        }
        else if (/^2$/.test(month)) {
            if (year % 4 === 0 && year % 100 !==0 || year % 400 === 0) {
                callback(formatDate(29));
            }
            else {
                callback(formatDate(28));
            }
        }
        else {
            throw new Error('month is illegal');
        }
    };

//选择器部分
function timeSelect () {
    //三级联动
    var bankSelect=new IosSelect(4, 
    [yearData, monthData, dateData , //每一个数组，对应一个列
    [{'id':'0', 'value': '全天'},
    {'id': '1', 'value': '上午'},
    {'id': '2', 'value': '下午'},
    {'id': '3', 'value': '晚上'}
    ]],
        {
            container: '.container',
            relation: [1, 1, 0, 0],//每列之间关系，省市区三级联动需要用到
            title: '日期选择',//显示名称
            itemHeight: 50,//行高
            itemShowCount: 3,//行数
            oneLevelId: 1,//默认的第一行
            twoLevelId: now.getMonth()+1,//默认第二行
            threeLevelId: now.getDate(),//..
            selectFourObj:0, //用来使用默认的显示位置.  如需要使用请选择，则在data文件中加入请选择序列号
            callback: function (selectOneObj,selectTwoObj,selectThreeObj,selectFourObj) {
                $("shipment_form._delivery_time").value = selectOneObj.value+selectTwoObj.value+selectThreeObj.value+selectFourObj.value;
                $("shipment_form._loading_time_date").value  = selectOneObj.id+"-"+selectTwoObj.id+"-"+selectThreeObj.id;
                $("shipment_form._loading_time_period").value = selectFourObj.id;
                //少一个hidden 放置日期
            }
    });
}
script>

直接将上述function 放入到一个onclick时间中触发，导入三个依赖包(iosSelect.css,iosSelect.js,iscroll.js),即可以使用。

所需要的文件 http://download.csdn.net/download/nepaltrip/9996490