https://www.youyou.co.jp/js/jquery.customSelect.js

1/*!
2 * jquery.customSelect() - v0.4.1
3 * http://adam.co/lab/jquery/customselect/
4 * 2013-05-13
5 *
6 * Copyright 2013 Adam Coulombe
7 * @license http://www.opensource.org/licenses/mit-license.html MIT License
8 * @license http://www.gnu.org/licenses/gpl.html GPL2 License
9 */
10
11(function ($) {
12    'use strict';
13
14    $.fn.extend({
15        customSelect: function (options) {
16            // filter out <= IE6
17            if (typeof document.body.style.maxHeight === 'undefined') {
18                return this;
19            }
20            var defaults = {
21                    customClass: 'customSelect, customSelect2',
22                    mapClass:    true,
23                    mapStyle:    true
24            },
25            options = $.extend(defaults, options),
26            prefix = options.customClass,
27            changed = function ($select,customSelectSpan) {
28                var currentSelected = $select.find(':selected'),
29                customSelectSpanInner = customSelectSpan.children(':first'),
30                html = currentSelected.html() || '&nbsp;';
31
32                customSelectSpanInner.html(html);
33
34                if (currentSelected.attr('disabled')) {
35                	customSelectSpan.addClass(getClass('DisabledOption'));
36                } else {
37                	customSelectSpan.removeClass(getClass('DisabledOption'));
38                }
39
40                setTimeout(function () {
41                    customSelectSpan.removeClass(getClass('Open'));
42                    $(document).off('mouseup.'+getClass('Open'));
43                }, 60);
44            },
45            getClass = function(suffix){
46                return prefix + suffix;
47            };
48
49            return this.each(function () {
50                var $select = $(this),
51                    customSelectInnerSpan = $('<span />').addClass(getClass('Inner')),
52                    customSelectSpan = $('<span />');
53
54                $select.after(customSelectSpan.append(customSelectInnerSpan));
55
56                customSelectSpan.addClass(prefix);
57
58                if (options.mapClass) {
59                    customSelectSpan.addClass($select.attr('class'));
60                }
61                if (options.mapStyle) {
62                    customSelectSpan.attr('style', $select.attr('style'));
63                }
64
65                $select
66                    .addClass('hasCustomSelect')
67                    .on('update', function () {
68						changed($select,customSelectSpan);
69
70                        var selectBoxWidth = parseInt($select.outerWidth(), 10) -
71                                (parseInt(customSelectSpan.outerWidth(), 10) -
72                                    parseInt(customSelectSpan.width(), 10));
73
74						// Set to inline-block before calculating outerHeight
75						customSelectSpan.css({
76                            display: 'inline-block'
77                        });
78
79                        var selectBoxHeight = customSelectSpan.outerHeight();
80
81                        if ($select.attr('disabled')) {
82                            customSelectSpan.addClass(getClass('Disabled'));
83                        } else {
84                            customSelectSpan.removeClass(getClass('Disabled'));
85                        }
86
87                        customSelectInnerSpan.css({
88                            width:   selectBoxWidth,
89                            display: 'inline-block'
90                        });
91
92                        $select.css({
93                            '-webkit-appearance': 'menulist-button',
94                            width:                customSelectSpan.outerWidth(),
95                            position:             'absolute',
96                            opacity:              0,
97                            height:               selectBoxHeight,
98                            fontSize:             customSelectSpan.css('font-size')
99                        });
100                    })
101                    .on('change', function () {
102                        customSelectSpan.addClass(getClass('Changed'));
103                        changed($select,customSelectSpan);
104                    })
105                    .on('keyup', function (e) {
106                        if(!customSelectSpan.hasClass(getClass('Open'))){
107                            $select.blur();
108                            $select.focus();
109                        }else{
110                            if(e.which==13||e.which==27){
111                                changed($select,customSelectSpan);
112                            }
113                        }
114                    })
115                    .on('mousedown', function (e) {
116                        customSelectSpan.removeClass(getClass('Changed'));
117                    })
118                    .on('mouseup', function (e) {
119
120                        if( !customSelectSpan.hasClass(getClass('Open'))){
121                            // if FF and there are other selects open, just apply focus
122                            if($('.'+getClass('Open')).not(customSelectSpan).length>0 && typeof InstallTrigger !== 'undefined'){
123                                $select.focus();
124                            }else{
125                                customSelectSpan.addClass(getClass('Open'));
126                                e.stopPropagation();
127                                $(document).one('mouseup.'+getClass('Open'), function (e) {
128                                    if( e.target != $select.get(0) && $.inArray(e.target,$select.find('*').get()) < 0 ){
129                                        $select.blur();
130                                    }else{
131                                        changed($select,customSelectSpan);
132                                    }
133                                });
134                            }
135                        }
136                    })
137                    .focus(function () {
138                        customSelectSpan.removeClass(getClass('Changed')).addClass(getClass('Focus'));
139                    })
140                    .blur(function () {
141                        customSelectSpan.removeClass(getClass('Focus')+' '+getClass('Open'));
142                    })
143                    .hover(function () {
144                        customSelectSpan.addClass(getClass('Hover'));
145                    }, function () {
146                        customSelectSpan.removeClass(getClass('Hover'));
147                    })
148                    .trigger('update');
149            });
150        }
151    });