Dear prawns: I haven’t done programming for a long time. Now I’m picking up the coding again. It’s a bit difficult. I encountered a problem. Please help me. Thank you.
1. How to add a vertical scroll bar to the drop-down box below and control the height of the drop-down box to 500px;
Thank you all, prawns.
The program source code is as follows:
part1:
New Document <script> <br> /* <br> * EASYDROPDOWN - A Drop-down Builder for Styleable Inputs and Menus <br> * Version: 2.1.3 <br> * License: Creative Commons Attribution 3.0 Unported - CC BY 3.0 <br> * http://creativecommons.org/licenses/by/3.0/ <br> * This software may be used freely on commercial and non-commercial projects with attribution to the author/copyright holder. <br> * Author: Patrick Kunka <br> * Copyright 2013 Patrick Kunka, All Rights Reserved <br> */ <br> <br> <br> (function($){ <br> <br> function EasyDropDown(){ <br> this.isField = true, <br> this.down = false, <br> this.inFocus = false, <br> this.disabled = false, <br> this.cutOff = false, <br> this.hasLabel = false, <br> this.keyboardMode = false, <br> this.nativeTouch = true, <br> this.wrapperClass = 'dropdown', <br> this.onChange = null; <br> <br> }; <br> <br> EasyDropDown.prototype = { <br> constructor: EasyDropDown, <br> instances: [], <br> init: function(domNode, settings){ <br> var self = this; <br> <br> $.extend(self, settings); <br> self.$select = $(domNode); <br> self.id = domNode.id; <br> self.options = []; <br> self.$options = self.$select.find('option'); <br> self.isTouch = 'ontouchend' in document; <br> self.$select.removeClass(self.wrapperClass ' dropdown'); <br> if(self.$select.is(':disabled')){ <br> self.disabled = true; <br> }; <br> if(self.$options.length){ <br> self.$options.each(function(i){ <br> var $option = $(this); <br> if($option.is(':selected')){ <br> self.selected = { <br> index: i, <br> title: $option.text() <br> } <br> self.focusIndex = i; <br> }; <br> if($option.hasClass('label') && i == 0){ <br> self.hasLabel = true; <br> self.label = $option.text(); <br> $option.attr('value',''); <br> } else { <br> self.options.push({ <br> domNode: $option[0], <br> title: $option.text(), <br> value: $option.val(), <br> selected: $option.is(':selected') <br> }); <br> }; <br> }); <br> if(!self.selected){ <br> self.selected = { <br> index: 0, <br> title: self.$options.eq(0).text() <br> } <br> self.focusIndex = 0; <br> }; <br> self.render(); <br> }; <br> }, <br> <br> render: function(){ <br> var self = this, <br> touchClass = self.isTouch && self.nativeTouch ? ' touch' : '', <br> disabledClass = self.disabled ? ' disabled' : ''; <br> <br> self.$container = self.$select.wrap('<div class="'+self.wrapperClass+touchClass+disabledClass+'"><span class="old"/></div>').parent().parent(); <br> self.$active = $('<span class="selected">'+self.selected.title+'</span>').appendTo(self.$container); <br> self.$carat = $('<span class="carat"/>').appendTo(self.$container); <br> self.$scrollWrapper = $('<div><ul/></div>').appendTo(self.$container); <br> self.$dropDown = self.$scrollWrapper.find('ul'); <br> self.$form = self.$container.closest('form'); <br> $.each(self.options, function(){ <br> var option = this, <br> active = option.selected ? ' class="active"':''; <br> self.$dropDown.append('<li' active '>' option.title '</li>'); <br> }); <br> self.$items = self.$dropDown.find('li'); <br> self.maxHeight = 0; <br> if(self.cutOff && self.$items.length > self.cutOff)self.$container.addClass('scrollable'); <br> for(i = 0; i < self.$items.length; i ){ <br /> var $item = self.$items.eq(i); <br /> self.maxHeight = $item.outerHeight(); <br /> if(self.cutOff == i 1){ <br /> break; <br /> }; <br /> }; <br /> <br /> if(self.isTouch && self.nativeTouch){ <br /> self.bindTouchHandlers(); <br /> } else { <br /> self.bindHandlers(); <br /> }; <br /> }, <br /> <br /> bindTouchHandlers: function(){ <br /> var self = this; <br /> self.$container.on('click.easyDropDown',function(){ <br /> <br /> self.$select.focus(); <br /> }); <br /> self.$select.on({ <br /> change: function(){ <br /> var $selected = $(this).find('option:selected'), <br /> title = $selected.text(), <br /> value = $selected.val(); <br /> <br /> self.$active.text(title); <br /> if(typeof self.onChange === 'function'){ <br /> self.onChange.call(self.$select[0],{ <br /> title: title, <br /> value: value <br /> }); <br /> }; <br /> }, <br /> focus: function(){ <br /> self.$container.addClass('focus'); <br /> }, <br /> blur: function(){ <br /> self.$container.removeClass('focus'); <br /> } <br /> }); <br /> }, <br /> <br /> bindHandlers: function(){ <br /> var self = this; <br /> self.query = ''; <br /> self.$container.on({ <br /> 'click.easyDropDown': function(){ <br /> <br /> if(!self.down && !self.disabled){ <br /> self.open(); <br /> } else { <br /> self.close(); <br /> }; <br /> }, <br /> 'mousemove.easyDropDown': function(){ <br /> if(self.keyboardMode){ <br /> self.keyboardMode = false; <br /> }; <br /> } <br /> }); <br /> <br /> $('body').on('click.easyDropDown.' self.id,function(e){ <br /> var $target = $(e.target), <br /> classNames = self.wrapperClass.split(' ').join('.'); <br /> <br /> if(!$target.closest('.' classNames).length && self.down){ <br /> self.close(); <br /> }; <br /> }); <br /> <br /> self.$items.on({ <br /> 'click.easyDropDown': function(){ <br /> var index = $(this).index(); <br /> self.select(index); <br /> self.$select.focus(); <br /> }, <br /> 'mouseover.easyDropDown': function(){ <br /> if(!self.keyboardMode){ <br /> var $t = $(this); <br /> $t.addClass('focus').siblings().removeClass('focus'); <br /> self.focusIndex = $t.index(); <br /> }; <br /> }, <br /> 'mouseout.easyDropDown': function(){ <br /> if(!self.keyboardMode){ <br /> $(this).removeClass('focus'); <br /> }; <br /> } <br /> }); <br /> <br /> self.$select.on({ <br /> 'focus.easyDropDown': function(){ <br /> <br /> self.$container.addClass('focus'); <br /> self.inFocus = true; <br /> }, <br /> 'blur.easyDropDown': function(){ <br /> self.$container.removeClass('focus'); <br /> self.inFocus = false; <br /> }, <br /> 'keydown.easyDropDown': function(e){ <br /> if(self.inFocus){ <br /> self.keyboardMode = true; <br /> var key = e.keyCode; <br /> <br /> if(key == 38 || key == 40 || key == 32){ <br /> e.preventDefault(); <br /> if(key == 38){ <br /> self.focusIndex-- <br /> self.focusIndex = self.focusIndex < 0 ? self.$items.length - 1 : self.focusIndex; <br /> } else if(key == 40){ <br /> self.focusIndex <br /> self.focusIndex = self.focusIndex > self.$items.length - 1 ? 0 : self.focusIndex; <br> }; <br> if(!self.down){ <br> self.open(); <br> }; <br> self.$items.removeClass('focus').eq(self.focusIndex).addClass('focus'); <br> if(self.cutOff){ <br> self.scrollToView(); <br> }; <br> self.query = ''; <br> }; <br> <br> </p>
<p> </p> <br> <h2>回复讨论(解决方案)</h2> <p class="sougouAnswer"> PART2： <br> if(self.down){ <br> if(key == 9 || key == 27){ <br> self.close(); <br> } else if(key == 13){ <br> e.preventDefault(); <br> self.select(self.focusIndex); <br> self.close(); <br> return false; <br> } else if(key == 8){ <br> e.preventDefault(); <br> self.query = self.query.slice(0,-1); <br> self.search(); <br> clearTimeout(self.resetQuery); <br> return false; <br> } else if(key != 38 && key != 40){ <br> var letter = String.fromCharCode(key); <br> self.query = letter; <br> self.search(); <br> clearTimeout(self.resetQuery); <br> }; <br> }; <br> }; <br> }, <br> 'keyup.easyDropDown': function(){ <br> self.resetQuery = setTimeout(function(){ <br> self.query = ''; <br> },1200); <br> } <br> }); <br> <br> self.$dropDown.on('scroll.easyDropDown',function(e){ <br> if(self.$dropDown[0].scrollTop >= self.$dropDown[0].scrollHeight - self.maxHeight){ <br> self.$container.addClass('bottom'); <br> } else { <br> self.$container.removeClass('bottom'); <br> }; <br> }); <br> <br> if(self.$form.length){ <br> self.$form.on('reset.easyDropDown', function(){ <br> var active = self.hasLabel ? self.label : self.options[0].title; <br> self.$active.text(active); <br> }); <br> }; <br> }, <br> <br> unbindHandlers: function(){ <br> var self = this; <br> <br> self.$container <br> .add(self.$select) <br> .add(self.$items) <br> .add(self.$form) <br> .add(self.$dropDown) <br> .off('.easyDropDown'); <br> $('body').off('.' self.id); <br> }, <br> <br> open: function(){ <br> var self = this, <br> scrollTop = window.scrollY || document.documentElement.scrollTop, <br> scrollLeft = window.scrollX || document.documentElement.scrollLeft, <br> scrollOffset = self.notInViewport(scrollTop); <br> <br> self.closeAll(); <br> self.$select.focus(); <br> window.scrollTo(scrollLeft, scrollTop scrollOffset); <br> self.$container.addClass('open'); <br> self.$scrollWrapper.css('height',self.maxHeight 'px'); <br> self.down = true; <br> }, <br> <br> close: function(){ <br> var self = this; <br> self.$container.removeClass('open'); <br> self.$scrollWrapper.css('height','0px'); <br> self.focusIndex = self.selected.index; <br> self.query = ''; <br> self.down = false; <br> }, <br> <br> closeAll: function(){ <br> var self = this, <br> instances = Object.getPrototypeOf(self).instances; <br> for(var key in instances){ <br> var instance = instances[key]; <br> instance.close(); <br> }; <br> }, <br> <br> select: function(index){ <br> var self = this; <br> <br> if(typeof index === 'string'){ <br> index = self.$select.find('option[value=' index ']').index() - 1; <br> }; <br> <br> var option = self.options[index], <br> selectIndex = self.hasLabel ? index 1 : index; <br> self.$items.removeClass('active').eq(index).addClass('active'); <br> self.$active.text(option.title); <br> self.$select <br> .find('option') <br> .removeAttr('selected') <br> .eq(selectIndex) <br> .prop('selected',true) <br> .parent() <br> .trigger('change'); <br> <br> self.selected = { <br> index: index, <br> title: option.title <br> }; <br> self.focusIndex = i; <br> if(typeof self.onChange === 'function'){ <br> self.onChange.call(self.$select[0],{ <br> title: option.title, <br> value: option.value <br> }); <br> }; <br> }, <br> <br> search: function(){ <br> var self = this, <br> lock = function(i){ <br> self.focusIndex = i; <br> self.$items.removeClass('focus').eq(self.focusIndex).addClass('focus'); <br> self.scrollToView(); <br> }, <br> getTitle = function(i){ <br> return self.options[i].title.toUpperCase(); <br> }; <br> <br> for(i = 0; i < self.options.length; i ){ <br /> var title = getTitle(i); <br /> if(title.indexOf(self.query) == 0){ <br /> lock(i); <br /> return; <br /> }; <br /> }; <br /> <br />for(i = 0; i < self.options.length; i ){ <br /> var title = getTitle(i); <br /> if(title.indexOf(self.query) > -1){ <br> lock(i); <br> break; <br> }; <br> }; <br> }, <br> <br> scrollToView: function(){ <br> var self = this; <br> if(self.focusIndex >= self.cutOff){ <br> var $focusItem = self.$items.eq(self.focusIndex), <br> scroll = ($focusItem.outerHeight() * (self.focusIndex 1)) - self.maxHeight; <br> <br> self.$dropDown.scrollTop(scroll); <br> }; <br> }, <br> <br> notInViewport: function(scrollTop){ <br> var self = this, <br> range = { <br> min: scrollTop, <br> max: scrollTop (window.innerHeight || document.documentElement.clientHeight) <br> }, <br> menuBottom = self.$dropDown.offset().top self.maxHeight; <br> <br> if(menuBottom >= range.min && menuBottom <= range.max){ <br /> return 0; <br /> } else { <br /> return (menuBottom - range.max) 5; <br /> }; <br /> }, <br /> <br /> destroy: function(){ <br /> var self = this; <br /> self.unbindHandlers(); <br /> self.$select.unwrap().siblings().remove(); <br /> self.$select.unwrap(); <br /> delete Object.getPrototypeOf(self).instances[self.$select[0].id]; <br /> }, <br /> <br /> disable: function(){ <br /> var self = this; <br /> self.disabled = true; <br /> self.$container.addClass('disabled'); <br /> self.$select.attr('disabled',true); <br /> if(!self.down)self.close(); <br /> }, <br /> <br /> enable: function(){ <br /> var self = this; <br /> self.disabled = false; <br /> self.$container.removeClass('disabled'); <br /> self.$select.attr('disabled',false); <br /> } <br /> }; <br /> <br /> var instantiate = function(domNode, settings){ <br /> domNode.id = !domNode.id ? 'EasyDropDown' rand() : domNode.id; <br /> var instance = new EasyDropDown(); <br /> if(!instance.instances[domNode.id]){ <br /> instance.instances[domNode.id] = instance; <br /> instance.init(domNode, settings); <br /> }; <br /> }, <br /> rand = function(){ <br /> return ('00000' (Math.random()*16777216<<0).toString(16)).substr(-6).toUpperCase(); <br /> }; <br /> <br /> $.fn.easyDropDown = function(){ <br /> var args = arguments, <br /> dataReturn = [], <br /> eachReturn; <br /> <br /> eachReturn = this.each(function(){ <br /> if(args && typeof args[0] === 'string'){ <br /> var data = EasyDropDown.prototype.instances[this.id][args[0]](args[1], args[2]); <br /> if(data)dataReturn.push(data); <br /> } else { <br /> instantiate(this, args[0]); <br /> }; <br /> }); <br /> <br /> if(dataReturn.length){ <br /> return dataReturn.length > 1 ? dataReturn : dataReturn[0]; <br> } else { <br> return eachReturn; <br> }; <br> }; <br> <br> $(function(){ <br> if(typeof Object.getPrototypeOf !== 'function'){ <br> if(typeof 'test'.__proto__ === 'object'){ <br> Object.getPrototypeOf = function(object){ <br> return object.__proto__; <br> }; <br> } else { <br> Object.getPrototypeOf = function(object){ <br> return object.constructor.prototype; <br> }; <br> }; <br> }; <br> <br> $('select.dropdown').each(function(){ <br> var json = $(this).attr('data-settings'); <br> settings = json ? $.parseJSON(json) : {}; <br> instantiate(this, settings); <br> }); <br> }); <br> })(jQuery); <br> </script>
请选择
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行，其他靠滚动
按照你的方法执行，处理成功，非常感谢。
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
