Minimalist JavaScript

Lightweight Widgets from Vocabulink

Minimal

minjs stays out of your way. It does not dictate how you to design your UI. It tries to make no assumptions about the layout of the HTML or CSS it's running in.

Modular

minjs is not a framework. It's a collection of independent components. Use only what you need.

Tested

Each minjs component was created for Vocabulink and arose from real needs.

minform allows you to use a few HTML5 form enhancements even if the browser doesn't support them.

<form>
  <input placeholder="Placeheld Text">
  <input autofocus>
  <input required>
  <input type="submit">
</form>

longtable takes an existing HTML table and converts it into a paged table. No need to worry about AJAX, etc. Oh, and styling is up to you.

JavaScript VersionRelease Date
1.0March 1996
1.1August 1996
1.2June 1997
1.3October 1998
1.4?
1.5November 2000
1.6November 2005
1.7October 2006
1.8June 2008
1.8.1?
1.8.2June 22, 2009
1.8.5July 27, 2010

http://en.wikipedia.org/wiki/JavaScript#Versions CC-BY-SA

<table id="jsversions">
  <thead>
    <tr><th>JavaScript Version</th><th>Release Date</th></tr>
  </thead>
  <tbody>
    <tr><td>1.0</td><td>March 1996</td></tr>
    <tr><td>1.1</td><td>August 1996</td></tr>
    <tr><td>1.2</td><td>June 1997</td></tr>
    <tr><td>1.3</td><td>October 1998</td></tr>
    <tr><td>1.4</td><td>?</td></tr>
    <tr><td>1.5</td><td>November 2000</td></tr>
    <tr><td>1.6</td><td>November 2005</td></tr>
    <tr><td>1.7</td><td>October 2006</td></tr>
    <tr><td>1.8</td><td>June 2008</td></tr>
    <tr><td>1.8.1</td><td>?</td></tr>
    <tr><td>1.8.2</td><td>June 22, 2009</td></tr>
    <tr><td>1.8.5</td><td>July 27, 2010</td></tr>
  </tbody>
</table>
<script type="text/javascript">
  $(function () {$('#jsversions').longtable({'perPage': 5});});
</script>
<style type="text/css">
  .paging-controls {text-align: center;}
  .paging-controls a {color: green;}
  .paging-controls a:visited {color: #0069D6;}
  .paging-controls .prev {float: left;}
  .paging-controls .prev:before {content: "< prev";}
  .paging-controls .next {float: right;}
  .paging-controls .next:after {content: "next >";}
  .paging-controls .elide:before {content: " ... ";}
</style>

Can't find a calendar that looks and behaves just how you want? drcal provides a minimal "calendar framework", if you will. It handles the date calculations and a few other basic tasks and leaves the behavior and styling up to you.

Minimal Example

<div id="drcal1"></div>
<script type="text/javascript">
  $(function () {
    var cal = $.drcal();
    cal.bind('drcal.weekRender', function (_, tr) {
      $('td', tr).each(function (_, td) {
        $(td).append('<div><div class="daynum">'
                   + $(td).attr('day')
                   + '</div></div>');
      });
    }).changeMonth(new Date());
    $('#drcal1').append(cal);
  });
</script>
<style type="text/css">
</style>

Nicer Example

<div id="drcal2"></div>
<script type="text/javascript">
  $(function () {
    var cal = $.drcal();
    cal.bind('drcal.weekRender', function (_, tr) {
      $('td', tr).each(function (_, td) {
        $(td).append('<div><div class="daynum">'
                   + $(td).attr('day')
                   + '</div></div>');
      });
    }).changeMonth(new Date());
    cal.delegate('td', 'click', function () {
      cal.find('td').removeClass('selected');
      $(this).addClass('selected');
    });
    // Twitter Bootstap removes default styling
    cal.find('button').addClass('btn');
    $('#drcal2').append(cal);
  });
</script>
<style type="text/css">
#drcal2 .calendar {border-collapse: collapse;}
#drcal2 .calendar th {text-align: center;}
#drcal2 .calendar td {
  border: 1px solid #AEAEAE;
  width: 6em;
  height: 5em;
}
#drcal2 .calendar td > div {
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
}
#drcal2 .calendar thead tr:first-child th {
  font-size: large;
  padding-bottom: 0.5em;
}
#drcal2 .calendar thead tr:last-child th {
  font-weight: normal;
  font-size: small;
  color: #939393;
}
#drcal2 .calendar .prev {float: left;}
#drcal2 .calendar .prev:before {content: "<";}
#drcal2 .calendar .next {float: right;}
#drcal2 .calendar .next:after {content: ">";}
#drcal2 .calendar .today, .calendar .today.selected { background-color: #E9EFF8;}
#drcal2 .calendar .selected {background-color: #F3F3F3;}
#drcal2 .calendar .extra {color: #AEAEAE;}
#drcal2 .calendar .daynum {
  position: absolute;
  top: 0.5ex;
  right: 0.5ex;
}
</style>