兼容IE8+
npm install jquery-hzui
gulp dev
http://localhost:8080/demos/home.html
gulp build
http://localhost:8080/demos/home.html
src/scss/jquery-hzui:组件的scss的入口
可参考button-top
置顶按钮
简单快速的安装hz-jq组件到本地项目中。
npm install jquery-hzui
把npm包文件下载到本地,然后拷贝到项目中使用就可以了。
暂时没有cdn服务
常用的操作按钮。
基础的按钮用法。
<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>
通过鼠标或键盘输入字符
<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>
表示两种相互对立的状态间的切换,多用于触发「开/关」。
<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) |
当选项过多时,使用下拉菜单展示并选择内容。
适用广泛的基础单选
// 兼容老版本, 更加推荐第二种方式
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 | 可选 | [] |
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
label | 表头文字 | String | 必选 | 无 |
key | 对应数据的key值 | String | 可选 | '' |
width | 列宽度 | Number | 必选 | 无 |
render | 自定义表格内容 | Function | 可选 | render(row){} |