X

jQuery.my: Data Binding in Real Time

If you are looking for a lightweight jQuery plugin for complex two-way data binding in real time, jQuery.my might be the perfect solution.

Here’s how it works: The tool mutates the object given as a data source, reflecting interactions between the user and the interface. Data bindings, facade appearance and CSS styling of an app are all defined using single manifest, which is standard javascript object. Manifests are JSONable.

Here are a few more features:

  • jQuery.my recognizes standard HTML controls and complex composites created using rich UI plugins. Controls built with jQuery UI, Select2, CodeMirror, Ace, Redactor, CLeditor, jQuery Mobile are supported out of the box.
  • jQuery.my provides comprehensive validation, conditional formatting, complex dependencies, runtime form structure manipulation. $.my forms can run nested, each jQuery.my instance can be a composite control for parent form.
  • Syntax of $.my manifest is very simple, lean and unobtrusive. There exist specialized in-browser IDE for $.my apps authoring. This IDE is a built-in component of cloudwall.me system.

The result is a fully interactive set of tools, tables, curves and layouts that can work in a variety of applications. Check out the demo to see how it can work for you.

 

  • Vanilla
X

Chartist: Simple Responsive Charts

Have you ever needed a great chart for your website design but did not know where to start? Chartist is a plugin that helps you create simple responsive charts for almost any design project.

This set of charts includes bar graphs, line charts, pie charts, circular charts, dot graphs, scatter plots, donut graphs and plenty of cool animations to bring your data to life. Every chart is designed so that you can customize it with your information.

And editing is a breeze. The CSS editor is easy to understand and compatible with almost any data.

Chartist is different from some of the other tools out there in that it is super easy to configure because it uses the convention method, it includes great flexibility in style, images are SVG based and it it built with Sass. Chart configuration behavior is based on media queries so that every chart renders perfectly every time. Plus, every element in Chartist is responsive.

You don’t have to worry about compatibility issues with this plugin either. It works will all major browsers. Chartist is waiting for you to download and test it out. The file is light (only 10kb) and has no dependencies. This might just be the charting tool you have been looking for.

 

X

Bootgrid: Grid Plugin Designed for Bootstrap

Bootgrid is a sleek and intuitive grid plugin designed for Bootstrap. This powerful table extender plugin comes with plenty of features to make building tables less of a headache.

Here are some of the features that make Bootgrid a great tool for table workflows — it’s responsively designed, comes with accessibility support, includes server-side data loading and dynamic manipulation, has easy navigation, has plenty of configuration options, includes a data API, has client-side data loading, comes with column converters and formats, includes single and multiple row selection support and localization tools.

The table features work for different types of data including text, number or a combination of text and numbers. Each column and row aligns neatly for a table that can be designed to match the aesthetic of your website.

When it comes to installation and use, Bootgrid can be implemented as a server-side tool or a client-side tool. There are plenty of settings and configuration options available in the plugin documentation.

The plugin is lightweight — coming in at only 4.7kb, is based on HTML5 and includes cross-browser support. Bootgrid will work on IE, Firefox, Chrome, Safari and Opera.

X

tableExport: Export HTML Tables

The tableExport plugin is a tool that will help you export HTML tables into a variety of other formats for other uses.

With this tool you can convert HTML tables to the following types:

  • JSON
  • XML
  • PNG
  • CSV
  • TXT
  • SQL
  • Microsoft Word
  • Microsoft Excel
  • Microsoft Powerpoint
  • PDF

And you can do it all with a simple install and export. The plugin is rather simple and does not have a lot of options, but it does have plenty of practical application.

X

Feyn: Draw Feynman Diagrams with SVG

Feyn is a jQuery plugin to help you draw Feynman diagrams with Scalable Vector Graphics (SVG). If you are not familiar with them, Feynman, or Feyn, diagrams are pictorial representations of mathematical equations.

Some of the features of this plugin include:

  • Automatic generation of clean SVG source code
  • Easy to use, easy to make fine adjustments
  • Predefined propagator styles, vertex types, and symbols
  • Support for typesetting labels and including external graphics
  • Lightweight, cross-browser, and fully documented

The plugin works will all modern browsers, including Firefox 4+, Chrome 7+, Opera 11.6+, Safari 5.1+ and Internet Explorer 9+.

This plugin uses JavaScript’s liberal object notation, whose simplicity and extensibility allow it to be both lightweight and powerful. You need a good understanding of SVG markup language to use this tool most effectively.

If you are wondering how the code works, the demo is a good place to start, but this plugin does not come with incredibly detailed instructions for use.

 

X

Circliful: Circle Loading Icon

The small circle loading icon is super trendy. Circliful allows you to create this element without images. It can be used as a loading icon or to display other types of information.

The tool is based on HTML5 canvas and jQuery and includes Font Awesome integration. It comes with plenty of options that can be set as different types of data attributes. Some of these options include:

  • Dimension
  • Text
  • Info
  • Width
  • Font styles
  • Percent
  • Color
  • Fill
  • Type
  • Border
  • Icon
  • Animations
  • Start and stop locations

The circle can fill — and show percent filled — based on almost any trigger action that you determine. The simple plugin has a pleasing aesthetic, trendy design and can work for a variety of projects.

X

Pizza Pie Charts: Responsive Pie Chart

Creating responsive pie charts for any device is a piece of pie with this tool.

Pizza Pie Charts is an easy to use plugin. It’s built with the Zurb responsive framework, Foundation, so you can quickly install it in current projects.

Here’s how you do it:

  • Include the JS plugin in the footer of the page and our CSS in the head.
  • Add a little HTML (it’s very easy).
  • You’ll need to include list items for the pizza slices.
  • Style the chart using the power of SASS.
  • Initialize the chart and you are ready to go.

Pizza Pie Charts are designed with SVG so they will look good on any device, including retina displays. Images will also perfectly fit the width of your container elements using a max-width or max-height.

X

FloatThead

Floating/sticky table header plugin that supports window and overflow scrolling.

  • Spotlight
X

Dynatable

Fun, semantic, interactive table plugin using jQuery, HTML5, and JSON.

  • Spotlight
X

ReStable

Make tables responsive by making them collapse into ul lists.

  • Spotlight
X

FooTable

Makes HTML tables on smaller devices look awesome.