html wybierz pasek przewijania

jak dodać pasek przewijania do pola wyboru html? czy istnieje biblioteka javascript, która emuluje to zachowanie?html wybierz pasek przewijania

lub czy jest tak przeprojektować, interfejs I 2 Wybierz pole, elementy mogą być przesunięte do prawej pole zaznaczania poprzez >> & < < Filezilla, Norton Commander, całkowity rodzaj dowódca interfejs gdzie elementy mogą być przesunięte w lewo i prawo ... (pytanie, jak przeprojektować, aby zobaczyć słowa przepełnienia w polu wyboru o stałej szerokości)

z this forum post, wskazując na inny example, kod przykładowy zostanie nałożony za pomocą div, aby wyświetlić dodatkowy tekst, ale wymaga, aby użytkownik najechał na opcje. nie jest to rozwiązanie, którego szukam, choć na razie będę go używał.

<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>

docelowa przeglądarka to MSIE. z powyższego kodu użytkownik nie widzi opcji 1. Opcja długa, itd. ... i każda opcja powinna mieć maksymalnie 200char.

Źródło

2009-05-23 zeroin23

Jeden opcje będą pokazać wybranej opcji powyżej (lub poniżej) listy wyboru jak następuje:

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: - Ustaw wysokość elementu div # selText, w przeciwnym razie spowoduje przesunięcie listy wyboru w dół.

Źródło

2009-05-23 08:33:30 TheVillageIdiot

To jest bardzo dobra odpowiedź, ale może trzeba wspomnieć, że fragment javascript wymaga jQuery. –

Dzięki @Jose. Pracuję z jQuery od ostatnich dni, więc myślałem, że jest już obecny !!! – TheVillageIdiot

jest haczyk, o którym zapomniałem wspomnieć, jest to wybór wielokrotny. – zeroin23

Poziome paski przewijania w zaznaczeniu HTML nie są obsługiwane natywnie. Jednak oto sposób stworzyć wygląd poziomego paska przewijania:

1. Najpierw należy utworzyć klasę 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. Owiń SELECT wewnątrz DIV - również, jawnie ustawić rozmiar do liczby opcji.

<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>

Źródło

2009-05-26 04:47:27

+1 to rozwiązanie działa z IE7, ale nie IE6 niestety ... ale to było to, co starałem się osiągnąć. – zeroin23

html wybierz pasek przewijania

Odpowiedz

Powiązane problemy