Simple HTML5 form and table enhancements. jQuery Minjs

Lightweight jQuery Plugins which does not dictate you how to design your UI. They are tries to make no assumptions about the layout of the HTML or CSS it's running in.
Minjs is not a framework; it’s just a collection of independent and minimalistic components for jQuery with main aim to improve the usability of HTML tables and forms.

Minform

A jQuery plugin that takes a minimalistic approach to enhancing
forms.
It aims for:

  • minimal markup: HTML5 form attributes
  • minimal code: leaning on jQuery to do the heavy lifting
  • minimal UI: subtle hints rather than explicit instructions

Features
placeholders:
You need to style "placeheld" inputs yourself. A good default is:

.placeheld {
  color: #A0A0A0;
  font-style: italic;
}

autofocus:
Automatically focuses the element on document.ready.

required:
Will block form submission and focus the required element if it's not been
filled in.
Download Minform jQuery plugin


Longtable

This plugin adds features to tables with minimal fuss. It takes an existing HTML table and converts it into a paged table. No need to worry about AJAX, etc.

Features

  • paging
  • minimal code
  • all controls rendered inside the table itself (currently the tfoot)

How to Use

$('#your-table').longtable();

Functions
gotoPage(n) - jump to the given page number

Events
'longtable.pageChange' - triggered when the page changes (passes the page number)

Notes

  • Rows to be paged must be in the tbody
  • Does not support adding/removing table rows.

Download Longtable jQuery plugin


Dr.Cal

A minimalistic javascript calendar (not a date picker). It provides a minimal "calendar framework". It handles the date calculations and a few other basic tasks and leaves the behavior and styling up to you.

It leaves most of the rest of the work to you.

var cal = $.cal();

Functions:

  • year() - return the current year (as a 4-digit integer)
  • month() - return the current month (as an integer in the range [1,12])
  • findCell(date) - return the cell containing the given JavaScript date
  • changeMonth(date) - change to the month containing the given JavaScript date

Events:

  • 'drcal.monthRender' - triggered when a month is rendered for the first time
  • 'drcal.monthChange' - triggered every time the month is changed

Tips:

  • First day displayed: cal.find('[date]:first')
  • Last day displayed: cal.find('[date]:last')
  • First day of the displayed month: cal.find('[date]:not([class="extra"]):first')
  • Last day of the displayed month: cal.find('[date]:not([class="extra"]):last')

Download drcal jQuery plugin

by jekor