# Corner-JS-Tool

**Repository Path**: kts168/zbJsTool

## Basic Information

- **Project Name**: Corner-JS-Tool
- **Description**: 常用的js插件合集
- **Primary Language**: JavaScript
- **License**: MulanPSL-1.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2022-08-02
- **Last Updated**: 2022-08-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Corner-JS-Tool

#### 介绍
常用的js工具合集, 每个js工具都可以单独使用

#### 插件列表
##### JS
1. zbActionSheet.js  
    - 遮盖弹出层, 有标题, 可以输入和选择, 点确认后可调用回调方法处理
    - 自动生成css, 无需额外引用
2. zbEditTable.js    
    - 生成可编辑表格, 或文字表格, 可用于编辑类似衣服尺码体重等二维信息
3. zbImage.js        
    - 生成二维码+图片的分享图, 因为要生成二维码, 所以依赖 jquery-qrcode.min.js, 支持
    1. 原图的右下角添加二维码
    2. 图片和二维码并排等大,底部添加一行文字 
    3. 图片在左边,二维码和文字信息在右侧混排
     
4. zbUploadImage.js  
    - 压缩并上传图片 依赖 lrzImage.js 这个库能兼容ios, 安卓, 电脑, 而且自动将ios拍的照片转换到正确角度(亲测)
5. zbRouter.js       
    - 单页面路由库
    1. 支持不刷新更换浏览器URL历史
    2. 支持正则配置路由规则+回调 
    3. 支持循环渲染 
    4. 支持钩子函数 
    
6. zbNotice.js
    1. 支持文字弹窗提醒(自定义消失时间, 自定义背景色, 自带样式)
7. zbList.js
   1. 列表插件 
   2. 支持点击后回调 
   3. 支持追加列表项
   4. 支持一个页面多个列表
8. zbPanelList.js
   1. 可折叠的列表插件
   2. 支持点击后回调
   3. 支持追加列表项
   4. 支持一个页面多个列表
   5. 支持指定面板展开、折叠
9. zbTabNav.js
   1. tab导航
   2. 支持点击后回调， 并高亮点击的tab
   3. 支持一个页面多个导航
   4. 支持切换到指定的导航
10. zbToolBar.js
    1. 工具栏
    2. 支持顶部固定和底部固定
    3. 目前支持纯文本列表
    4. 支持点击后回调
11. zbRequest.js
    1. 发送ajax请求
    2. 支持指定时间(秒)的缓存请求结果, 此功能也可用于防止重复提交
    3. 依赖md5.js, 用于生成请求参数的摘要, 判断是否需要缓存
   
- 其他js库是第三方库, 不是本人开发: 
    - 复制到剪切板[clipboard.min.js] 
    - 随机生成分形图[geopattern.min.js] 
    - 生成二维码[jquery-qrcode.min.js] 
    - 生成md5摘要[md5.min.js]
    - 图片压缩[lrzImage.js]
##### CSS   
my.css 常用的css样式, 
    - flex布局相关
    - 常用宽度
    - 常用高度
    - 常用阴影
    - 常用超出滚动
    - 可折叠panel
    - 列表: 标题, 描述, 右箭头

### 使用说明
1. zbRouter.js 路由插件
```
//创建对象
let r = new zbRouter();

//创建路由配置
let router = [
        {pattern: 'vadmin_store', params:'tpl:tplStoreInfo,target:mainBody', callback:store},
        {pattern: 'vadmin_cate', params:"tpl:tplCate,target:mainBody", callback:cate},
        {pattern: 'vadmin_goods_([a-f0-9]+)', params:"tpl:tplGoods,target:mainBody,cate:@1", callback:goods},
        {pattern: 'vadmin_propertylist_([a-f0-9]+)', params:"tpl:tplGoodsProperty,target:mainBody,goodsid:@1", callback:propertyList}
    ];

//初始化路由
r.init(router);

//钩子hook
r.hookBefore = isLogin; //每次调用回调方法前先检测是否登录了, isLogin 需要是一个方法

//开始路由
r.route(str, replace); //路由过程: 1. 触发浏览器地址栏URL链接变化但不刷新浏览器, 2. 解析传入的str进行内容替换并触发回调

//用数组循环渲染模板
r.repeatString(tpl, arr, func); //将tpl中的占位符替换为arr中的对应值, 用于渲染列表; func: 预先处理arr中每个obj,添加/修改/删除值
r.repeatInnerHtml(selector, arr, func); //将selector元素的innerHTML用 repeatString 替换
r.repeatOuterHtml(selector, arr, func); //将selector元素的outerHTML用 repeatString 替换

//其他方法
r.htmlToNode(str); //将html字符串转为node节点
r.changeContentById(srcId, targetId); //将模板内容覆盖指定id的innerHTML
r.getInputs(id, tagNames); //获取id元素内的指定标签的value, r.getInputs(id, 'input,textarea');
r.getRandom(len); //生成一定长度的随机字符串
r.buildUrl(path, obj); //构建url
```
2. zbEditTable.js 可编辑表格插件

