반응형

10 Best jQuery Plugins for December 2013

 

1. Adaptive Backgrounds

adaptive-backgrounds
Adaptive Backgrounds is a jQuery plugin for extracting dominant colors from images and applying it to its parent element. This plugin utilizes the canvas element and the ImageData object, and due to cross-site security limitations, the script will fail if one tries to extract the colors from an image not hosted on the current domain, unless the image allows for Cross Origin Resource Sharing.

Source

2. Dynatable

dynatable
Dynatable is a funner, semantic, interactive table plugin using jQuery, HTML5, and JSON. And it’s not just for tables. The purpose of Dynatable is to provide a simple, extensible API, which makes viewing and interacting with larger datasets easy.
Dynatable provides a framework for implementing the most common elements out of the box, including sorting, searching and filtering. Above all, Dynatable is a clean and elegant API that is fun to use.

Source

3. jQuery Label Better

jquery-label-better
jQuery Label Better helps you label your form input like a boss with beautiful animation and without taking up space. The uniqueness about this plugin is that all you have to do is add a placeholder text, and we will show the label only when the user needs it.
To add this to your website, simply include the latest jQuery library together with jquery.label_better.js into your document’s head, and simply call the function. Modern browsers such as Chrome, Firefox, and Safari on both desktop and smartphones have been tested.

Source

4. sDashboard

sdashboard
sDashboard is a simple & light weight dashboard jQuery plugin that converts an array of objects into a dashboard. Each object in the array would be rendered as a dashboard widget that can be rearranged by dragging around.
sDashboards has built in support for rendering datatable’s and flotr2 charts. It also has support to listen for events such as table row click, chart data click and data selection built-in. sDashboard depends on the following libraries: jQuery, jQuery UI, Datatables and Flotr2 charts (required for charting widgets).

Source

5. Multi Level Push Menu

multilevel push menu
Multi-level push menu is cross-browser compatible jQuery plug-in allowing endless nesting of navigation elements. It has support for unlimited levels, works cross browser/platform and makes things much easier for touch devices with swipe gestures. The menu can be set to next from left-to-right or right-to-left and all works with a simple markup (unordered lists).

Source

6. Alloftheheights. Js

alloftheheights
Allofthelights.js is a jQuery plugin that can change the opacity of the whole webpage but leave the video player. This is for helping the user to easily focus on the video and there is built-in support for YouTube, Vimeo, DailyMotion.. and custom players can be added too. It works with multiple players on the same page and supports responsive layouts/players with no issues. The animation speed, background color and opacity can all be customized an callback functions exist.

Source

7. PhotoJShop

photojshop
PhotoJShop is a jQuery plugin that enables us to apply such simple effects/filters to images. These filters include blur, sepia, emboss, lighten, darken, b&w, sharpen and more. The plugin works on canvas + images and the filters to be applied can be chained for easier usage.

Source

8. jQuery Interactive 3D

jQuery Interactive 3D
jQuery Interactive 3D is a plugin that allows us to accomplish a similar functionality using multiple images. It is so easy to use and works with a simple function and a list of specifically-named images. And, there are options for customization like the cursor icon, speed, touch support, auto-play and more.

Source

9. jQuery Lazy Load XT

lazyload
Lazy Load XT is a jQuery plugin for loading effects on images, videos, and other media. It works with YouTube videos, jQuery mobile, the Zepto library, and much more.

Source

10. jQuery Restable

restable
jQuery ReStable is a jQuery plugin that makes your tables responsive by turning them into UL lists when necessary. It’s lightweight, around 1kb, and very simple.

Source

반응형
반응형
60 Stunning jQuery Plugins for Websites

 

Scrolld.js

freejQueryPlugins-35

Resumable.js

freejQueryPlugins-36

WhatsNearby

freejQueryPlugins-37

Isotope

freejQueryPlugins-38

Minimalect

freejQueryPlugins-39

EasyDropDown

freejQueryPlugins-40

Selectize.js

freejQueryPlugins-41

Nivo Lightbox

freejQueryPlugins-42

jQuery CollagePlus

freejQueryPlugins-43

FilmRoll

freejQueryPlugins-44

Glide.js

freejQueryPlugins-45

Excolo Slider

freejQueryPlugins-46

CarouFredSel

freejQueryPlugins-47

OWL Carousel

freejQueryPlugins-48

Sticky-Kit

freejQueryPlugins-49

FlowType.JS

