Th技术开发白皮书

前端组件

2021/12/8 vue

# 组件

# .ith-action-back

通过添加class(.ith-action-back)即可给元素添加返回事件。

# .ith-action-fresh

通过添加class(.ith-action-fresh)即可给元素添加页面刷新事件。

# data-plugin="maxlength"

监听、控制textarea的输入长度

# data-plugin="checkbox"

全选、单选联动，适用一级联动。
全选框加class com-checkall、单选框加class com-check

# 组件注册

使用$.components对象可以进行组件注册，可以合理的组织第三方插件和自定义方法。

# 注册组件

# 用法：$.components.register(name, {object})

    $.components.register(name, {
        mode: 'init',
        defauts:{},
        init: function(){
            // doSomething();
        },
        api: function(){
            // doSomethsing();
        }
    });

# 参数：

  • name 组件名称
  • {object} 参数
  • mode: 组件注册的模式。有以下三种：
  • default: 使用jQuery对象中的初始化函数。
  • api: 在 document 中新加入元素时，不需要重新初始化的组件方法定义为 api 方法。
  • init: 在 document 中新加入元素时，需要重新初始化的组件方法定义为 init 方法。
  • defaults: 组件需要的参数。
  • init | api: 组件的初始化方法。

# 调用方式

Data API方式data-plugin="{plugin name}"，在元素上添加 data-plugin="{plugin name}"，组件就会被初始化。

# 手动调用

    $.components.init(name, ref ,context)
  • 参数：
  • ref (Boolean): 如果是 true ，则初始化 init && api 方法；如果是 false ，只会运行 init 方法。
  • name: 组件名称。
  • context: 作为待查找的 DOM 元素集、文档或 jQuery 对象。
  • 用法：
    $.components.init('maxlength');

# ITH-UI插件

# cat-select

  • 依赖：jQuery
  • DataAPI：data-plugin="cat-select"
  • 文档：DOC (opens new window)
  • 功能：多级联动选择

# catclass

# catupload

# cat-list

# numbox

  • 依赖：jQuery
  • DataAPI：data-plugin="numbox"
  • 功能：数字输入框

# 第三方插件

# art-template

# jquery-pjax

# backstretch

# clipboard

# jquery-confirm

# datetimepicker

  • 链接：https://github.com/Eonasdan/bootstrap-datetimepicker、http://eonasdan.github.io/bootstrap-datetimepicker/
  • 依赖：jQuery
  • DataAPI：data-plugin="datetimepicker"、data-plugin="datetimepicker2"（范围日期）
  • 功能：日期选择

# x-editable

# imagezoom

  • 版本：-
  • 依赖：-
  • DataAPI：data-plugin="imagezoom"
  • 功能：图片轮播

# jsTree

# Ladda

# mousewheel

  • 版本：3.1.12
  • 依赖：jQuery
  • DataAPI：无
  • 功能：鼠标滚动

# multiSelect

  • 版本：0.9.12
  • 官网：http://loudev.com/
  • DataAPI：data-pulgin="multiSelect"
  • 功能：Select对象列表，支持查询列表内容，支持排序，全选和反选

# Nestable2

# twbs-pagination

  • 版本：1.4.1
  • 官网：https://github.com/esimakin/twbs-pagination/
  • 依赖：Bootstrap
  • 功能：Bootstrap分页插件

# select2

  • 版本：4.0.2
  • 官网：https://select2.github.io/
  • 依赖：jQuery
  • DataAPI：data-pulgin="select2"
  • 功能：Select美化。支持搜索，远程数据集，以及无限滚动的结果

# slimScroll

# bootstrap-switch

# bootstrap-table

# toastr

# ueditor

# underscore

# validation

引入拓展字体