Inhoudsopgave:
Video: Excel 2016 - Werkblad beveiligen 2024
U heeft mogelijk een situatie waarin u de gebruiker uit een lijst met elementen wilt laten kiezen. AJAX staat HTML5- en CSS3-programmeurs die optie toe. De selecteerbare widget is een prima manier om deze functionaliteit uit een gewone lijst te maken. De gebruiker kan items verslepen of Ctrl + klikken om ze te selecteren. Speciale CSS-klassen worden automatisch toegepast om aan te geven dat het item in aanmerking komt voor selectie of selectie.
Volg deze stappen om een selecteerbaar element te maken:
-
Begin met een ongeordende lijst.
Bouw een standaard ongeordende lijst in uw HTML. Geef de ul een ID zodat deze kan worden geïdentificeerd als een jQuery-knooppunt:
selecteerbaar
- alpha
- bèta
- gamma
- delta
-
CSS-klassen toevoegen voor het selecteren en selecteren van staten.
Als u wilt dat de selecteerbare items van uiterlijk kunnen veranderen wanneer de items worden geselecteerd of zijn geselecteerd, voegt u CSS-klassen toe zoals weergegeven. Sommige speciale klassen (ui-selectie en ui-geselecteerd) zijn vooraf gedefinieerd en zullen op de juiste tijden aan de elementen worden toegevoegd:
h1 {text-align: center;} #selectable. ui-selecteren {achtergrond-kleur: grijs;} #selecteerbaar. ui-geselecteerd {achtergrondkleur: zwart; color: white;}
-
Geef in de init () -functie de lijst op als een selecteerbaar knooppunt.
Gebruik de standaard jQuery-syntaxis: selecteerbaar ().
$ ("# selecteerbaar"). selecteerbaar ();
De klasse is aan alle elementen gekoppeld wanneer ze zijn geselecteerd. Zorg ervoor dat u een soort CSS toevoegt aan deze klasse, anders kunt u niet zien dat items zijn geselecteerd.
Als u iets wilt doen met alle items die zijn geselecteerd, maakt u gewoon een jQuery-groep elementen met de ui-geselecteerde klasse:
var selectedItems = $ (". Ui-selected");