js 选择控件 picker

 

首先预览图效果：

概述：

只是一个选择器，选择器内可以有多个分类，但输入目标只有一个.比较适合上图所示的情况:需要用户选择一个开始时间，且时间是限定死的，这个开始时间可能是昨天今天或明天。这个插件就是用来解决这个问题的，我不是一个前端工程师，所以代码的依赖 JQuery,样式是从bootstrap-datetimepicker那扒下来的几个，下面就是代码部分。

代码：

JS：

    <script type="text/javascript">
        !function ($) {
            var Picker = function (element, options) {
                var defaultContent = {
                    name: '',
                    data: [],
                    prefix: '',
                    suffix: '',
                    isShowData: true
                }
                var that = this;
                this.element = $(element);
                this.isInput = this.element.is('input');
                this.container = options.container || 'body';
                this.firstView = options.firstView;
                this.isClose = options.isClose;
                var template = ' <div class="picker dropdown-menu" id="pickerContainer" style="display:none;width:280px" >';
                var content = options.content;
               
                $.each(content, function (index, subelement) {
                    subelement = $.extend({}, defaultContent, subelement);
                    var temp = DPGlobal.template;
                    temp = temp.replace("{title}", subelement.name).replace("{prefix}", subelement.prefix).replace("{suffix}", subelement.suffix).replace('{displayStyle}', index == options.firstView ? '' : 'style="display:none;"')
                    .replace('{leftArrow}', 'glyphicon glyphicon-arrow-left').replace('{rightArrow}', 'glyphicon glyphicon-arrow-right');
                    if (index > 0) {
                        temp = temp.replace("{leftVisibility}", "visibility:visible;")
                    } else {
                        temp = temp.replace("{leftVisibility}", "visibility:hidden;")
                    }
                    if (index < (content.length - 1)) {
                        temp = temp.replace("{rightVisibility}", "visibility:visible;")
                    } else {
                        temp = temp.replace("{rightVisibility}", "visibility:hidden;")
                    }
                    var str = '';
                    $.each(subelement.data, function (index, e) {
                        str += '<span>' + e + '</span>';
                    });
                    temp = temp.replace("{body}", str);
                    template += temp;
                });
                template += '</div>';
                this.pickerBody = $(template).appendTo(this.container) // 'body')
			.on({
			    click: $.proxy(this.click, this),
			    mousedown: $.proxy(this.mousedown, this)
			});

                $(document).on('mousedown', function (e) {
                    // Clicked outside the datetimepicker, hide it
                    if ($(e.target).closest('.picker').length === 0) {
                        that.pickerBody.hide();
                    }
                    if (e.target == element[0]) {
                        that.pickerBody.css("left", element.offset().left);
                        that.pickerBody.css("top", element.offset().top + element.outerHeight());
                        that.initialize();
                        that.pickerBody.show();
                    }

                });
                $.proxy(this.initialize, this);
            }

            Picker.prototype = {
                click: function (element) {
                    var $target = $(element.target);
                    if ($target.length == 1) {
                        switch ($target[0].nodeName.toLowerCase()) {
                            case 'i':
                                var $div = $target.closest('div');
                                switch ($target.closest('th').attr('class')) {
                                    case 'prev':
                                        $div.hide();
                                        $div.prev('div').show();
                                        break;
                                    case 'next':
                                        $div.hide();
                                        $div.next('div').show();
                                        break;
                                    default:
                                        break;
                                }
                                break;

                            case 'span':
                                //层次变换  if else
                                var $td = $target.closest('td');
                                if ($target.hasClass('active'))
                                    break;
                                $('#pickerContainer span').removeClass('active');
                                $target.addClass('active');
                                this.activeObj = $target;
                                this.setValue();
                                if (this.isClose)
                                    this.pickerBody.hide();
                                break;
                            default:
                                break;
                        }
                    }
                },

                setValue: function () {
                    var formatted = this.getFormattedDate();
                    if (!this.isInput) {
                        this.element.find('input').val(formatted);
                    } else {
                        this.element.val(formatted);
                    }
                },
                getFormattedDate: function (format) {
                    var $parentDiv = this.activeObj.closest('div');
                    return $parentDiv.attr('prefix') + this.activeObj.text() + $parentDiv.attr('suffix');
                },
                initialize: function () {
                    var $divs = this.pickerBody.find('div');
                    $divs.css('display', 'none');
                    $($divs[this.firstView]).removeAttr('style');
                }
                
            }
            //DPGlobal
            var DPGlobal = {
                headTemplate: '<thead>' +
                                      '<tr>' +
                                      '<th class="prev" style="{leftVisibility} cursor:pointer;"><i class="{leftArrow}"/></th>' +
                                      '<th colspan="5" class="switch">{title}</th>' +
                                      '<th class="next" style="{rightVisibility} cursor:pointer;"><i class="{rightArrow}"/></th>' +
                                      '</tr>' +
                    '</thead>',
                contTemplate: '<tbody><tr><td colspan="7">{body}</td></tr></tbody>',
                footTemplate: '<tfoot><tr><th colspan="7">{foot}</th></tr></tfoot>'
            };
            DPGlobal.template = '<div  prefix="{prefix}" suffix="{suffix}" {displayStyle}>\
                            <table class=" table-condensed">'+
                                          DPGlobal.headTemplate +
                                          DPGlobal.contTemplate +
                                          //DPGlobal.footTemplate +
                                          '</table>\
                            </div>';
            //DPGlobal end

            $.fn.picker = function (options) {

                var defaults = {
                    content: [],
                    firstView: 0,
                    isClose: false
                }

                options = $.extend(defaults, options);

                new Picker(this, $.extend({}, $.fn.picker.defaults, options));
            }
        }(window.jQuery)

    </script>