freejQueryPlugins-50

Moa Modal

freejQueryPlugins-26

Succinct

freejQueryPlugins-27

FailSafe

freejQueryPlugins-28

onScreen

freejQueryPlugins-29

Touche.js

freejQueryPlugins-30

Offline.js

freejQueryPlugins-31

Peeler.js

freejQueryPlugins-32

Mobify.js

freejQueryPlugins-33



At.js

freejQueryPlugins-34

Vortex

freejQueryPlugins-1

CLNDR.js

freejQueryPlugins-2

Selectric

freejQueryPlugins-3

FullPaged

freejQueryPlugins-4

jQuery Mapael – Build dynamic vector maps

freejQueryPlugins-5

Swatches

freejQueryPlugins-6

Block Slide

freejQueryPlugins-7

Toolbar.js

freejQueryPlugins-8

jqTimeline

freejQueryPlugins-9

jQuery Spellchecker

freejQueryPlugins-10

ScrollUp

freejQueryPlugins-11

Nod Frontend Validation

freejQueryPlugins-12

Any List Scroller

freejQueryPlugins-13

Tumbo 1.0 – Show Tumblr feeds on your website – Jquery plugin

freejQueryPlugins-14

Responsive Text

freejQueryPlugins-15

ImageFill-js

freejQueryPlugins-16

Tipue Drop

freejQueryPlugins-17

Resizable Columns

freejQueryPlugins-18

BIGVIDEO.JS

freejQueryPlugins-19

stickUp

freejQueryPlugins-20

Tabslet

freejQueryPlugins-21

Offreg

freejQueryPlugins-22

jQuery Fullscreen Editor

freejQueryPlugins-23

jVanilla Menu

freejQueryPlugins-24

Snap.svg

freejQueryPlugins-25

반응형
반응형

Best jQuery Plugins of the Week [15th December-21st December]

 

Best jQuery Plugins of the Week

1. uinit

Developed by Joakim Carrilho de Almeida, uinit is a jQuery plugin that helps in customizing HTML attributes to automate the creation of widgets.

Download

2. jVanilla Menu

jVanilla is a menu jQuery plugin that takes an existing pure CSS drop-down menu and adds enhancements such as animations, submenu levels and timeout delays to it.

best-jquery-plugins

Demo | Download

3. jQuery Responsive Lazy Loader

Developer by J-Et. Martin, Responsive Lazy Loader is a plugin enables users to load images renditions according to CSS display and breakpoint..

best-jquery-plugins

Demo | Download

4. Password Checker

Password Checker by Nicolas Zhao is a jQuery plugin for detecting the strength of the password that a user enters.

Download

5. Snap.svg

Snap.svg is a JavaScript SVG library for the modern web. SVG is a smart way of creating an interactive, resolution-independent vector graphics that will look great on different size screens.

best-jquery-plugins

Demo | Download

6. jQuery Prettychecks Plugin

Prettychecks plugin helps replace the default user agent checkboxes and radios for custom images.

best-jquery-plugins

Download

7. Squishy

Squishy is a best jQuery plugin that automatically resizes text to fit the container with no extra work on your part.

best-jquery-plugins

Download | Demo

8. jQuery dropList

Developed by Dinesh Vadivel dropList is a lightweight jQuery plugin for customizing UI style for drop down list. The plugin has drop list, multi-list and combo list options.

Download

9. Infinite Scroll

Developed by Haralan Dobrev, Infinite Scroll is a jQuery plugin that is fast, bi-directional to help in endless pagination.

Download

10. Succinct

Succint is a tiny jQuery plugin for truncating multiple lines of text. It shortens your text to a specified size and then adds an ellipsis to the end.

best-jquery-plugins

Download | Demo

11. Field Chooser

Developed by Matthew Eagar, field chooser is plugin for dragging and dropping items between two lists with multi-select and keyboard shortcuts.

Download

12. Moa Modal

Moa Modal is a flexible jQuery modal plugin that features custom animation and positioning for users ti make optimum use of it.

best-jquery-plugins

Demo | Download

13. iCheck

iCheck by Damir Sultanov is a highly customizable checkboxes and radio buttons jQuery plugin that comes fully loaded with features like identical inputs across different browsers and devices, touch devices support, provides 32 options to customize checkboxes and radio buttons, and the list continues.

Demo | Download

반응형
반응형
30 Best jQuery Popup Window Dialog Box plugins

 

