Skip to content
一套基于原生JavaScript开发的插件,无依赖、体积小
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode template function Sep 10, 2018
dist-es6
dist
image/magnifier
src modify Jun 17, 2019
style
test publish calendar Sep 18, 2018
.babelrc
.gitignore
.jshintignore
.jshintrc
.travis.yml modify Mar 9, 2018
LICENSE Initial commit Mar 5, 2018
README.md modify url Oct 15, 2018
bower.json
gulpfile.js
package-lock.json update package Sep 18, 2018
package.json
webpack.config.js pagination-es6 finish Jul 28, 2018

README.md

csdwheels

日常工作中经常会发现有大量业务逻辑是重复的,而用别人的插件和轮子也不能完美解决一些定制化的需求,所以我抽取出来了这套插件库,希望能让大家提升工作效率,少加班~

目前项目使用 ES5及UMD 规范封装,所以在前端暂时只支持<script>标签的引入方式,未来计划会逐步用 ES6 重构,并且使用 Webpack 等工具来支持模块化的引入及按需加载

Build Status npm npm npm

项目地址:csdwheels

本套插件的Vue版本

版本说明

  • ES5:src/es5文件下为ES5版本源码,ES5语法 + UMD(dist文件下为打包压缩后的代码)
  • ES6:src/es6文件下为ES6版本源码,打包后支持ES5语法 + UMD + ES6的导入方式(dist-es6文件下为打包压缩后的代码)

安装插件

npm install csdwheels -D

引入方式

ES5 传统引入方式

dist文件目录下,找到某个插件的css、js文件,然后将它们引入HTML文档中,并添加插件的DOM结构:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="author" content="csdoker">
  <title>pagination</title>
  <link rel="stylesheet" href="pagination.min.css">
</head>
<body>
  <ol class="pagination" id="pagelist"></ol>
  <script type="text/javascript" src="pagination.min.js"></script>
</body>
</html>

ES6 模块化引入

ES6版本使用之前必须先使用命令安装插件的npm包

因为样式已打包进dist-es6目录下的源码中,所以只需要添加插件的DOM结构,然后在你的JS文件中使用import引入插件即可:

<html>
<head>
  <meta charset="UTF-8">
  <meta name="author" content="csdoker">
  <title>pagination</title>
</head>
<body>
  <ol class="pagination" id="pagelist"></ol>
  <script src="./test.js"></script>
</body>
</html>
// test.js

// 安装npm包后,直接引入对应的插件
import { Pagination } from 'csdwheels';

使用说明

分页

初始化

<ol class="pagination" id="pagelist"></ol>
// 分页元素ID(必填)
var selector = '#pagelist';

// 分页配置
var pageOption = {
  // 每页显示数据条数(必填)
  limit: 5,
  // 数据总数(一般通过后端获取,必填)
  count: 162,
  // 当前页码(选填,默认为1)
  curr: 1,
  // 是否显示省略号(选填,默认显示)
  ellipsis: true,
  // 当前页前后两边可显示的页码个数(选填,默认为2)
  pageShow: 2,
  // 开启location.hash,并自定义hash值 (默认关闭)
  // 如果开启,在触发分页时,会自动对url追加:#!hash值={curr} 利用这个,可以在页面载入时就定位到指定页
  hash: false,
  // 页面加载后默认执行一次,然后当分页被切换时再次触发
  callback: function(obj) {
    // obj.curr:获取当前页码
    // obj.limit:获取每页显示数据条数
    // obj.isFirst:是否首次加载页面,一般用于初始加载的判断

    // 首次不执行
    if (!obj.isFirst) {
      // do something
    }
  }
};

// 初始化分页器
new Pagination(selector, pageOption);

使用场景

此分页器只负责分页本身的逻辑,具体的数据请求与渲染需要另外去完成

此分页器不仅能应用在一般的异步分页上,还可直接对一段已知数据进行分页展现,更可以取代传统的超链接分页

前端分页

callback里对总数据进行处理,然后取出当前页需要展示的数据即可

后端分页

