开发指南

介绍 快速开始

基础组件

button按钮 input输入框 switch开关 select选择器 置顶按钮 日期时间选择器 table表格组件 弹窗 面包屑 Pagination 分页 tag tab选项卡 alert tips

业务组件

日历 架构图 标签云 Form 表单 字符云 韦恩图 静态的 treemap 可下钻的 treemap 折柱混合图 柱状图 雷达图 词云 网络图 力图 曲线力图 树图

jQuery HzUI - CRM产品通用组件库

目标

兼容IE8+

使用的技术

  • jQuery组件的编写参考bootstrap3(v3.3.7),参考modal.js
  • 采用scss,参考bootstrap4
  • jQuery版本为v1.12.4

download

npm install jquery-hzui

usage

  • 编写gulp,将jquery-hzui/dist自动拷贝到服务器可访问的lib目录
  • 使用browserify引入jquery-hzui/dist目录的js文件和css文件

development

gulp dev

http://localhost:8080/demos/home.html

deployment

gulp build

local demo

http://localhost:8080/demos/home.html

文件说明

  • config.js: demo的配置文件:name指的是左侧栏的名称,type指的是demos/components下的html文件名
  • demos/components: demo的页面
  • src/scss/jquery-hzui:组件的scss的入口

  • 可参考button-top

online demo

置顶按钮

快速开始

简单快速的安装hz-jq组件到本地项目中。

npm 安装

npm install jquery-hzui

把npm包文件下载到本地,然后拷贝到项目中使用就可以了。

cdn 安装

暂时没有cdn服务

Button 按钮

常用的操作按钮。

基础用法

基础的按钮用法。


<div style="padding-bottom: 20px">
  <button class="hz-btn-lg hz-btn-primary">变大按钮</button>
  <button class="hz-btn hz-btn-primary">正常按钮</button>
  <button class="hz-btn-sm hz-btn-primary">变小按钮</button>
  <button class="hz-btn-xs hz-btn-primary">超小按钮</button>
</div>

<div style="padding-bottom: 20px">
  <button class="hz-btn-normal">默认按钮</button>
  <button class="hz-btn hz-btn-primary">主要按钮</button>
  <button class="hz-btn hz-btn-success">成功按钮</button>
  <button class="hz-btn hz-btn-warning">警告按钮</button>
  <button class="hz-btn hz-btn-danger">危险按钮</button>
  <button class="hz-btn hz-btn-highlight">高亮按钮</button>
</div>

禁用状态

禁用的按钮用法。


<div style="padding-bottom: 20px">
  <button class="hz-btn-lg hz-btn-primary" disabled>变大按钮</button>
  <button class="hz-btn hz-btn-primary" disabled>正常按钮</button>
  <button class="hz-btn-sm hz-btn-primary" disabled>变小按钮</button>
  <button class="hz-btn-xs hz-btn-primary" disabled>超小按钮</button>
</div>

<div style="padding-bottom: 20px">
  <button class="hz-btn-normal" disabled>默认按钮</button>
  <button class="hz-btn hz-btn-primary" disabled>主要按钮</button>
  <button class="hz-btn hz-btn-success" disabled>成功按钮</button>
  <button class="hz-btn hz-btn-warning" disabled>警告按钮</button>
  <button class="hz-btn hz-btn-danger" disabled>危险按钮</button>
  <button class="hz-btn hz-btn-highlight" disabled>高亮按钮</button>
</div>

朴素按钮

朴素按钮用法。


<div style="padding-bottom: 20px">
  <button class="hz-btn hz-btn-outline-primary">主要按钮</button>
  <button class="hz-btn hz-btn-outline-success">成功按钮</button>
  <button class="hz-btn hz-btn-outline-warning">警告按钮</button>
  <button class="hz-btn hz-btn-outline-danger">危险按钮</button>
  <button class="hz-btn hz-btn-outline-highlight">高亮按钮</button>
</div>

<div style="padding-bottom: 20px">
  <button class="hz-btn hz-btn-outline-primary" disabled>主要按钮</button>
  <button class="hz-btn hz-btn-outline-success" disabled>成功按钮</button>
  <button class="hz-btn hz-btn-outline-warning" disabled>警告按钮</button>
  <button class="hz-btn hz-btn-outline-danger" disabled>危险按钮</button>
  <button class="hz-btn hz-btn-outline-highlight" disabled>高亮按钮</button>
</div>

文字按钮

文字按钮的用法


<div style="padding-bottom: 20px">
  <button class="hz-btn-link">文字按钮</button>
  <button class="hz-btn-link-primary">文字按钮</button>
  <button class="hz-btn-link-success">文字按钮</button>
  <button class="hz-btn-link-warning">文字按钮</button>
  <button class="hz-btn-link-danger">文字按钮</button>
  <button class="hz-btn-link-highlight">文字按钮</button>
</div>

<div style="padding-bottom: 20px">
  <button class="hz-btn-link" disabled>文字按钮</button>
  <button class="hz-btn-link-primary" disabled>文字按钮</button>
  <button class="hz-btn-link-success" disabled>文字按钮</button>
  <button class="hz-btn-link-warning" disabled>文字按钮</button>
  <button class="hz-btn-link-danger" disabled>文字按钮</button>
  <button class="hz-btn-link-highlight" disabled>文字按钮</button>
</div>

