Comment créer une interface sortable en CSS3
Certains types de tri sont faciles pour les ordinateurs à faire, et vous voulez que votre codage de CSS3 pour créer cette situation. Par exemple, un ordinateur peut mettre des élements dans l'ordre alphabétique beaucoup plus rapidement qu'un humain ne peut, surtout quand la liste est longue.
Cependant, sortes ne sont pas toujours logique. Vous voudrez peut-être l'utilisateur de trier la liste des articles par préférence personnelle ou d'autres critères que l'ordinateur ne peut même pas comprendre. Dans ces cas, vous avez besoin d'un moyen de permettre sortes de manuels - et cet exemple vous donne juste ce dont vous avez besoin.
L'exemple suivant permet à un utilisateur trier les éléments par des critères non précisés. (Vous pouvez trouver le code complet pour cet exemple dans le répertoire Chapitre 06 Interactions dossier de la Code téléchargeable comme SortContent.HTML).
$ (function () {$ ("# SortMe") triables () -.}) ShowResults de fonction () {// Créer l'ouput string.var sortie = "L'ordre de tri est: n" - // Situer chacun des les éléments nécessaires et // les ajouter à la chaîne $ ("# SortMe p") chaque (function (indice, élément) {sortie + = element.innerHTML.substr (74) -}) -.. // afficher le résultat .alert (Sortie) -}L'appel triables () est tout ce que vous devez faire pour rendre la liste visiblement sortable. L'utilisateur peut placer les éléments, quels que soient ces éléments pourraient être, dans un ordre quelconque. Pour faire ce travail d'appel, toutefois, vous avez besoin de créer un conteneur - une
balises. L'id SortMe va avec le
Accéder les éléments dans l'ordre est aussi une exigence. Sinon, il n'y a aucun point en permettant à l'utilisateur de trier les éléments. Dans ce cas, il est effectivement plus facile à utiliser d'autres fonctionnalités jQuery pour obtenir la liste des éléments dans l'ordre dans lequel ils apparaissent et les traiter de cette façon.
ShowResults () démontre une technique pour effectuer cette tâche. Vous commencez par créer le sélecteur approprié, qui commence avec la
tag qu'il contient. La fonction anonyme reçoit à la fois un indice et un argument de l'élément. En cochant la propriété innerHTML de l'élément, vous pouvez obtenir le surnom pour cette
tag. Le résultat est affiché dans une boîte de dialogue.
Cet exemple permet également l'utilisation d'un style particulier jQuery UI CSS. Ce style crée une double flèche qui aide l'utilisateur à comprendre que chaque élément peut monter ou descendre dans la liste. Vous créez l'aide d'un comme ça:
Vous pouvez trouver une liste de ces icônes au cadre jQuery UI CSS. Il est important de créer des icônes qui correspondent à la façon dont votre liste apparaît à l'écran.
-
Comment faire éléments sélectionnables en ajax pour HTML5 et CSS3 programmation -
Comment créer des listes numérotées en HTML5 -
Ajouter jquery classes d'interface utilisateur pour les styles de thème -
Comment changer les éléments HTML avec jQuery - Jquery pour les nuls
- Travailler avec les teneurs en éléments de code avec javascript
Comment modifier le css d'un élément en CSS3 La bibliothèque jQuery pour CSS3 est principalement utilisé pour effectuer ces sortes de nécessaire, mais les tâches de bas niveau. Vous pouvez, toutefois, utiliser jQuery pour effectuer certaines tâches fantaisistes en incorporant CSS. Il ya…
Comment créer une interface déplaçable en CSS3 Parfois, un utilisateur a besoin de repositionner les éléments à l'écran pour les rendre plus faciles à voir ou à travailler avec. En CSS3, la création d'un environnement dans lequel l'utilisateur peut déplacer des éléments ne doit pas…
Comment créer une interface largable en CSS3 Parfois, un utilisateur doit faire glisser un élément vers un récipient et le déposer dans le conteneur. Il existe de nombreux exemples de ce processus de CSS3 dans les applications actuelles.Par exemple, le concept de glisser un élément à…
Comment créer une interface redimensionnable en CSS3 La grande variété et les types d'écrans utilisés pour afficher des informations font qu'il est nécessaire que vos commandes CSS3 permettent à l'utilisateur de redimensionner les éléments que nécessaire. Dans la plupart des cas, vous pouvez…
Comment créer une interface sélectionnable dans CSS3 Ce qui permet de choisir parmi une liste d'éléments de CSS3 réduit le risque que l'utilisateur entrera des informations incorrectes. Heureusement, HTML5 vient déjà avec un certain nombre de contrôles de sélection, mais vous pouvez constater…
Comment concevoir des modèles en utilisant CSS3 cssdesk La plupart des environnements de développement utilisés pour créer HTML, CSS3, javascript et les fichiers manquent d'une interface de conception, où vous pouvez voir immédiatement les résultats de tout code que vous créez. Au lieu de…
Comment détecter le type de navigateur de l'utilisateur dans CSS3 Dans la plupart des cas, les développeurs ne reçoivent pas de choisir le navigateur d'un utilisateur. Pour déterminer si un utilisateur particulier peut travailler avec votre application de CSS3, alors, vous devez d'abord détecter le navigateur…
Comment sélectionner des éléments avec jQuery en CSS3 Vous pouvez utiliser jQuery pour effectuer une vaste gamme de sélections d'objets dans votre application de CSS3, mais pour la plupart, vous utiliser les sélecteurs de base. Vous pouvez en savoir plus sur eux à jQuery. Voici une liste des…
Comment utiliser jQuery pour créer une interface à onglets dans CSS3 Pour certains sites une interface à onglets est la meilleure méthode pour afficher les informations. CSS3 a le code d'utiliser la méthode jQuery pour créer une interface à onglets.$ (function () {// Création de variables pour tenir TabHeads de…
Comment travailler avec l'assouplissement de pointe dans jQuery UI effets spéciaux en CSS3 De nombreuses applications nécessitent que vous afficher ou de masquer les éléments de CSS3 en différents points de l'exécution de l'application. Il peut être quelque chose d'aussi simple que de ne pas avoir besoin de l'élément à ce moment…
Comment travailler avec de dialogue dans CSS3 Les deux HTML5 et javascript permettent d'afficher des boîtes de dialogue dans CSS3. Par exemple, vous pouvez voir une combinaison d'une boîte de dialogue HTML5 / CSS3 qui ne nécessite pas l'utilisation de javascript au Code…
Comment travailler avec les onglets dans CSS3 Beaucoup de développeurs utilisent des interfaces à onglets pour réduire la complexité de l'application. Si vous pouvez attirer l'attention de l'utilisateur sur un élément à la fois, vous réduisez le risque d'entrée errant. Dans cet exemple…
Sélection d'éléments avec jQuery jQuery vous permet de sélectionner des éléments dans une page Web avec facilité. Vous pouvez trouver tout ce que vous voulez dans une page, puis utiliser jQuery pour ajouter des effets spéciaux, réagir aux actions de l'utilisateur, ou afficher…
Montrer, cacher, de glissement, et la décoloration des éléments avec jQuery jQuery effets sont très amusants et peuvent transformer une simple page Web, statique en une expérience interactive dynamique pour le visiteur du site. Une partie de l'intérêt visuel que jQuery offre est la capacité d'afficher, masquer,…