1. A Popup Dialog Box for jQuery Mobile

BJPWDBP01

Demo & Download

2. JQuery SuperBox

BJPWDBP02

Demo & Download

3. Avgrund Modal

BJPWDBP03

Demo & Download

4. JavaScript Modal Windows

BJPWDBP04

Demo & Download

5. JQuery Confirm Dialog Replacement

BJPWDBP05

Demo & Download

6. JQuery Custom PopUp Window

BJPWDBP06

Demo & Download

7. JQuery Modals Made Easy

BJPWDBP07

Demo & Download

8. Popup Modal Window

BJPWDBP08

Demo & Download

9. SIMPLE & NICE MODAL POPUP USING JQUERY

BJPWDBP09

Demo & Download

10. A lightweight dialog box jQuery plugin

BJPWDBP10

Demo & Download

11. A simple message plugin for jQuery

BJPWDBP11

Demo & Download

12. BPopup

BJPWDBP12

Demo & Download

13. Custom JavaScript Dialog Boxes

BJPWDBP13

Demo & Download

14. Facebook like Dialog Overlay With Frills

BJPWDBP14

Demo & Download

15. Facebook Style Alert Confirm Box

BJPWDBP15

Demo & Download

16. JavaScript Popup lightbox

BJPWDBP16

Demo & Download

17. JQuery pop Box

BJPWDBP17

Demo & Download

18. JQuery PopBox Sign Up

BJPWDBP18

Demo & Download

19. JQuery Popup Login Dialog Box

BJPWDBP19

Demo & Download

20. JQuery Popup Modal Dialog Plugins

BJPWDBP20

Demo & Download

21. JQuery Popup Plugin

BJPWDBP21

Demo & Download

22. JQuery YouTube Popup Player Plugin

BJPWDBP22

Demo & Download

23. Lightview

BJPWDBP23

Demo & Download

24. Login Box Modal Dialog Window

BJPWDBP24

Demo & Download

25. Popup Dialog Windows using JQuery

BJPWDBP25

Demo & Download

26. Pop up Survey with jQuery UI Dialog

BJPWDBP26

Demo & Download

27. Simple jQuery Plugin for Popup Window

BJPWDBP27

Demo & Download

28. Simple Modal jQuery Alert

BJPWDBP28

Demo & Download

29. Simple Modal jQuery Popup Box

BJPWDBP29

Demo & Download

30. The Noty jQuery Plugin

BJPWDBP30

Demo & Download

 

 

 

 

반응형
반응형

 

60 Top jQuery Plugins of 2013

 

 

fullPage.js

jquery pluginsA simple and easy to use plugin to create fullscreen scrolling websites. (also known as single page websites) It allows to create fullscren scrolling websites as well as adding some landscape sliders inside the sections of the site.
Source

SlideMe

jquery pluginsA responsive, css3, compatible (works fine even with IE7), customizable, easy to install (and use), multi-instance, fullscreen, cool, powerful slideshow plug-in for jQuery.
Source

Tabslet

jquery pluginsYet another jQuery plugin for tabs with some extra features like custom events, rotation and animation.
Source

Textillate.js

22.jquery plugins 2013A simple plugin for CSS3 text animations.Textillate.js combines some awesome libraries to provide an easy-to-use plugin for applying CSS3 animations to any text.
Source

Snap.svg

23.jquery plugins 2013SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM.
Source

Maplace.js

24.jquery plugins 2013A small jQuery Plugin for Google Maps
Source

Scrolld.js

25.jquery plugins 2013Scrolld.js is a unique open source plugin for jQuery. Scrolld.js provides a method for highly precise scrolling for pixel-perfect layouts and navigation using real-time updated data values. With Scrolld.js your scrolling to items will always be exact and will always provide the best user experience. Scrolld.js is specifically designed to support responsive designs and turns navigating long pages into a simple task.
Source

Free Wall

26.jquery plugins 2013Freewall is a cross-browser and responsive jQuery plugin to help you create many types of grid layouts: flexible layouts, images layouts, nested grid layouts, metro style layouts, pinterest like layouts … with nice CSS3 animation effects and call back events. Freewall is all-in-one solution for creating dynamic grid layouts for desktop, mobile and tablet.
Source

One Page Scroll

jquery pluginsOne Page Scroll let you transform your website into a one page scroll website that allows users to scroll one page at a time. It is perfect for creating a website in which you want to present something to the viewers.
Source

