特定のコントロールの下で、ドロップダウン ボックスに垂直スクロール バーを追加します。 _html/css_WEB-ITnose

回复讨论(解决方案)

パート2：
if(self.down){
if(key == 9 || key == 27){
self.close();
} else if(key == 13){
e.preventDefault();
self.select(self.focusIndex);
self.close();
false を返します。
} else if(key == 8){
e.preventDefault();
self.query = self.query.slice(0,-1);
self.search();
clearTimeout(self.resetQuery);
false を返します。
} else if(key != 38 && key != 40){
var letter = String.fromCharCode(key);
self.query += 文字;
self.search();
clearTimeout(self.resetQuery);
};
};
};
},
'keyup.easyDropDown': function(){
self.resetQuery = setTimeout(function(){
self.query = '';
},1200);
}
});

self.$dropDown.on('scroll.easyDropDown',function(e){
if(self.$dropDown[0].scrollTop >= self.$dropDown[0].scrollHeight - self.maxHeight){
self.$container.addClass('bottom');
} else {
self.$container.removeClass('bottom')
});

if(self.$form.length){
self.$form.on('reset.easyDropDown', function(){
var active = self.hasLabel ? self.label : self.options[0].title ;
self.$active.text(アクティブ)
});
};
},

unbindHandlers: function(){
var self = this;

self.$container
.add(self.$select)
.add(self.$items)
.add(self.$form)
.add(self.$dropDown)
.off('.easyDropDown' );
$('body').off('.'+self.id);
},

open: function(){
var self = this,
scrollTop = window.scrollY || document.documentElement.scrollTop,
scrollLeft = window.scrollX || document.documentElement.scrollLeft,
scrollOffset = self.notInViewport(scrollTop);

self.closeAll();
self.$select.focus();
window.scrollTo(scrollLeft, scrollTop+scrollOffset);
self.$container.addClass('open');
self.$scrollWrapper.css('height',self.maxHeight+'px');
self.down = true;
},

close: function(){
var self = this;
self.$container.removeClass('open');
self.$scrollWrapper.css('height','0px');
self.focusIndex = self.selected.index;
self.query = '';
self.down = false;
},

closeAll: function(){
var self = this,
インスタンス = Object.getPrototypeOf(self).instances;
for(var key in instances){
var instance = instances[key];
instance.close();
};
},

select: function(index){
var self = this;

if(typeof index === 'string'){
index = self.$select.find('option[value='+index+']').index() - 1;
};

var option = self.options[index],
selectIndex = self.hasLabel ? インデックス + 1 : インデックス;
self.$items.removeClass('active').eq(index).addClass('active');
self.$active.text(option.title);
self.$select
.find('option')
.removeAttr('selected')
.eq(selectIndex)
.prop('selected',true)
.parent()
.trigger('change') ;

self.selected = {
インデックス: インデックス,
タイトル: option.title
};
self.focusIndex = i;
if(typeof self.onChange === 'function'){
self.onChange.call(self.$select[0],{
title: option.title,
value: option.value
});
};
},

search: function(){
var self = this,
lock = function(i){
self.focusIndex = i;
self.$items.removeClass('focus').eq(self.focusIndex).addClass('focus');
self.scrollToView();
},
getTitle = function(i){
return self.options[i].title.toUpperCase();
};

for(i = 0; i < self.options.length; i++){
var title = getTitle(i);
if(title.indexOf(self.query) == 0){
lock(i);
戻る;
};
};

for(i = 0; i < self.options.length; i++){
var title = getTitle(i);
if(title.indexOf(self.query) > -1){
lock(i);
休憩;
};
};
},

scrollToView: function(){
var self = this;
if(self.focusIndex >= self.cutOff){
var $focusItem = self.$items.eq(self.focusIndex),
スクロール = ($focusItem.outerHeight() * (self.focusIndex + 1)) - self.maxHeight;

self.$dropDown.scrollTop(スクロール);
};
}、

notinviewport：function（scrolltop）{
var self = this、
range = {min：scrolltop、
max：scrolltop+（window.innerheight || document.documentelement.clientheight）、menubottom =}、
menubottom = self.$dropDown.offset().top + self.maxHeight;

if(menuBottom >= range.min && menuBottom <= range.max){
return 0;
} else {
return (menuBottom - range.max) + 5;
};
},

destroy: function(){
var self = this;
self.unbindHandlers();
self.$select.unwrap().siblings().remove();
self.$select.unwrap();
Object.getPrototypeOf(self).instances[self.$select[0].id] を削除します。
},

disable: function(){
var self = this;
self.disabled = true;
self.$container.addClass('disabled');
self.$select.attr('無効',true);
if(!self.down)self.close();
},

enable: function(){
var self = this;
self.disabled = false;
self.$container.removeClass('disabled');
self.$select.attr('無効',false);
}
};

var instantiate = function(domNode, settings){
domNode.id = !domNode.id ? 'EasyDropDown'+rand() : domNode.id;
var instance = new EasyDropDown();
if(!instance.instances[domNode.id]){
instance.instances[domNode.id] = インスタンス;
instance.init(domNode, 設定);
};
},
rand = function(){
return ('00000'+(Math.random()*16777216<<0).toString(16)).substr(-6).toUpperCase();
};

$.fn.easyDropDown = function(){
var args = arguments,
dataReturn = [],
eachReturn;

eachReturn = this.each(function(){
if(args && typeof args[0] === 'string'){
var data = EasyDropDown.prototype.instances[this.id][args[0]] (args[1], args[2]);
if(data)dataReturn.push(data);
インスタンス化(this,
});

if(dataReturn.length){
return dataReturn.length > 1? dataReturn : dataReturn[0];
} else {
return eachReturn;
};
};

$(function(){
if(typeof Object.getPrototypeOf !== 'function'){
if(typeof 'test'.__proto__ === 'object'){
Object.getPrototypeOf = function(object){
return object.__proto__
};
} else {
Object.getPrototypeOf = function(object){
return object.constructor.prototype
}; ') .each(function(){
var json = $(this).attr('data-settings');
settings = json ? $.parseJSON(json) : {};
instantiate(this, settings);
} );
});
})(jQuery);


请选择
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

多忙を期しています...

これは jquery の easyDropDown 插件、ここにあるプロパティはcutOff、cutOff='10' の话、就は表示 10 行、その他の靠滚動

按的方法照会実行、処理は成功しました、とても感慨深いです。