- 单个js文件, 生成table + input 标签

- 需要自己写css美化:
    
```
引用

<script src="/zbEditTable.js"></script>

// 1.初始化
    var et = new zbEditTable();
    et.onClickInput = function() {
        console.log(this); //被点击的input框
    }

    //2. 创建可以编辑的表格
    let domTable = et.createEditTable({
      id:'table_basic', //表格ID
      thead:{
        values:['表名', '引擎', '默认编码', '字符集', '注释'], //表头
      },
      tbody:{
        values:[
            ['aaa','InnoDB','utf8','utf8_general_ci', '注释'], //表格数据
        ],
      }
    });
    document.getElementById('basic_info').appendChild(domTable); //显示到html中

    //批量更新input标签的属性 
    // coordinate: 坐标 (0,0: 表示第1行, 第一列;  ',0': 表示所有行的第一列;  '0,': 表示第一行的所有列)
    // attrs: 属性列表 
    et.setInputAttributes('table_basic', [
      {coordinate:'0,0', attrs:{name:'table_name'}},
      {coordinate:'0,1', attrs:{name:'engine'}},
      {coordinate:'0,2', attrs:{name:'charset'}},
      {coordinate:'0,3', attrs:{name:'collate'}},
      {coordinate:'0,4', attrs:{name:'table_comment'}},
    ]);

    //3. 创建可以动态增加/删除行的表格
    let domFields = et.createResponseEditTable({
      id:'field_list',
      thead:{
        values:['字段名','数据类型','是否主键','是否允许NULL','默认值','额外设置','注释']
      },
      tbody: {
        default_row:field_list.length, //默认行数, 不写就根据values来判断
        default_col:7, //默认列数, 不写就根据values来判断
        values:[[...]]
      }
    });
    document.getElementById('fields_info').appendChild(domFields);
    ...

```

3. zbNotice.js 文字提醒插件
```
let nt  = new zbNotice();
nt.text('xxxx');
nt.text('xxxx', 2000); //2秒后消失, 默认3秒
nt.text('xxxx', 2000, 'rgba(50, 50, 50, 0.8)'); //默认背景色为  rgba(100, 100, 100, 0.8) 字体为灰白色
``` 
   
4. zbActionSheet.js  底部弹出插件 （目前支持：弹出列表， 单行文本框，多行文本框； 支持回调）

```
let as = new zbActionSheet();
    as.init('title'); //设置标题

    //1.列表(单选)
    let list = {"code":1,"msg":"success","data":{"001340000":"\u5b89\u5fbd\u7701","001110000":"\u5317\u4eac\u5e02","001350000":"\u798f\u5efa\u7701","001620000":"\u7518\u8083\u7701","001440000":"\u5e7f\u4e1c\u7701","001450000":"\u5e7f\u897f\u58ee\u65cf\u81ea\u6cbb\u533a","001520000":"\u8d35\u5dde\u7701","001460000":"\u6d77\u5357\u7701","001130000":"\u6cb3\u5317\u7701","001410000":"\u6cb3\u5357\u7701","001230000":"\u9ed1\u9f99\u6c5f\u7701","001420000":"\u6e56\u5317\u7701","001430000":"\u6e56\u5357\u7701","001220000":"\u5409\u6797\u7701","001320000":"\u6c5f\u82cf\u7701","001360000":"\u6c5f\u897f\u7701","001210000":"\u8fbd\u5b81\u7701","001150000":"\u5185\u8499\u53e4\u81ea\u6cbb\u533a","001640000":"\u5b81\u590f\u56de\u65cf\u81ea\u6cbb\u533a","001630000":"\u9752\u6d77\u7701","001370000":"\u5c71\u4e1c\u7701","001140000":"\u5c71\u897f\u7701","001610000":"\u9655\u897f\u7701","001310000":"\u4e0a\u6d77\u5e02","001510000":"\u56db\u5ddd\u7701","001120000":"\u5929\u6d25\u5e02","001540000":"\u897f\u85cf\u81ea\u6cbb\u533a","001650000":"\u65b0\u7586\u7ef4\u543e\u5c14\u81ea\u6cbb\u533a","001530000":"\u4e91\u5357\u7701","001330000":"\u6d59\u6c5f\u7701","001500000":"\u91cd\u5e86\u5e02","001710000":"\u53f0\u6e7e","001810000":"\u9999\u6e2f\u7279\u522b\u884c\u653f\u533a","001820000":"\u6fb3\u95e8\u7279\u522b\u884c\u653f\u533a"},"request_time":1645755025,"response_time":1645755025};
    let data = [{params: {id:'aaa'}, values: list.data}];
    as.addList(data);

    //2.单行输入框
    // let data = { attr:{id:'aaa', type:'text', maxlength:50, value:'100'}, params:{}};
    // as.addInput(data);

    //3.多行输入框
    // let data = {attr:{id:'aaa', maxlength:500}, value:'test', params:{}};
    // as.addTextarea(data);

    as.show(); //显示
    //as.hide(); //隐藏
```