Flowtype.js

jquery pluginsIdeally, the most legible typography contains between 45 and 75 characters per line. This is difficult to accomplish for all screen widths with only CSS media-queries. FlowType.JS eases this difficulty by changing the font-size—and subsequently the line-height—based on a specific element’s width. This allows for a perfect character count per line at any screen width.
Source

Albumize

jquery pluginsAlbumize is a jQuery plugin that lets you manage collection of images in the web page as albums. With albumize, you can browse albums, add cover image to albums and switch between albums.
Source

Smint

jquery pluginsSmint is a simple jQuery plugin that helps with the navigation on one page style websites.It has 2 main elements, a sticky navigation bar that stays at the top of the page while you scroll down and menu buttons that automatically scroll the page to the section you clicked on.
Source

Loda Button

jquery pluginsjQuery plugin that animates the button icon with CSS3 when loading
Source

Scrollocue

jquery pluginsScrollocue is a jQuery plugin for building a simple autocue/teleprompter system, to scroll through lines of text.Walk through the autocue text with the arrows, space bar or just click.
Source

floatlabels.js

jquery plugins 2013On User Interaction with an input field the placeholder value moves up, and is displayed above the typed text.
Source

jQuery Label Better

2.jquery plugins 2013Label your form input like a boss with beautiful animation and without taking up space
Source

Tabulous.js

3.jquery plugins 2013A jQuery tabs module for todays web.Tabulous.js can be used with any contents you choose in the tabs and it couldn’t be more simpler to use.
Source

Headroom.js

4.jquery plugins 2013Headroom.js is a lightweight, high-performance JS widget (with no dependencies!) that allows you to react to the user’s scroll. The header on this site is a living example, it slides out of view when scrolling down and slides back in when scrolling up.
Source

jQuery Knob

5.jquery plugins 2013Nice, downward compatible, touchable, jQuery dial.Implemented interactions : mouse click and wheel mouse, keyboard (on focus) and fingers (touch events).
Source

jQuery Gridly

6.jquery plugins 2013Gridly is a jQuery plugin to enable dragging and dropping as well as resizing on a grids. In the example below try tapping or dragging any of the bricks.
Source

FloatLabel.js

7.jquery plugins 2013A jQuery plugin for floating form labels.As FloatLabel.js works by using CSS classes, the animations can be tweeked within jquery.FloatLabel.css.If the default classes conflict with the rest of your CSS for whatever reason, you can change them by passing in paramaters when you initialise the plugin. Don’t forget to update jquery.FloatLabel.css with your new class names if you need to make a change.
Source

Succinct

8.jquery plugins 2013A tiny jQuery plugin for truncating multiple lines of text.
Source

JResponsive

9.jquery plugins 2013A simple jQuery plugin that allows you to add a dynamically-resized layout to any page or element, customize the layout the way you want with or without top,right,left or bottom navigations
Source

Salvattore

10.jquery plugins 2013A jQuery Masonry alternative with CSS-driven configuration.Salvattore distributes your grid items according to the number of columns you specify. Each of the items in your grid is placed within these columns, one by one.
Source

FlexNav

11.jquery plugins 2013FlexNav is a mobile-first example of using media queries and javascript to make a decent multi-level menu with support for touch, hover reveal, and keyboard tab input accessibility. Special attention is paid to touch screens using tap targets (the key feature of FlexNav).
Source

Sidr

12.jquery plugins 2013Sidr is a jQuery plugin for creating side menus and the easiest way for doing your menu responsive.
Source

jQuery ScrollNav

13.jquery plugins 2013A jQuery plugin for building a scrolling side navigation menu
Source

ScrollUp

14.jquery plugins 2013ScrollUp is a lightweight jQuery plugin to create a customisable “Scroll to top” feature that will work with any website, with ease.
Source

ContentShare

15.jquery plugins 2013ContentShare is a jQuery plugin which lets you share the exact content on a page which you actually want to share. It enables you to share selected text on your social network rather the default text specified in the meta tags.
Source

Formance.js

16.jquery plugins 2013A jQuery library for formatting and validating form fields, based on Stripe’s jQuery.payment library.
Source

slideToucher

17.jquery plugins 2013slideToucher, touch enabled jQuery plugin for content swiping. Supports vertical and horizontal swipes.
Source

FilmRoll

18.jquery plugins 2013FilmRoll is a lightweight jQuery carousel (8.4 kb) that focuses on one item at a time, centering it in the view, regardless of the relative sizes of the carousel items.
Source

Block Slide

19.jquery plugins 2013A CSS3 Animated Modal Window Image Gallery jQuery Plugin
Source

typeahead.js

20.jquery plugins 2013Inspired by twitter.com’s autocomplete search functionality, typeahead.js is a fast and fully-featured autocomplete library.
Source

Squishy

21.jquery plugins 2013Squishy is a jQuery plugin that automatically resizes text to exactly fit the container with no extra work on your part.
Source

stickUp

27.jquery plugins 2013A simple plugin that “sticks” an element to the top of the browser window while scrolling past it, always keeping it in view. This plugin works on multi-page sites, but has additional features for one-pager layouts.
Source

Glide.js

28.jquery plugins 2013Glide is responsive and touch-friendly jQuery slider. Based on CSS3 transitions with fallback to older broswers. It’s simple, lightweight and fast. Designed to slide, no less, no more.
Source

Riot.js

29.jquery plugins 2013An incredibly fast, powerful yet tiny client side framework for building large scale web applications.
Source

slidr.js

30.jquery plugins 2013A simple, lightweight javascript library for adding slide transitions to your page. No dependencies required.
Source

Query Popdown Plugin

31.jquery plugins 2013Sometimes you just need a little popdown to spice up your interface. Here are a few examples:
Source

Offline.js

32.jquery plugins 2013Offline.js is a library to automatically alert your users when they’ve lost internet connectivity, like Gmail.
Source

CircleType.js

33.jquery plugins 2013Circletype.js is a tiny (2.7kb) jQuery plugin that lets you set type on a circle
Source

jQuery Valideasy

34.jquery plugins 2013Never write complex JS script again to handle your form validation rules! With Valideasy, everything’s done via HTML attributes added to your form fields.
Source

DropzoneJS

35.jquery plugins 2013DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.
Source

Odometer

36.jquery plugins 2013Odometer is a Javascript and CSS library for smoothly transitioning numbers.
Source

Rainyday.js

37.jquery plugins 2013A simple script for simulating raindrops falling on a glass surface.
Source

TogetherJS

38.jquery plugins 2013TogetherJS is a free, open source Javascript library by Mozilla that adds collaboration features and tools to your website. By adding TogetherJS to your site, your users can help each other out on a website in real time.
Source

pace.js

39.jquery plugins 2013Include pace.js and the theme css of your choice, and you get a beautiful progress indicator for your page load and ajax navigation.No need to hook into any of your code, progress is detected automatically.
Source

AnimateScroll

40.jquery plugins 2013AnimateScroll is a jQuery plugin which enables you to scroll to any part of the page in style by just calling the animatescroll() function with the Id or Classname of the element where you want to scroll to.
Source

CLNDR.js

41.jquery plugins 2013CLNDR is a calendar plugin that uses HTML templates, allowing you to write custom markup and styles that have access to useful calendar data.
Source

selectize.js

42.jquery plugins 2013Selectize is an extensible jQuery-based custom UI control. It’s useful for tagging, contact lists, country selectors, and so on. It clocks in at around ~7kb (gzipped). The goal is to provide a solid & usable experience with a clean and powerful API.
Source

favico.js

43.jquery plugins 2013Make a use of your favicon with badges, images or videos
Source

animo.js

44.jquery plugins 2013A powerful little tool for managing CSS animations. Stack animations, create cross-browser blurring, set callbacks on animation completion, make magic.
Source

Chart.js

45.jquery plugins 2013Easy, object oriented client side graphs for designers and developers
Source

CollagePlus

46.jquery plugins 2013This plugin for jQuery will arrange your images to fit exactly within a container. You can define the padding between images, give the images css borders and define a target row height.
Source

elementTransitions.js

47.jquery plugins 2013This repository is a wrapper around the code provided by a codrops article on page transitions. Their code has been modified to allow more than one animatable element per page. Additionally, you can now add transitions straight from html tags.
Source

Progression.js

48.jquery plugins 2013A jQuery plugin that gives users real time hints & progress updates as they complete forms.
Source

HeapShot

49.jquery plugins 2013jQuery HeapShot plugin is an image gallery plugin with a particular effect.
Source

Flat Shadow

jquery pluginsA small jQuery plugin that will automatically cast a shadow creating depth for your flat UI elements
Source

Intro.js

50.jquery plugins 2013Better introductions for websites and features with a step-by-step guide for your projects.
Source

반응형
반응형

15 jQuery CSS Plugins to Speed Up Your Coding

 

 

1. Stickup

stickup
Stickup is a simple jQuery plugin that “sticks” an element to the top of the browser window while scrolling past it, always keeping it in view. This plugin works on multi-page sites, but has additional features for one-pager layouts.
Although stickUp was made to work on any kind of website, it was originally designed for the “one-pager” style of websites. By using CSS the sticky navigation menu item will be highlighted as it’s correlating content is scrolled in and out of view.

Source

2. CircleType.js

circletypejs
Circletype.js is a lightweight , tiny jquery plugins that helps you to set type on a circle. Its quite useful and only 2.7 kb jquery plugin. It has numerous features such as it uses any font, adjust letter spacing as usual with CSS, flip it around so it reads counter-clockwise instead, set the radius manually or let CircleType.js figure it out for you, work in fluid and responsive layouts and plays well with FitText.js.

Source

3. Glide.js

glide-js2
Glide.js is a lightweight (4.5kb minified) jQuery plugin for creating sliders. It has completely customizable OOCSS markup and uses CSS3 transitions but has fallback to JavaScript. The slider is responsive; it’ll adapt well to all devices and comes with touch support.

Source

4. Animo.js

animo2-js
Animo.js is a powerful little tool for managing CSS animations. It includes features like Stack animations, create cross-browser blurring, set callbacks on animation completion. Animo includes the amazing animate.css library by Dan Eden which provides you with nearly 60 beautiful animations from attention seekers to entrances and exits. He has also added a few helper animations to the library.
Animo’s only dependency is jQuery 2 or later. The source includes animate.css plus the helper animations made specifically for animo but you can use whatever stylesheet of animations you’d like.

Source

5. Salvattore

salvattore
Salvattore is a jQuery Masonry alternative with CSS-driven configuration. Salvattore organizes your HTML elements according to the number of columns you specify. Each of the items in your container is placed within these columns, one by one. To get started simply add a data-columns attribute to the container.
In your CSS file you can set the number of columns you want to be created inside that element. To create a responsive columnar design, just use media queries. Items are appended and prepended on the same container without conflicts. You can combine this API with your XHR functions to have a dynamic layout with live content.

Source

6. Mixit Up

mixitup-jquery
MixItUp is a light-weight but powerful jQuery plugin that provides beautiful animated filtering and sorting of categorized and ordered content. It plays nice with your existing HTML and CSS, making it a great choice for fluid, responsive layouts. It’s perfect for portfolios, galleries, blogs, or any categorized or ordered content.
MixItUp uses jQuery to decide which elements to hide, show or re-position based on your filters, and then applies the power of CSS3 transitions to smoothly animate these elements to their new locations. MixItUp is optimized for the current generation of modern, CSS3-ready browsers. Due to its light-weight and efficient approach, It works beautifully and smoothly on all modern devices including smartphones and tablets.

Source

7. Fancy Input

Fancy Input
Fancy Input, a jQuery plugin, doesn’t focus on the styling part but makes the fields attractive (and fun-to-use) by adding CSS3-powered effects. The plugin hides the input field, places a span element containing the character pressed and applies CSS3 transitions to each element (letter). There are multiple built-in effects and it works with both input + textarea fields.

Source

8. Transit

Transit
Transit is a super-smooth CSS transitions & transformations for jQuery. You can make transition on any CSS property. They will happen much smoother than if you were to use jQuery’s default .animate(). You can easily translate, rotate, scale, skew and etc.
Transit degrades older browsers by simply not doing the transformations (rotate, scale, etc) while still doing standard CSS (opacity, marginLeft, etc) without any animation. Delays and durations will be ignored. It is released under MIT License.

Source

9. CSS Emoticons

jQuery CSS Emoticons Plugin
The CSS Emoticons plugin is a simple jQuery plugin (and stylesheet) that allows you to turn any text emoticons on the page into cute little smiling faces with pure CSS3 styling (no images whatsoever). The result is great-looking emoticons that leave the text exactly as written (so that the text emoticons actually get copied and pasted with the text if you select a block of text from the page). This uses the CSS3 properties, transform, border-radius, box-shadow, gradient, and transition (when supported).

Source

10. Minimit Anima