利用url上的页码参数,可以在页面载入时就定位到指定页码,并且可以同时请求后端指定页码下对应的数据 在callback回调函数里取得当前页码,可以使用window.location.href改变url,并将当前页码作为url参数,然后进行页面跳转 (例如./test.html?page=这种格式)

效果演示

pagination

轮播(Web)

初始化

<div class="carousel-container" id="carousel"></div>
// 轮播元素ID(必填)
var selector = '#carousel';

// 轮播设置
var carouselOption = {
  // 轮播宽度(必填,一般和图片宽度保持一致)
  carouselWidth: 600,
  // 轮播高度(必填,一般和图片高度保持一致)
  carouselHeight: 400,
  // 轮播图片列表(必填,不填你显示什么。。)
  carouselImages: [
    'https://i.loli.net/2018/08/04/5b657fef3a46c.jpg',
    'https://i.loli.net/2018/08/04/5b657fef509c9.jpg',
    'https://i.loli.net/2018/08/04/5b657fef51617.jpg',
    'https://i.loli.net/2018/08/04/5b657fef530a1.jpg',
    'https://i.loli.net/2018/08/04/5b657fef52441.jpg'
  ],
  // 是否显示轮播箭头(选填,默认显示)
  showCarouselArrow: true,
  // 是否显示轮播圆点 (选填,默认显示)
  showCarouselDot: true,
  // 轮播自动播放间隔(选填,默认3000ms)
  carouselInterval: 3000,
  // 轮播动画总时间(选填,默认150ms)
  carouselAnimateTime: 150,
  // 轮播动画间隔(选填,默认10ms)
  carouselAnimateInterval: 10
  // 通过 轮播宽度 / (轮播动画总时间 / 轮播动画间隔) 这个公式可以计算出每次轮播动画的移动速度
};

// 初始化轮播
new Carousel(selector, carouselOption);

使用场景

Web版轮播无自适应,在固定宽度和高度的容器元素中使用即可

效果演示

carousel

轮播(H5)

初始化

<head>
  <!-- 在H5页面的head标签中需要设置viewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
</head>

<div class="carousel-mobile-container" id="carousel"></div>
// 轮播元素ID(必填)
var selector = '#carousel';

// 轮播设置
var carouselOption = {
  // 轮播图片列表(必填)
  carouselImages: [
    'https://i.loli.net/2018/08/04/5b657fef3a46c.jpg',
    'https://i.loli.net/2018/08/04/5b657fef509c9.jpg',
    'https://i.loli.net/2018/08/04/5b657fef51617.jpg',
    'https://i.loli.net/2018/08/04/5b657fef530a1.jpg',
    'https://i.loli.net/2018/08/04/5b657fef52441.jpg'
  ],
  // 轮播自动播放间隔(选填,默认3000ms)
  carouselInterval: 3000,
  // 轮播滑动一次的时间
  carouselDuration: 300
};

// 初始化轮播
new CarouselMobile(selector, carouselOption);

使用场景

H5版只能在移动端环境使用,不支持PC Web环境,如果想直接在Web下测试效果,可以使用浏览器自带的设备模拟环境查看(比如Chrome下查看方式为:F12 -> Ctrl+Shift+M)

H5版轮播可自动适应屏幕宽度,在固定高宽的容器元素中也可使用。(考虑到用户使用及移动端布局的特点,取消了圆点和箭头,增加了触摸功能)

效果演示

carousel

日历

初始化

<div class="calendar" id="calendar"></div>
// 日历元素ID(必填)
var selector = '#calendar';

// 日历设置
var calendarOption = {
  // 日期,支持new Date格式、字符串格式(选填,默认为当前时间)
  time: '1970-1-1'
  // time: new Date('1970-1-1');
};

// 初始化日历
new Calendar('#calendar', calendarOption);

// 监听日历点击事件,获取选中日期的值
calendar.on('click', function(calendarTime) {
    console.log(calendarTime);
});

使用场景

只支持PC端,暂时只支持日期选择,后续会考虑加入年份及月份选择

效果演示

calendar

测试

npm install

npm test

协议

MIT

You can’t perform that action at this time.