HTML выберите полосу прокрутки - PullRequest
Новая
       3

HTML выберите полосу прокрутки

9 голосов
/ 23 мая 2009

как добавить полосу прокрутки в поле выбора HTML? Есть ли библиотека JavaScript, которая имитирует это поведение?

или есть в любом случае, чтобы изменить дизайн, интерфейс у меня есть 2 окна выбора, элементы могут быть перемещены в правое окно выбора через >> & << Filezilla, Norton Commander, общий вид интерфейса Commander, где элементы можно перемещать влево и правильно ... (вопрос в том, как изменить дизайн, чтобы увидеть слова переполнения в поле выбора фиксированной ширины) </p>

из этого сообщения на форуме , указывая на другой пример , пример кода будет наложен с использованием div для отображения дополнительного текста, но для этого пользователю необходимо навести курсор на опции. не совсем то решение, которое я ищу, хотя пока буду его использовать. 

<html>

<body>
<table>
<tr><td>
<select size="4" id="mySelect" style="width:65px;color:#f98ad3;">
    <option value="1" selected>option 1 The Long Option</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
    <option value="4">option 4</option>
    <option value="5">option 5 Another Longer than the Long Option ;)</option>
    <option value="6">option 6</option>
</select>
</td>
<td>
<input type="button" value=">>"/><br>
<input type="button" value="<<"/>
</td>
<td>
<select size="4" id="mySelect" style="width:65px;color:#f98ad3;">
    <option value="1" selected>option 1 The Long Option</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
    <option value="4">option 4</option>
    <option value="5">option 5 Another Longer than the Long Option ;)</option>
    <option value="6">option 6</option>
</select>
</td>
</tr>
</table>
</body>
</html>

целевой браузер - MSIE. Исходя из приведенного выше кода, пользователь не может видеть «вариант 1 длинный вариант» и т. д., и каждый параметр должен иметь максимум 200чар.

Ответы [ 2 ]

15 голосов
/ 26 мая 2009

Горизонтальные полосы прокрутки в HTML Select изначально не поддерживаются. Однако вот способ создать вид горизонтальной полосы прокрутки:

1. Сначала создайте класс CSS 

<style type="text/css">
 .scrollable{
   overflow: auto;
   width: 70px; /* adjust this width depending to amount of text to display */
   height: 80px; /* adjust height depending on number of options to display */
   border: 1px silver solid;
 }
 .scrollable select{
   border: none;
 }
</style>

2. Оберните SELECT внутри DIV - также, явно установите размер в число опций. 

<div class="scrollable">
<select size="6" multiple="multiple">
    <option value="1" selected>option 1 The Long Option</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
    <option value="4">option 4</option>
    <option value="5">option 5 Another Longer than the Long Option ;)</option>
    <option value="6">option 6</option>
</select>
</div>
7 голосов
/ 23 мая 2009

Один из вариантов будет отображать выбранный вариант над (или под) списком выбора, как показано ниже:

HTML 

<div id="selText"><span>&nbsp;</span></div><br/>
<select size="4" id="mySelect" style="width:65px;color:#f98ad3;">
    <option value="1" selected>option 1 The Long Option</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
    <option value="4">option 4</option>
    <option value="5">option 5 Another Longer than the Long Option ;)</option>
    <option value="6">option 6</option>
</select>

JavaScript 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"   
  type="text/javascript"></script> 
<script type="text/javascript">
$(document).ready(function(){        
    $("select#mySelect").change(function(){
      //$("#selText").html($($(this).children("option:selected")[0]).text());
       var txt = $($(this).children("option:selected")[0]).text();
       $("<span>" + txt + "<br/></span>").appendTo($("#selText span:last"));
    });
});
</script>

PS: - установить высоту div # selText, иначе он будет продолжать смещать список выбора вниз.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...