Minimit anima
Minimit Anima is a jQuery plugin to animate with transforms and transitions. It’s hardware accelerated css3 animations which is built to have fast animation execution, and it has an api similar to jquery animate, with animations queuing.
By default the anima method do automatic fallback animation on browsers not supporting transitions or transformed. It also does scale, rotate and skew animations on browsers without transitions from jquery.transform.js already included in the plugin.

Source

11. Tooltipster

Tooltipster
Tooltipster is a powerful, flexible jQuery plugin enabling you to easily create semantic, modern tooltips enhanced with the power of CSS. Tooltipster allows you to use any HTML tag you can think of inside your tooltips. This means you can insert things like images and text formatting tags.

Source

12. ScrollUp

scroll-up-jquery
ScrollUp is a lightweight jQuery plugin to create a customisable “Scroll to top” feature that will work with any website, with ease. To create a visible line to help determine an ideal scroll distance from the top, assign a valid CSS color to the activeOverlay setting.

Source

13. Textillate.js

Textillate.js
Textillate.js is a simple plugin for CSS3 text animations. Textillate.js combines some awesome libraries to provide an ease-to-use plugin for applying CSS3 animations to any text. Simply include textillate.js and it’s dependencies in your project to start creating unique effects. Textillate.js is built on top of the simple, yet amazingly powerful animate.css and lettering.js libraries.

Source

14. Motio

Motio
Motio is a jQuery plugin for simple but powerful sprite based animations and panning. Motio is called on an element representing animation container, where animation is delivered as a CSS background image.
In sprite based animations, container should have the dimensions of one sprite frame. E.g, if you have 10 frames in a horizontal sprite that is 1000 x 100 pixels big, the container should be 100 x 100 pixels big. In panning, container size doesn’t play any role, just the background image should be seamless.

Source

15. Photobox

photobox
Photobox is a CSS3 Image Gallery JQuery Plugin. It is beautiful and posses a great look & feel. Both the script & CSS are only 7k each. It uses silky-smooth, hardware accelerated, CSS3 transitions and animations for better performance.
It works also on IE9 and above, but clearly not as nice as in normal browsers. Image can be zoomed in and out with mousewheel and navigated using mousemove to move around. The bottom row of thumbnails can be navigated by mouse movement. It supports keyboard keys for navigation and closing the gallery view.

Source

반응형
반응형

Responsive tables to list jQuery plugin

 

https://github.com/micc83/ReStable

 

jQuery ReStable

jQuery ReStable is a very simple and lightweight (~1Kb) jQuery plugin that make tables responsive making them collapse into ul lists.You can find some examples in the included demo or here.

 

 

 

반응형
반응형

 

http://feeds.dzone.com/~r/dzone/frontpage/~3/RxeQpCjTqSs/15_useful_jquery_grid_plugins_for_developers.html

15 Best jQuery Grid Plugins for Developers

 

1. Freewall

Freewall
Freewall is a cross-browser and responsive jQuery plugin to help you create many types of grid layouts: flexible layout, images layout, nested grid, fluid grid, metro style layout, pinterest like layout with nice CSS3 animation effects and call back events. Freewall is all-in-one solution for creating dynamic grid layouts for desktop, mobile and tablet.
It is based on the width (or height) of a container and the width (height) of a cell unit, It will create a virtual matrix. Scanning the matrix at each cell will find a free cell around to made a free area, then try to fit a block element into it. In case no block can fit the gap, it will resize the block to fill the gap (that is one of the options).

Source

2. S Gallery

s-gallery
S Gallery is a jQuery image gallery plugin that displays images in a responsive grid. It is inspired from the gallery in Sony’s product pages (which is made with Flash) and mimics that completely. Once an item is clicked and focused, it is possible to browse others with prev-next buttons or via keyboard. Returning back to the grid view is possible with a click and, also, a fullscreen option exists (uses HTML5 Fullscreen API).

Source

3. Mason.js

masonjs
There are various JavaScript-powered solutions for creating dynamic-column grid layouts (like Pinterest). Although most of them are great, sometimes, the grids contain gaps or ragged edges. Mason.js is a jQuery plugin that aims to perfect such grids by filling those gaps smartly. One the grid is created, the plugin calculates where those gaps exist and fills them with either predefined elements or by duplicating the content in the grid. It is possible to define the sizes to be used for elements, the size of columns/rows, breakpoints and if the layout will be fluid or fixed.

Source

4. jQuery.Shapeshift

