DailyJS

jQuery Roundup: Airbnb Style Guide, jPanelMenu, Crumble, imgLiquid

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

jquery mobile images on-page guidance style-guides

jQuery Roundup: Airbnb Style Guide, jPanelMenu, Crumble, imgLiquid

Posted by Alex R. Young on .
Featured

jquery mobile images on-page guidance style-guides

jQuery Roundup: Airbnb Style Guide, jPanelMenu, Crumble, imgLiquid

Posted by Alex R. Young on .
Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

Airbnb JavaScript Style Guide

Airbnb JavaScript Style Guide is a pretty detailed JavaScript style guide that includes suggestions for jQuery. As a bonus, the Resources section includes links to other style guides (and DailyJS, thanks Airbnb!)

I've been using Google's Style Guide for a few projects, although I don't necessarily have a preference for any style guide. The code style used in examples on DailyJS came from trying to use horizontal space effectively (the blog has a fixed-width narrow design), but also by trying to make things explicit for beginners. Even these humble goals are subjective enough to cause endless arguments. The best advice I could give on the matter is to pick a style and be consistent.

jPanelMenu

jPanelMenu screenshot

jPanelMenu (GitHub: acolangelo / jPanelMenu) by Anthony Colangelo creates a navigation panel similar to those found in recent mobile applications. It can be configured to use selectors for the menu and an element that opens the menu:

var jPM = $.jPanelMenu({  
  menu: '#custom-menu-selector'
, trigger: '.custom-menu-trigger-selector'
});

jPM.on();  

This creates two div elements that contain the menu and the corresponding panel for the content.

jPanelMenu is well documented, and the documentation itself is built using the plugin so it doubles as a detailed example.

Crumble

Crumble (GitHub: tommoor / crumble, License: MIT) by Tom Moor is an interactive tour built using grumble.js. Similar to the plugins mentioned by Oded Ben-David in Introduction to On-Page Guidance, Crumble shows help bubbles that draw attention to elements on a page.

imgLiquid

imgLiquid (GitHub: karacas / imgLiquid, License: MIT/GPL) by Alejandro Emparan is a plugin for resizing images to fit a given container. It can try to fill a container or shrink the image instead, by using CSS:

$(selector).imgLiquid({ fill: true });

There's also a fadeInTime option that'll trigger a fadeTo animation.