组合框或者带有向上/向下箭头键的列表框中的水平滚动条按功能

分享于 

5分钟阅读

Web开发

  繁體

Sample screenshot

介绍

本文介绍:

  • 如何在选择框( HTML ) 或者列表框 (ASP.NET). 中显示水平滚动条
  • 按向上键或者向下键时,功能也应按预期工作。

问题

在呈现一些HTML控件时,IE ( IE ) 有一些限制。 此类控件之一是组合框( HTML ) 或者 ListBox (ASP.NET).

同样,在 IE 中呈现组合框或者列表框时,还有几个限制:

  • 在组合框中,如果指定宽度且内容长度大于指定宽度,则不会显示水平滚动条。
  • 指定 title 属性将不会显示工具提示。

在组合框或者列表框中,我从网络中查看了许多文章,但是没有看起来很好。

最后,我得到一些文章,解释了如何为组合框或者列表框放置自定义的水平滚动条。 但是,自定义滚动条上的一些限制,向上和向下箭头键不会按预期的方式工作。 我们可以在一个组合框中使用 DIV 通过指定高度和宽度来标记。 现在,考虑一个场景,其中组合框中的项数大于指定 DIV 元素。现在,如果按下/上箭头键,它将不会按预期工作,i.e. 不能看到选定的项目。

解决办法是什么呢

我们需要解决一些事情来克服组合框中的水平滚动条问题。

  • 如我们所知,IE 不支持组合框中的水平滚动条,因这里我们必须使用自定义水平滚动条。 从外观和用户角度来看,水平滚动条将显示为组合框的一部分。
  • 现在我们已经添加了 DIV 组合框顶部的标记。 为了克服/向下箭头关键问题,我们需要应用一些技巧,以便它应该按预期运行。

使用代码

<divid='divCollegeNames'style="OVERFLOW: auto;WIDTH: 304px;HEIGHT: 147px"onscroll="OnDivScroll();">
<SELECTid='lstCollegeNames'size="8"multipleonfocus="OnSelectFocus();">

我们必须在脚本级别注意以下几个方面:

//On scrolling of DIV tag.function OnDivScroll()
{
 var lstCollegeNames = document.getElementById("lstCollegeNames");
 //The following two points achieves two things while scrolling//a) On horizontal scrolling: To avoid vertical// scroll bar in select box when the size of // the selectbox is 8 and the count of items// in selectbox is greater than 8.//b) On vertical scrolling: To view all the items in selectbox//Check if items in selectbox is greater than 8, //if so then making the size of the selectbox to count of//items in selectbox,so that vertival scrollbar// won't appear in selectboxif (lstCollegeNames.options.length> 8)
 {
 lstCollegeNames.size=lstCollegeNames.options.length;
 }
 else {
 lstCollegeNames.size=8;
 }
}
//On focus of Selectboxfunction OnSelectFocus()
{
 //On focus of Selectbox, making scroll position //of DIV to very left i.e 0 if it is not. The reason behind//is, in this scenario we are fixing the size of Selectbox //to 8 and if the size of items in Selecbox is greater than 8 //and to implement downarrow key and uparrow key //functionality, the vertical scrollbar in selectbox will//be visible if the horizontal scrollbar of DIV is exremely right.if (document.getElementById("divCollegeNames").scrollLeft!= 0)
 {
 document.getElementById("divCollegeNames").scrollLeft = 0;
 }
 var lstCollegeNames = document.getElementById('lstCollegeNames');
 //Checks if count of items in Selectbox is greater //than 8, if yes then making the size of the selectbox to 8.//So that on pressing of downarrow key or uparrowkey, //the selected item should also scroll up or down as expected.if( lstCollegeNames.options.length> 8)
 {
 lstCollegeNames.focus();
 lstCollegeNames.size=8;
 }
}

完成。

Points of Interest

不可能是轨道上的另一个障碍。

历史记录

文章的初始版本- 29 2006年月。


COM  lis  PRE  列表  FUNC  函数  
相关文章