jQueryShapeshift
There are various jQuery plugins for creating Pinterest-like dynamic grid layouts. jQuery.Shapeshift is a strong alternative to them with an an extra touch :the items can be drag ‘n’ dropped (uses jQuery UI). The drag ‘n’ drop doesn’t affect the grid negatively as the grid auto-fills the gaps when needed. It also works on touch devices and responsive layouts. The plugin comes with lots of options to set the margins, enable/disable drag-drops, customize animation and much more.

Source

5. jQuery Nested

jQuery Nested
Nested is a jQuery plugin for generating multi-column grid layouts with zero gaps. The plugin creates a matrix of all elements, builds a multi column grid and tries to fill any gaps by reordering the elements. There are various other solutions out there that does the same. However, Nested applies one small action: it resizes any element at the bottom of the grid to guarantee the gap-free layout. Its usage is very easy by simply targeting a container element through a jQuery function. And, various options exist for customization like enabling/disabling animation, min. number of columns and more.

Source

6. Wookmark jQuery Plugin

wookmark
The dynamic column grid layouts are so popular not only because it is used by Pinterest but also because it is a great way of displaying content with different sizes. Wookmark, a Pinterest alternative, has released a jQuery plugin for creating such layouts, that work well on each browser, instantly. The plugin has very few options to set: the container element, offset (vertical/horizontal distance) and width of the items, that’s all. Once initialized, it gets the size of the window and auto-arranges the grid (yes, it is responsive).

Source

7. Grid-A-Licious

Grid A Licious
Grid-A-Licious is a jQuery plugin that enables us to easily create Pinterest-like floating-grid layouts. There are other resources to create such an output but Grid-A-Licious differs itself by offering a completely responsive solution. Regardless of the screen size or device, the grid fits perfectly as it is floating (no absolute positioning is used) and fluid. The plugin has options to customize the width, gutter and animation (speed, duration, effect, etc.). And, it supports appending/prepending new items to the grid which is useful for dynamic layouts.

Source

8. jPhotoGrid

jphotogrid
jPhotoGrid takes a simple list of images and captions and turns it into a grid of photos that can be explored and zoomed. Nearly all of the styling for this plugin is done in css. The trick is to layout the grid by floating the list items. The first thing the plugin will then do, is convert these all to absolutely positioned. This is what allows the plugin to zoom in on an individual image and then return it to its place.

Source

9. Gridster

gridsterjs
Gridster is an impressive jQuery plugin to develop iGoogle-like multi-column grids that can be drag ‘n’ dropped and re-ordered. The plugin only requires jQuery (no jQuery UI) and can convert any given HTML structure into the widgets of the grid. And, we are not limited with the elements loaded initially but can add and remove new ones dynamically.

Source

10. Photoset Grid

photoset-grid
Photoset Grid is a simple jQuery plugin to arrange images into a flexible grid, based on Tumblr’s photoset feature. Originally the plugin was created for the Style Hatch Tumblr themes as a way to use the photoset grid in responsive layouts, but they have since expanded it and released a jQuery plugin for us.

Source

11. Flex

flex-jquery-plugin
Flex is a fluid asymmetrical animated grid plugin for jQuery. You can mouse over the tiles to see them expand. Flex is an idea inspired by the old flash homepage on Adidas.com.

Source

12. Freetile

freetile
Freetile is a plugin for jQuery that enables the organization of webpage content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will attempt to arrange it’s children in a layout that makes optimal use of screen space, by “packing” them in a tight arrangement.

Source

13. Griddy

griddy
Griddy is a small JQuery plugin thats creates a simple, customizable grid overlay on top of any element. It can also calculate row heights and column widths automatically based on the number of rows/columns and gutter space. There are few options, including: rows, row height, row gutter, columns, column height, column width, color and opacity.

Source

14. jSquares

jsquares
jSquares is a jQuery plugin that pops up an image and a description in an overlay on hover. It is basically identical to the image grid found on www.ted.com. There are some parameters can be added when you call jSquares, e.g. caption size, opacity of the images, shuffle speed and etc. It works like a charm in IE6+, FF 3+, Safari 3+ and Opera 10.

Source

15. jqGrid

jqgrid
jqGrid is an Ajaxed jQuery grid plugin with amazing features. As the grid is a client-side solution that loads data with Ajax callbacks, it can be used with any server-side language like ASP, PHP, ASP.NET, JSP and so. A clever feature is sub grids which shows you a sub grid when a master column is called.

Source

반응형

+ Recent posts