Super customized checkboxes and radio buttons with iCheck jQuery plugin. iCheck plugin works with checkboxes and radio buttons like a constructor. It wraps each input with a div, which may be customized by you or using one of the available skins. You may also place inside that div some HTML code or text using insert option. For this HTML: <label><input type="checkbox" name="quux[1]" disabled> Foo </label><label for="baz[1]">Bar</label><input type="radio" name="quux[2]" id="baz[1]" checked><label for="baz[2]">Bar</label><input type="radio" name="quux[2]" id="baz[2]"> With default options you'll get nearly this: <label><div class="icheckbox disabled"><input type="checkbox" name="quux[1]" disabled></div> Foo </label><label for="baz[1]">Bar</label><div class="iradio checked"><input type="radio" name="quux[2]" id="baz[1]" checked></div><label for="baz[2]">Bar</label><div class="iradio"><input type="radio" name="quux[2]" id="baz[2]"></div> By default, iCheck doesn't provide any CSS styles for wrapper divs (if you don't use skins).
Options These options are default: jQuery.twinkle · larsjung.de. Animated Text and Icon Menu with jQuery. Today we want to show you how to create a slick menu with a nice animation feature on hover. The idea is to make some elements slide out, change and animate the background color of the item and then slide the elements back in with a different color. View demoDownload source The inspiration for this menu comes from the website of the Pelican Miami Beach Hotel: The icons are taken from the incredible Noun Project that “collects, organizes and adds to the highly recognizable symbols that form the world’s visual language, so we may share them in a fun and meaningful way”. Visit the website of The Noun Project. So, let’s get started! The Markup Our HTML will be an unordered list where each list item will contain an anchor element with the three elements inside that we’ll animate: The data-hovercolor will be used to set the color of the text on hover.
Now, let’s make it stylish! The CSS Remember, we always reset our CSS with a reset.css that we’ll add to our main style. Formly - The form glamorizer for jQuery. Sticky - An unbelievably simple notification system for jQuery. Cookie. jQuery Plugin : jConfirmAction. In previous tutorial i was explained how to replace a boring confirmation box into a cute one. You’ll no longer see a pop up confirmation box but a flying bubble confirmation box upside your link. Then I was thinking it will be very usefull for future application development to use this script and that’s why i decided to create it as a jQuery plugin. So here is the line, jConfirmAction is a jQuery plugin that aims to replace a plain confirmation box with a cute one.
This plugin will help you to create a flying bubble confirmation box upside your link. Basically this plugin will create a DIV element that contains confirmation box after your clicked element, then it will appear with fading in and dissappear with fading out. See the example on the demonstration page. To create that one you just need to include jConfirmation plugin to your page, create a link, specify a class name, ask jConfirmAction to create a confirmation box and that’s it you have a cute confirmation box.
Delete Me. Freeow! - Un plugin jQuery de notifications avancées à la Growl. Freeow! Est un plugin jQuery permettant d'afficher très facilement des bulles de notifications dynamliques sur votre site dans un style Growl Mac. Un plugin intéressant pour donner un peu de dynamicité à votre site, lorsqu'un utilisateur valide un formulaire, affichez une notification, s'il fait une erreur, affichez en une autre. Le plugin est très simple d'utilisation et dispose de plusieurs options: Disparition automatique de la bulle de notification ou non.Délai de disparitionLes classes associées à la bulleStyle de départ et style de finEtc Voici un exemple d'utilisation: 1.
$("#freeow").freeow("Titre de ma bulle", "Message de ma bulle", { 2. classes: ["gray", "error"], 3. autoHide: false Ce code va afficher la notification dans l'élément d'id "freeow". A vous de le déclencher au moment voulu. Site Officiel.