Minjs 极简轻量级纯 JavaScript 组件库

Z时代
2024-01-10
分类：IT

Minjs 是一组轻量级的 jQuery 组件，提供多种 Web 常用组件，包括表单、表格、日历等，其中迷你表单帮助你使用 HTML5 表单增强，尽管浏览器不一定支持也可以使用。

特点

极小

别挡着你的路。它并不规定如何设计UI。它试图对它正在运行的 HTML 或 CSS 的布局不作任何假设。

模块化

minjs 不是一个框架。它是一个独立组件的集合。只使用你需要的。每个组件也不依赖于任何框架或库：它们都是纯JS。

测试

每个 Minjs 组件都是为词汇。他们已经在那里(和其他地方)跑了好几年了。

Minform

HTML 5 表单增强

minform允许您使用一些HTML 5表单增强，即使浏览器不支持它们。

<form id="minform-ex" method="GET" action="">
  <input name="placeholder" placeholder="Placeheld Text">
  <input name="autofocus" autofocus>
  <input name="required" required>
  <input type="submit">
</form>
<script type="text/javascript">
  minform(document.getElementById('minform-ex'));
</script>

Download 485 bytes min+gz

Source on GitHub

longtable

Long table 接受现有的 HTML 表并将其转换为分页的表。不需要担心 Ajax 等等。造型是由你决定的。

<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">
  longtable(document.getElementById('jsversions'), {'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 .elipsis:before {content: " ... ";}
</style>

Download 975 bytes min+gz

Source on GitHub

日历

一个简单的日历建设者

找不到像你想要的样子和行为的日历吗？drcal提供了一个最小的日历生成器。它处理日期计算和其他一些基本任务，并将行为和样式留给您。

<div id="drcal1"></div>
<script type="text/javascript">
  var cal = drcal();
  cal.addEventListener('drcal.renderDay', function (event) {
    event.detail.element.appendChild(document.createTextNode(event.detail.date.getDate()));
  });
  cal.changeMonth(new Date());
  document.getElementById('drcal1').appendChild(cal);
</script>

Download 1126 bytes min+gz

Source on GitHub

更好的例子

Minjs 极简轻量级纯 JavaScript 组件库

<div id="drcal2"></div>
<script type="text/javascript">
  var cal = drcal();
  cal.addEventListener('drcal.renderDay', function (event) {
    var dayNum = document.createElement('div');
    dayNum.className = 'daynum';
    dayNum.appendChild(document.createTextNode(event.detail.date.getDate()));
    var div = document.createElement('div');
    div.appendChild(dayNum);
    event.detail.element.appendChild(div);
  });
  cal.changeMonth(new Date());
  selected = null;
  cal.addEventListener('click', function (event) {
    if (event.target.tagName === 'DIV') {
      event.preventDefault();
      if (selected) selected.className = '';
      selected = event.target;
      selected.className = 'selected';
    }
  });
  // Twitter Bootstap removes default styling
  var buttons = cal.querySelectorAll('button');
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].className += ' btn';
  }
  document.getElementById('drcal2').appendChild(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;
  padding: 0;
}
#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>