CSS:

        @font-face {
            font-family: 'Glyphicons Halflings';
            src: url('fonts/glyphicons-halflings-regular.eot');
            src: url('fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('fonts/glyphicons-halflings-regular.woff') format('woff'), url('fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
        }

        .glyphicon {
            position: relative;
            top: 1px;
            display: inline-block;
            font-family: 'Glyphicons Halflings';
            -webkit-font-smoothing: antialiased;
            font-style: normal;
            font-weight: normal;
            line-height: 1;
        }

        .picker table tr td {
            color: #999;
        }

        .picker tbody > tr > td {
            padding: 5px;
        }

        .picker td, .picker th {
            text-align: center;
            width: 20px;
            height: 20px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            border: 0;
        }

        .picker table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        .picker {
            padding: 4px;
            margin-top: 1px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            direction: ltr;
        }

        .dropdown-menu {
            position: absolute;
            /*top: 100%;*/
            left: 0;
            z-index: 1000;
            /*display: none;*/
            float: left;
            min-width: 160px;
            padding: 5px 0;
            margin: 2px 0 0;
            font-size: 14px;
            list-style: none;
            background-color: #fff;
            border: 1px solid #ccc;
            border: 1px solid rgba(0,0,0,0.15);
            border-radius: 4px;
            -webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.175);
            box-shadow: 0 6px 12px rgba(0,0,0,0.175);
            background-clip: padding-box;
        }

        .picker table tr td span:hover {
            background: #eeeeee;
            cursor: pointer;
        }

        .picker table tr td span {
            display: block;
            width: 23%;
            height: 54px;
            line-height: 54px;
            float: left;
            margin: 1%;
            cursor: pointer;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
        }

        .picker table {
            width: 100%;
        }

            .picker table tr td span.active {
                background-color: #039;
            }

        .glyphicon-arrow-left:before {
            content: "\e091";
        }

        .glyphicon-arrow-right:before {
            content: "\e092";
        }

页面代码：

 <script type="text/javascript">
        $(function () {
            $("input").picker({
                content: [{
                    name: '本日',
                    data: ['0:30', '2:30', '5:40', '6:40', '0:30', '2:30', '5:40', '6:40', '0:30', '2:30', '5:40', '6:40', '0:30', '2:30', '5:40', '6:40'],
                    prefix:'本日 '
                }, {
                    name: '次日',
                    data: ['0:30', '2:30', '5:40', '6:40', '0:30', '2:30', '5:40', '6:40', '0:30', '2:30', '5:40', '6:40', '0:30', '2:30', '5:40', '6:40'],
                    prefix: '次日 '
                }, {
                    name: '未来',
                    data: ['0:30', '2:30', '5:40', '6:40', '0:30', '2:30', '5:40', '6:40', '0:30', '2:30', '5:40', '6:40', '0:30', '2:30', '5:40', '6:40'],
                }]
            });
        });
    </script>

  
</head>
<body>
    <input type="text" value="123" style="position:absolute;left:200px;top:200px;" />
</body>

        //$("input").picker({
        //    content: [{
        //        name: '',//head显示的文字
        //        data: [],//数据
        //        prefix: '',//前缀
        //        suffix: ''//后缀
        //    }],
        //    firstView: 0, //启始视图，content数组中的第一个将会第一个显示
        //    isClose: false  //是否自动关闭
        //});