From fb6dc67279076753835977708c30f5095a29305f Mon Sep 17 00:00:00 2001 From: raszxcv <282975975@qq.com> Date: Fri, 19 May 2017 19:46:08 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=AC=AC=E4=B8=80=E7=AC=AC?= =?UTF-8?q?=E4=BA=8C=E4=B8=AA=E8=BD=AE=E5=AD=90=E7=9A=84=E6=B3=A8=E9=87=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 0 README.md | 0 demos/calendar.html | 0 demos/date2.html | 0 demos/fullpage.html | 0 demos/image-picker.html | 0 demos/pager.html | 0 demos/tabs.html | 2 +- demos/view-source.js | 0 index.html | 0 lib/bom/index.js | 0 lib/calendar/index.js | 0 lib/color/index.js | 0 lib/date2/index.js | 0 lib/dom/index.js | 22 +++++++++++++++++++--- lib/fullpage/index.js | 0 lib/image-picker/index.js | 0 lib/pager/index.js | 37 ++++++++++++++++++++++++++++++++++++- lib/tabs/index.js | 14 ++++++++++++++ 19 files changed, 70 insertions(+), 5 deletions(-) mode change 100644 => 100755 .gitignore mode change 100644 => 100755 README.md mode change 100644 => 100755 demos/calendar.html mode change 100644 => 100755 demos/date2.html mode change 100644 => 100755 demos/fullpage.html mode change 100644 => 100755 demos/image-picker.html mode change 100644 => 100755 demos/pager.html mode change 100644 => 100755 demos/tabs.html mode change 100644 => 100755 demos/view-source.js mode change 100644 => 100755 index.html mode change 100644 => 100755 lib/bom/index.js mode change 100644 => 100755 lib/calendar/index.js mode change 100644 => 100755 lib/color/index.js mode change 100644 => 100755 lib/date2/index.js mode change 100644 => 100755 lib/dom/index.js mode change 100644 => 100755 lib/fullpage/index.js mode change 100644 => 100755 lib/image-picker/index.js mode change 100644 => 100755 lib/pager/index.js mode change 100644 => 100755 lib/tabs/index.js diff --git a/.gitignore b/.gitignore old mode 100644 new mode 100755 diff --git a/README.md b/README.md old mode 100644 new mode 100755 diff --git a/demos/calendar.html b/demos/calendar.html old mode 100644 new mode 100755 diff --git a/demos/date2.html b/demos/date2.html old mode 100644 new mode 100755 diff --git a/demos/fullpage.html b/demos/fullpage.html old mode 100644 new mode 100755 diff --git a/demos/image-picker.html b/demos/image-picker.html old mode 100644 new mode 100755 diff --git a/demos/pager.html b/demos/pager.html old mode 100644 new mode 100755 diff --git a/demos/tabs.html b/demos/tabs.html old mode 100644 new mode 100755 index 909f3dd..7d202a8 --- a/demos/tabs.html +++ b/demos/tabs.html @@ -45,7 +45,7 @@ - + diff --git a/demos/view-source.js b/demos/view-source.js old mode 100644 new mode 100755 diff --git a/index.html b/index.html old mode 100644 new mode 100755 diff --git a/lib/bom/index.js b/lib/bom/index.js old mode 100644 new mode 100755 diff --git a/lib/calendar/index.js b/lib/calendar/index.js old mode 100644 new mode 100755 diff --git a/lib/color/index.js b/lib/color/index.js old mode 100644 new mode 100755 diff --git a/lib/date2/index.js b/lib/date2/index.js old mode 100644 new mode 100755 diff --git a/lib/dom/index.js b/lib/dom/index.js old mode 100644 new mode 100755 index 38b3b0f..572d87a --- a/lib/dom/index.js +++ b/lib/dom/index.js @@ -2,13 +2,18 @@ let dom = { on: function(element, eventType, selector, fn) { element.addEventListener(eventType, e => { let el = e.target + //判断用户所点击的元素是不是和允许切换的元素一样 while (!el.matches(selector)) { + //如果不一样,就检查点击的元素是不是element元素 if (element === el) { + //是的话,就将el设置为null,因为在这个里面并没有能允许切换的元素 el = null break } + //如果不是就一直向上查找,因为要保证我只要点击的地方是这个元素的子元素就可以切换 el = el.parentNode } + //el有值的话,执行传入的回调函数 el && fn.call(el, e, el) }) return element @@ -44,36 +49,47 @@ let dom = { y0 = undefined }) }, - + //获取元素在兄弟元素中的序号 index: function(element) { + //先获取传入元素的父元素,然后在调用children得到元素类数组 let siblings = element.parentNode.children + //循环比对 for (let index = 0; index < siblings.length; index++) { + //兄弟元素和传入元素相等 if (siblings[index] === element) { + //返回对应的下标 return index } } return -1 }, - + //切换class方法 uniqueClass: function(element, className) { + //将每一个选项内容元素class清除 dom.every(element.parentNode.children, el => { el.classList.remove(className) }) + //对所点击的选项添加class element.classList.add(className) return element }, - + //给每一个元素执行一些动作 every: function(nodeList, fn) { for (var i = 0; i < nodeList.length; i++) { + //执行回调函数 fn.call(null, nodeList[i], i) } return nodeList }, // http://stackoverflow.com/a/35385518/1262580 + //创建元素 create: function(html, children) { + //创建一个dom模板片段 var template = document.createElement('template') + //将传入的元素字符串去除两端空白字符后赋值 template.innerHTML = html.trim() + //获取模板的内容(content)下的第一个元素(firstChild) let node = template.content.firstChild if (children) { dom.append(node, children) diff --git a/lib/fullpage/index.js b/lib/fullpage/index.js old mode 100644 new mode 100755 diff --git a/lib/image-picker/index.js b/lib/image-picker/index.js old mode 100644 new mode 100755 diff --git a/lib/pager/index.js b/lib/pager/index.js old mode 100644 new mode 100755 index 4d82745..cf3f904 --- a/lib/pager/index.js +++ b/lib/pager/index.js @@ -1,11 +1,17 @@ class Pager { constructor(options) { let defaultOptions = { + //容器元素 element: null, + //可显示的分页数量 buttonCount: 10, + //当前页数 currentPage: 1, + //总页数 totalPage: 1, + //分页url pageQuery: '', // 'page' + //动态生成的按钮元素 templates: { number: '%page%', prev: '', @@ -14,11 +20,15 @@ class Pager { last: '', }, } + //合并传入的配置和默认配置 this.options = Object.assign({}, defaultOptions, options) + //用来放新的分页列表 this.domRefs = {} + //当前页数 this.currentPage = parseInt(this.options.currentPage, 10) || 1 this.checkOptions().initHtml().bindEvents() } + //检查有没有传入元素 checkOptions() { if (!this.options.element) { throw new Error('element is required') @@ -26,9 +36,11 @@ class Pager { return this } bindEvents() { + //绑定事件 --> dom库 dom.on(this.options.element, 'click', 'ol[data-role="pageNumbers"]>li', (e, el) => { this.goToPage(parseInt(el.dataset.page, 10)) }) + //各种绑定 this.domRefs.first.addEventListener('click', () => { this.goToPage(1) }) @@ -42,40 +54,56 @@ class Pager { this.goToPage(this.currentPage + 1) }) } + //分页控制 goToPage(page) { + //如果点击的元素和当前页数一样的话就什么都不做 ps:这里注意看下运算符优先级 if (!page || page > this.options.totalPage || page === this.currentPage) { return } + //如需要控制url才执行 if (this.options.pageQuery) { bom.queryString.set(this.options.pageQuery, page) } this.currentPage = page + //这是自定义事件,用来控制台显示页数的,也可以去掉 this.options.element.dispatchEvent(new CustomEvent('pageChange', { detail: { page } })) + //重绘分页列表 this.rerender() } + //重绘分页列表 rerender() { this._checkButtons() + //先获取一波新的分页列表 let newNumbers = this._createNumbers() + //拿到旧的分页列表 let oldNumbers = this.domRefs.numbers + //获取旧的分页列表的父元素然后替换一下 oldNumbers.parentNode.replaceChild(newNumbers, oldNumbers) + //将新的分页列表赋值 this.domRefs.numbers = newNumbers } + //初始化分页需要的HTML元素 initHtml() { + //创建分页组件的nav元素 let pager = (this.domRefs.pager = document.createElement('nav')) this.domRefs.first = dom.create(this.options.templates.first) this.domRefs.prev = dom.create(this.options.templates.prev) this.domRefs.next = dom.create(this.options.templates.next) this.domRefs.last = dom.create(this.options.templates.last) + //检查按钮是否符合条件可以按下 this._checkButtons() + //创建分页列表 --> this._createNumbers() this.domRefs.numbers = this._createNumbers() pager.appendChild(this.domRefs.first) pager.appendChild(this.domRefs.prev) pager.appendChild(this.domRefs.numbers) pager.appendChild(this.domRefs.next) pager.appendChild(this.domRefs.last) + //添加到页面上 this.options.element.appendChild(pager) return this } + //检查按钮是否符合条件可以按下 _checkButtons() { if (this.currentPage === 1) { this.domRefs.first.setAttribute('disabled', '') @@ -92,20 +120,27 @@ class Pager { this.domRefs.last.removeAttribute('disabled') } } + //创建新分页列表的方法 _createNumbers() { + //获取当前的页数 let currentPage = this.currentPage + //获取可显示的页数和总页数 let { buttonCount, totalPage } = this.options + //用来计算当前页数有没有超过分页器显示数目的一半 + //和防止到最后几页页数列表减少 let start1 = Math.max(currentPage - Math.round(buttonCount / 2), 1) let end1 = Math.min(start1 + buttonCount - 1, totalPage) let end2 = Math.min(currentPage + Math.round(buttonCount / 2) - 1, totalPage) let start2 = Math.max(end2 - buttonCount + 1, 1) let start = Math.min(start1, start2) let end = Math.max(end1, end2) - + //创建一个ol元素 --> dom库 let ol = dom.create('
    ') let numbers = [] + //循环创建页数li for (var i = start; i <= end; i++) { let li = dom.create(`
  1. ${this.options.templates.number.replace('%page%', i)}
    2. `) + //如果是当前的页面就添加class if (i === currentPage) { li.classList.add('current') } diff --git a/lib/tabs/index.js b/lib/tabs/index.js old mode 100644 new mode 100755 index 609402c..adc5db0 --- a/lib/tabs/index.js +++ b/lib/tabs/index.js @@ -1,29 +1,43 @@ class Tabs { constructor(options) { + //这是默认的配置 let defaultOptions = { + //容器元素 element: '', + //选项卡元素 navSelector: '[data-role="tabs-nav"]', + //选项卡内容元素 panesSelector: '[data-role="tabs-panes"]', + //选中状态 activeClassName: 'active', } + //先将传入的配置和默认配置合并 (Object.assign) this.options = Object.assign({}, defaultOptions, options) this.checkOptions().bindEvents().setDefaultTab() } + //检查是否传入元素 checkOptions() { if (!this.options.element) { throw new Error('element is required') } + //返回自身方便链式调用 return this } + //绑定事件 bindEvents() { + //接下来就到dom库那里了 dom.on(this.options.element, 'click', `${this.options.navSelector}>li`, (e, el) => { + //回来这里,拿到元素在兄弟元素中的下标 let index = dom.index(el) + //获取容器元素下的要切换内容的列表 let children = this.options.element.querySelector(this.options.panesSelector).children + //切换class dom.uniqueClass(el, this.options.activeClassName) dom.uniqueClass(children[index], this.options.activeClassName) }) return this } + //打开页面时初始化一个选项卡被点击 setDefaultTab() { this.options.element.querySelector(`${this.options.navSelector}>li:first-child`).click() return this