Sprawdź to, nie należy go zaznaczyć


Original: http://c82.net/posts.php?id=25

Użyteczność i dostępność są wszystkie wściekłość teraz i to jest wspaniałe, bo to powoli podejmowania web lepszym miejscem. Niestety, niektóre z dodatkami w naszych workach sztuczki nie są całkiem do tabaki, jeśli chodzi o tych dwóch obszarach. Jednym z takich goody jest stary dobry wybierz element konkretnie wielokrotnego włączonym atrybucie. Jak o nas pozbyć się ich i spróbować czegoś innego?

Największym problemem, z pola wielokrotnego wyboru jest to, że wybierając kilka opcji jest ból, zwłaszcza jeśli nie są wystarczające, aby utworzyć pasek przewijania w polu. Najczęstszym miejscem Widziałem ten scenariusz jest w systemach zarządzania treścią. Na przykład, powiedzmy, że piszesz artykuł do witryny w CMS i chcesz go do stawienia się w kilku kategoriach na przednim końcu strony. (Załóżmy, że system nie używa tagów dla tego przykładu.) Aby podobne do tych kategorii, pole wielokrotnego wyboru jest zazwyczaj wyświetlane z wszystkich kategorii terenu jak opcje. Trzeba by przytrzymać klawisz Ctrl i wybrać każdą kategorię. Może to obejmować przewijanie w polu i jeśli kochasz za pomocą poręcznej Dandy kółka na myszy, możesz kliknąć w polu ostrości ponownie włączyć i rozpocząć przewijanie w dół, ale czekaj! Wystarczy kliknąć nie trzymając Ctrl więc wystarczy odznaczyć wszystkie wcześniej wybrane opcje. Teraz musisz wrócić i przypomnieć, co wybrałeś i użyć paska przewijania, aby przewinąć w dół. Jasne, można ustawić ostrość na element, wybierając elementy z Ctrl, ale nie każdy o tym wie. Wszystko to podłoże i forthing ma być prawdziwy ból.

Dlaczego nie zastąpienie uciążliwego wybierz pole z przewijanej liście kontrolnej? Niedawno byłem w pracy w Visual Studio i zauważyłem kontrolę nazwie CheckedListBox (który nazywa te rzeczy?) I myślałem, że staram się, aby jeden do użytku w internecie przy użyciu niektórych standardowych elementów i odrobinę CSS. Podążać poniżej, aby zobaczyć, jak to zrobiłem, zobaczyć końcowy wynik podstawowy lub sprawdzić kilka wymyślnych przykładów.

Pierwszym krokiem jest utworzenie struktury. Zrobiłem to po prostu za pomocą listę nieuporządkowaną, kilka etykiet i pól wyboru: