Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: css w select
Forum PHP.pl > Forum > Po stronie przeglądarki
peklo
31.03.2014, 09:36:34
Witam
Jak można css-em zablokować wybieranie pól strzałkami na klawiaturze i scrolem myszki w polu
<select>
<option value="1">1</option>
<option value="1">2</option>
</select>
Mam jeden skrypt javascrip ale nie działa mi on z moim chained menu.
chodzi mi o taka sytuację, że mam dynamiczną liste select , która generuje kolejną pod którą z kolei podpięte są formularze. I teraz jak zaczne szybko wybierać strzałkami tz biorę kilka razy strzałki w górę, a później w dół to wybiera mi nie jeden a kilka formularzy jeden pod drugim. Czy da się taka listę sformatowac samym css żeby można było wybierać tylko myszką bez możliwości przewijania klawiszami?
trueblue
31.03.2014, 09:51:38
Zapędziłem się z postem, usunąłem.
Pokaż swoją funkcję blokującą, coś zaradzimy.
peklo
31.03.2014, 10:05:12
tu jest pierwszy select który pobiera pierwsze dane z bazy
[PHP] pobierz, plaintext 
  1. <?php
  2. echo'<select name="search_category_wyb" class="parent3">';		
  3. 		$stmt3 = $pdo->prepare('select * from kat where pid = 0 ');
  4. 		$stmt3->execute();
  5. while ($rows3 = $stmt3->fetch(PDO::FETCH_ASSOC))
  6. 		{?>
  7. 		<option value="<?php echo $rows3['id'];?>"><?php echo $rows3['kat'];?></option>
  8. 		<?php
  9. 		}
  10. $stmt3->closeCursor();
  11. echo'</select>';
  12.  
  13. //tu są kolejne selecty w innym pliku które są generowane na podstawie pierwszego
  14.  
  15. if($_REQUEST)
  16. {
  17. 	$id	= $_REQUEST['parent3_id'];
  18. 	$query  = "select * from kat where pid = ".$id." order by kat='inny',kat";
  19. 	$results  = @mysql_query( $query);
  20. 	$num_rows = @mysql_num_rows($results);
  21. 	if($num_rows > 0)
  22.  
  23. 	{?>
  24. 	<select name="sub_category_wyb[]" class="parent3">
  25. 				<?php
  26. 		while ($rows = mysql_fetch_assoc(@$results))
  27. 		{?>
  28. 			<option value="<?php echo $rows['id'];?>"><?php echo $rows['kat'];?></option>
  29. 		<?php
  30. 		}?>
  31. 		</select>	
  32.  
  33. 	<?php	
  34. 	}
  35.  
  36. else{
  37. echo '<label3>';
  38. if ($_POST['parent3_id']==1)
  39. {
  40. include_once('form1.php');
  41. }
  42. if ($_POST['parent3_id']==2)
  43. {
  44. include_once('form2.php');
  45. }
  46. echo '</label3>';
  47. }
  48. }
[PHP] pobierz, plaintext


skrypt js obsługujący wyswietlanie

Kod
$(document).ready(function() {
    $('.parent3').livequery('change', function() {
                $(this).nextAll('.parent3').remove();
        $(this).nextAll('label3').remove();
        $('#show_sub_categories3').append('<img src="images/loader.gif" style="float:left; margin-top:7px;" id="loader" alt="" />');
        $.post("auta.php", {
            parent3_id: $(this).val(),
        }, function(response){
            
            setTimeout("finishAjax('show_sub_categories3', '"+escape(response)+"')", 1);
        });
        
        return false;
    });
});

function finishAjax(id, response){
  $('#loader').remove();

  $('#'+id).append(unescape(response));
}

//no i formatowanie css

.parent3{
border: 1px solid #666666;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
    font-family: Geneva, Arial, Helvetica, sans-serif;
       margin: 0;
    padding: .4em;
    width: 15%;
  font-size: 15px;
}
trueblue
31.03.2014, 10:12:30
Ale tu nie ma funkcji blokującej:)
peklo
31.03.2014, 10:18:20
no tak mam trueblue smile.gif
A da sie ją jakoś prosto wstawic?
markuz
31.03.2014, 10:21:02 
[JAVASCRIPT] pobierz, plaintext 
  1. $(document).ready(function() {
  2.  
  3.     var _loading = false;
  4.     var _loader = $("#loader");
  5.  
  6.     $('.parent3').livequery('change', function() {
  7.         if(!_loading)
  8.         {
  9.             _loading = true;
  10.             _loader.toggle();
  11.             $(this).nextAll('.parent3').remove();
  12.             $(this).nextAll('label3').remove();
  13.             $('#show_sub_categories3').append('<img src="images/loader.gif" style="float:left; margin-top:7px;" id="loader" alt="" />');
  14.             $.post("auta.php", {
  15.                 parent3_id: $(this).val(),
  16.             }, function(response){
  17.                 _loading = false;
  18.                 _loader.toggle();
  19.                 setTimeout("finishAjax('show_sub_categories3', '"+escape(response)+"')", 1);
  20.             });
  21.         }
  22.  
  23.         return false;
  24.     });
  25. });
[JAVASCRIPT] pobierz, plaintext

Spróbuj w ten sposób. Dodaj element o id loader który jest domyślnie ukryty (display: none).
trueblue
31.03.2014, 10:21:17
Ale masz ją?smile.gif Pisałeś, że tak, ale nie działa.
Jeśli masz, to pokaż jej kod.
peklo
31.03.2014, 10:26:27
chodziło mi o ten kawałek kodu

$(this).nextAll('label3').remove();
trueblue
31.03.2014, 10:36:47
Ten kawałek nie służy do blokady klawiatury i kółka myszy.

Jeśli używasz jQuery poniżej 1.7 to musisz użyć liveevent:
[HTML] pobierz, plaintext 
  1. 	$('select').livequery('keydown', function(e) {
  2. 		e.preventDefault();
  3. 		return false;
  4. 	});
  5. 	$('select').livequery('mousewheel', function(e) {
  6. 		e.preventDefault();
  7. 	});
[HTML] pobierz, plaintext

Od 1.7 można zmienić funkcję "livequery" na "on".
Na IE zablokowało i klawiaturę i kółko myszy, na Chrome po kliknięciu w listę nie blokuje klawiatury, ale kółko i tak domyślnie nie działa.
peklo
31.03.2014, 11:03:26
dzięki chłopaki chyba pomogło:) Wreszcie po weekendzie uporania sie działa:)))
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.