按钮独占一行


<div style="padding-bottom: 20px">
  <button class="hz-btn hz-btn-block hz-btn-success">block按钮</button>
  <button class="hz-btn hz-btn-block hz-btn-warning">block按钮</button>
  <button class="hz-btn hz-btn-block hz-btn-danger">block按钮</button>
</div>

Input 输入框

通过鼠标或键盘输入字符

基础用法


<div style="padding-bottom: 20px">
  <label for="">大输入框</label>
  <input class="hz-input-lg" placeholder="请输入内容">
  <label for="">默认输入框</label>
  <input class="hz-input" placeholder="请输入内容">
  <label for="">小输入框</label>
  <input class="hz-input-sm" placeholder="请输入内容">
  <label for="">特小输入框</label>
  <input class="hz-input-xs" placeholder="请输入内容">
</div>

默认输入框


<div style="padding-bottom: 20px">
  <label for="">默认输入框</label>
  <input class="hz-input hz-input-340" placeholder="请输入内容">
  <label for="">默认输入框</label>
  <input class="hz-input hz-input-350" placeholder="请输入内容">
  <label for="">默认输入框</label>
  <input class="hz-input hz-input-370" placeholder="请输入内容">
</div>

Switch 开关

表示两种相互对立的状态间的切换,多用于触发「开/关」。

基本用法

基本用法


自定义主题颜色


<h3>基本用法</h3>
  <div id="switch1" class="hz-switch switch-on"></div>

<br />
<h3>自定义主题颜色</h3>

<div class="hz-switch switch-off" themeColor="green"></div>
$('.hz-switch').switch({
  click: function (onoff, el, event) {
    console.log(onoff, el, event)
  }
})

参数说明

参数 说明 类型 可选值 默认值
click 点击触发的事件 function 可选 function (onoff, el, event)

select 选择器

当选项过多时,使用下拉菜单展示并选择内容。

基础用法

适用广泛的基础单选

第一种写法:兼容老版本

推荐第二种写法


// 兼容老版本, 更加推荐第二种方式
var select = $('#select').select('init', {
  laceholder: '请选择',
  defaultValue: '123132',
  data: [{
      value: '1',
      text: '选项1'
    },
    {
      value: '2',
      text: '选项2'
    },
  ],
  onClick(val, text) {
    console.log(val, text)
  }
});

var select1 = $('#select1').select({
  width: 500,
  height: 40,
  laceholder: '请选择',
  defaultValue: '1',
  data: [{
      value: '1',
      text: '选项1'
    },
    {
      value: '2',
      text: '选项2,配置点击',
      click: function (val, txt) {
        console.log(val, txt)
      }
    },
    {
      value: '3',
      text: '选项3'
    }
  ]
});
console.log(select1.getValue())
console.log(select1.getText())

返回顶部

当页面内容冗长,需要快捷返回顶部时使用,一般放置在页面右下角位置。

基本用法

看右下角按钮


<button id="backTop" class="hz-btn hz-btn-primary">返回顶部</button>


$("#backTop").click(function(e) {
  $('body,html').animate({scrollTop:0},1000);
});

日期选择器

选择日历的选择器

基本用法

这是第三方组件,查看更多

<h3>基本用法</h3>
https://www.malot.fr/bootstrap-datetimepicker/index.php


$('#datetimepicker').datetimepicker({
  language: 'zh-CN',
  weekStart: 1,
  todayBtn: true,
  autoclose: true,
  todayHighlight: true,
  startView: 2
})

表格组件

根据配置生产表格和固定列表格组件

基本用法


<div id="demo" style="width: 600px;"></div>
var cols = [
  {
    label: '姓名',
    key: 'name',
    width: 300
  },
  {
    label: '年龄',
    key: 'age',
    width: 200,
    render: function (row) {
      return '<a href="#">姓名:' + row.name + '--年龄:' + row.age + '</a>'
    }
  },
  {
    label: '性别',
    key: 'sex',
    width: 100,
    click: (row) => {
      console.log(row)
    }
  },
  {
    label: '住址',
    width: 300,
    key: 'address',
  },
  {
    label: '操作',
    key: '',
    width: 100,
    type: 'link',
    text: ['编辑', '删除'],
    fixed: 'right'
  }
]
var tableData = Array(5).fill('').map((item, index) => ({
  name: '张三' + index,
  age: '2'+ index,
  sex: Math.random() > 0.5 ? '男' : '女',
  address: '深圳软件产业基地芒果大厦'
}))

var table = $('#demo').tableRender({
  width: 600,
  height: 300,
  headerFixed: true, // 是否开启头部固定
  cols: cols,
  data: tableData,
})
table.on('hz.table.click', function (e, row) {
  console.log(123)
  console.log(e, row)
})

参数说明

表格参数说明

参数 说明 类型 可选值 默认值
width 表格宽度 Number 可选 父级节点宽度
height 表格高度 Number 可选 没有指定就按照行数来计算
headerFixed 是否固定头部 Boolean 可选 false
cols 列配置 Array 必选 []
data 数据 Array 可选 []

表格cols列参数说明

参数 说明 类型 可选值 默认值
label 表头文字 String 必选
key 对应数据的key值 String 可选 ''
width 列宽度 Number 必选
render 自定义表格内容 Function 可选 render(row){}
文档正在马不停蹄的编写当中.....