5. zbPanel.js 可折叠的列表
````
let panel = new zbPanel('panel');
let data = [
    {
        'panel_id': '1111',
        'title':{
            'idx':1, //可以不写
            'name':'测试-name1',
        },
        'body':{
            'content': '<p>Hello World!</p>'
        },
        'footer':{
            'content':'1111111'
        }

    },
    {
        'panel_id': '222',
        'title':{
            'idx':2,
            'name':'测试-name2',
        },
        'body':{
            'content': '<p>Hello World!</p>'
        },
        'footer':{
            'content': '222222'
        }

    }
];
panel.init(data);
panel.onShow = function(id) {
    panel.updateBodyContent(id, '内容更新啦~' + id);
}
panel.onHide = function(id) {
    //alert('隐藏-'+id);
}
panel.onRender = function() {
    panel.togglePanel('1111'); //主动触发折叠事件
}
panel.show('aaa');

let child = [
    {
        'panel_id': '3333',
        'title':{
            'idx':3,
            'name':'测试-name3',
        },
        'body':{
            'content': '<p>Hello World!</p>'
        },
        'footer':{
            'content':'333333'
        }
    },
    {
        'panel_id': '4444',
        'title':{
            'idx':4,
            'name':'测试-name4',
        },
        'body':{
            'content': '<p>Hello World!</p>'
        },
        'footer':{
            'content':'44444'
        }
    }
];
panel.append(child);

````

6. zbList.js 普通列表（不可折叠，支持点击后回调）
````
 let mylist = new zbList();
 let config = {list_id:'mylist', list_type:''};
 let data = [
 {
        'item_id': '1111',
        'title':'测试-name1',
        'desc': '<p>Hello World!</p>',
        'params': 'xxx',
 },
 {
        'item_id': '2222',
        'title':'测试-name2',
        'desc': '<p>Hello World!</p>',
        'params': 'xxx',
 },
 ]
 mylist.init(data,config);

 //将id=content的节点替换为list
 mylist.replaceNode('content');

 let children = [
 {
        'item_id': '3333',
        'title':'测试-name3',
        'desc': '<p>Hello World!</p>',
        'params': 'xxx',
        'func': 'callback_name'
    },
 {
        'item_id': '4444',
        'title':'测试-name4',
        'desc': '<p>Hello World!</p>',
        'params': 'xxx',
        'func': 'callback_name'
    },
 ];
 mylist.append(children, config);
````

7. zbTabnav.js
````
 let navCate = new zbTabnav();
 let navData = {
        'zb-tabnav-nav': {id:'navCateList','zb-tabnav-tab':[{name:'', id:'', url:''}]},
        'zb-tabnav-content':{id:'navContent'}
    };
 navCate.init('navCate', navData);
 navCate.onChangeTab = function (id, url) {
        navCate.updateContent('html here ...');
    }
 $('#container').html(navCate.content); //把HTML渲染到指定的dom元素内
 navCate.changeTab(0); //触发导航切换
````

8. zbRequest.js
- 发起AJAX请求
- 依赖md5, 用来生成缓存键
```
let req = new zbRequest();
req.request(url, params, callback, cache_time);

//可重写以下方法, 来适应自己的项目
req.handleResponse(string); // 请求成功时, 处理服务端返回的数据
req.defaultError(msg); //请求失败时, 调用的回调

```

9. zbScroll.js
- 滚动
```
let zbs = new zbScroll();
zbs.goScrollTop(); // 滚动到顶部
zbs.isScrollBottom(10); // 是否已滑动到底部
```