-
- qq_昨夜闲谈梦落花_0 2018-03-15
- datepicker.init = function (input, year, month) { var html = datepicker.buildUi(year, month), $wrapper = document.createElement("div"); $wrapper.className = "ui-datepicker-wrapper"; $wrapper.innerHTML = html; document.body.appendChild($wrapper); var $input = document.querySelector(input), isOpen = false; $input.addEventListener("click",function () { if(isOpen){ $wrapper.classList.remove("ui-datepicker-wrapper-show"); isOpen = false; }else { $wrapper.classList.add("ui-datepicker-wrapper-show"); var left = $input.offsetLeft, top = $input.offsetTop, height = $input.offsetHeight; $wrapper.style.top = top +height + 2 + "px"; $wrapper.style.left = left + "px"; isOpen = true; } },false);
- 0赞 · 0采集
-
- 一树青枫 2017-09-08
- 日期组件的绝对定位： 目标是希望它出现在输入框的下方，所以就要先找到输入框目前在页面的哪个位置呢： var left = $input.offsetLeft; var top = $input.offsetTop; var height = $input.offsetHeight; $wrapper.style.top = top + height + 9 +'px'; $wrapper.style.left = left + 'px';
- 0赞 · 0采集
-
- 一树青枫 2017-09-08
- 元素的显示与隐藏： 方式很多样；最通用是通过class来控制，默认是隐藏，除非多了一个 block 的样式，后者覆盖前者，wrapper就才显示出来。 .classList.remove 与 .classList.add 的 使用。 isOpen 布尔值 来记录当前是关闭状态还是展开状态。
- 0赞 · 0采集
-
- 一树青枫 2017-09-08
- 优化着手点有两方面： 1.当用户点击输入框的时候，日期组件才可以显示，不能一打开页面，它就在，太不友好了； 2.目前的日期组件的主题结构 wrapper header body是占据文档流的，如果页面里还有其他的内容，会因日期的出行，下移的，因此将其样式改为绝对定位。
- 0赞 · 0采集
-
- 慕前端2115739 2017-05-09
- 点击，展开日历
-
截图0赞 · 0采集
-
- Mrpanda 2017-04-14
- 展开收起
-
截图0赞 · 0采集
数据加载中...