Javascript前端UI框架Kit使用指南之Kitjs简介

什么是Kitjs

Kitjs是一个基于Javascript的前端UI框架，它具有轻便、易用、灵活的特性。

Kitjs基于jquery开发，借鉴了bootstrap、semantic等其他流行UI库的风格和思想，提供了更丰富的组件库，包括表格、表单、弹窗、标签页等常用组件。同时，Kitjs也支持自定义主题，并提供了满足用户需求的组件扩展方法。

Kitjs的使用

引入Kitjs

你可以从官网（https://kitjs.com/）下载最新版本的Kitjs，并在项目中引入kit.css和kit.js文件。你也可以通过npm或yarn安装。

基础组件

Kitjs的基础组件提供了一些常用的UI元素，如表单、表格、分页、标签页等。

表格

<table id="myTable" class="kit-table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>18</td>
      <td>男</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>20</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

表单

<form class="kit-form">
  <label>用户名</label>
  <input type="text" name="username" placeholder="请输入用户名">
  <label>密码</label>
  <input type="password" name="password" placeholder="请输入密码">
  <button type="submit">登录</button>
</form>

自定义主题

Kitjs支持自定义主题，你可以根据项目需求改变主题颜色，修改字体、背景等样式。

修改主题颜色

.kit-button.primary {
  background-color: #1890ff;
}

.kit-button.primary:hover {
  background-color: #40a9ff;
}

扩展组件

有时候，你需要使用Kitjs中没有提供的组件，你可以通过扩展组件的方式增加组件。Kitjs提供了两种方式实现：widget和plugin。

widget

widget是一个独立的组件，它可以包含子节点和事件，也可以和其他widget链接起来实现数据交互。下面是一个简单的widget示例，它实现了一个简单的点击事件：

$.widget("kit.toggleButton", {
  options: {
    text: "Toggle"
  },

  _create: function() {
    this.element.addClass("kit-togglebutton");
    this.element.text(this.options.text);
    this.element.click($.proxy(this._toggle, this));
  },

  _toggle: function() {
    var hidden = this.element.next();
    hidden.toggle();
  }
});

plugin

plugin是对jquery对象的扩展，它可以增加一些方法和属性。下面是一个简单的plugin示例，它实现了一个向表格中增加一行数据的方法：

$.fn.addRow = function(data) {
  var row = "<tr>";
  row += "<td>" + data.name + "</td>";
  row += "<td>" + data.age + "</td>";
  row += "<td>" + data.gender + "</td>";
  row += "</tr>";
  this.find("tbody").append(row);
}