An Introduction To DOM Events joshfire/jsonform Unheap - A tidy repository of jQuery plugins Useful JavaScript Libraries and jQuery Plugins For Web Developers Advertisement If you have a problem and need a solution for it, chances are high that a JavaScript library or jQuery plugin exists that was created to solve this very problem. Such libraries are always great to have in your bookmarks or in your local folders, especially if you aren’t a big fan of cross-browser debugging. A JavaScript library isn’t always the best solution: it should never be a single point of failure for any website, and neither should a website rely on JavaScript making the content potentially inaccessible. In this two-part overview, we feature some of the most useful JavaScript and jQuery libraries which could be just the right solutions for your common problems. Due to the length of this post, we’ve split it into two parts for your convenience: Quick Overview: Below you’ll find a brief overview and links to the libraries and tools featured in this post. Web Forms and Input Validation Select2 jQuery PluginA jQuery-plugin for replacement and enhancement of <select>-boxes.
Alpaca Forms - Getting Started with Alpaca This page provides a detailed, walk-through tutorial that describes how you might go about building your first Alpaca form. It isn't all that complicated but this guide goes step-by-step. Because, well... some people are all about step-by-step instructions with lots of details. If you're more interested in seeing a quick demo, check out our examples page. Launch your favorite text editor and create an empty HTML file. In the body, we'll add a single DIV element. It might end up looking something like this: So far so good. Add a div to the body section of your HTML file. When we call this function, we can pass in the JSON schema of the form as well as optional configuration options that tell Alpaca what kinds of controls to render as well as how to lay them out. Let's start by specifying only the schema parameter. As illustrated in the following example, Alpaca is able to render a basic feedback form based on the provided schema. Tell us what you think about Alpaca! Please enter your name.
mishoo/UglifyJS react-jsonschema-form playground react-jsonschema-form JSONSchema xxxxxxxxxx "title": "A registration form", "description": "A simple form example. "type": "object", "required": [ "firstName", "lastName" "properties": { "firstName": { "type": "string", "title": "First name" "lastName": { "title": "Last name" "age": { "type": "integer", "title": "Age" "bio": { "title": "Bio" "password": { "title": "Password", "minLength": 3 "telephone": { "title": "Telephone", "minLength": 10 UISchema "ui:autofocus": true, "ui:emptyValue": "" "ui:widget": "updown", "ui:title": "Age of person", "ui:description": "(earthian year)" "ui:widget": "textarea" "ui:widget": "password", "ui:help": "Hint: Make it strong!" "date": { "ui:widget": "alt-datetime" "ui:options": { "inputType": "tel" formData "firstName": "Chuck", "lastName": "Norris", "age": 75, "bio": "Roundhouse kicking asses since 1940", "password": "noneed" Powered by react-jsonschema-form.
Zoom sur l'effet parallaxe Après avoir abordé les arrière-plans extensibles (full background) nous allons continuer avec l'effet parallaxe. Cet effet graphique étant facile à comprendre et à mettre en place, vous allez pouvoir créer rapidement un site original. Ce tutoriel va utiliser jQuery ainsi que le plug-in jQuery-Parallax. Qu'est-ce que l'effet parallaxe ? Il s'agit d'un terme générique correspondant au déplacement de plusieurs éléments sur des couches et à des vitesses différentes. Au scroll (défilement de la vue) ou en fonction des coordonnées de la souris, les positions des différents fonds (ou éléments à animer) vont changer, ce qui va générer un effet de profondeur. Des exemples Utilisant le positionnement de la souris digitalhands.net bikingboss.com Utilisant le niveau du scroll nikebetterworld.com ok-studios.de driver-club Principe et théorie Grâce à l'utilisation de JavaScript, il est possible de déplacer les éléments par rapport à la position de la souris ou du niveau de défilement (scroll). En pratique
12 Amazing jQuery Tables This article was peer reviewed by Nuria Zuazo. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be! This popular article was updated on 10th November, 2016 to reflect the current state of jQuery table plugins. Tables are one of the oldest elements in HTML. Being an older part of the HTML spec, tables generally aren’t suited to mobile-centric designs, nor do they offer any advanced functionality out of the box. However, often you’ll want tables to be more modern, either fully supporting the mobile ecosystem by proving a responsive layout or by providing additional functions such as searching, filtering, sorting or other advanced features. In this article, we’re going to run through a selection of jQuery-powered plugins to create, extend or enhance your tables. Dynatable Dynatable is an incredibly powerful and in-depth table plugin that, among other things, creates tables with powerful features such as filtering, sorting and pagination. WebsiteGithub
jQuery : l’événement ! Enfin « les », événements. Je voulais un titre sensationnel. Vous connaissez certainement jQuery, l’excellente bibliothèque Javascript. Non ? Alors c’est ici. Le développement DOM/Javascript repose en grande partie sur les événements. jQuery propose deux manières de définir les événements : nous allons les analyser. Les « Event Helpers » Joli nom. Il s’agit d’une série de méthodes, reprenant le nom des événements DOM. Si aucun paramètre n’est passé, cette méthode déclenche l’événement. Si une fonction est passée en paramètre, elle s’exécutera lorsque l’événement sera déclenché (depuis le code comme vu juste au-dessus, ou « naturellement »). Vous trouverez la liste complète de ces méthodes sur la page de documentation des événements : Définir un événement Commençons par un exemple. L’événement onclick peut être défini sur un objet jQuery à l’aide de la méthode click() à laquelle est passée une fonction : La fonction passée en paramètre peut attendre un paramètre.