如何为layDate输入框加上图标-创新互联
小编给大家分享一下如何为layDate输入框加上图标,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
创新互联公司网站建设由有经验的网站设计师、开发人员和项目经理组成的专业建站团队,负责网站视觉设计、用户体验优化、交互设计和前端开发等方面的工作,以确保网站外观精美、成都网站制作、网站设计易于使用并且具有良好的响应性。为layDate输入框加上图标的方法:
基于layui 2.3.0-rc1
为laydate输入框加上图标,让laydate输入框更显眼
先看图片
修改的地方修改模块css laydate.css里添加:
.laydate-with-icon{position: relative;}.laydate-with-icon .laydateinput{margin-right: 24px;}.laydate-with-icon .laydate-input-icon{position:absolute;right:5px;top:50%;margin-top:-12px;width:16px;height:24px;color:#aaa;}
laydate.js模块 (未压缩版)在450行 if(!options.elem[0]) return; 后 添加
if (!isStatic) { lay.each(options.elem,function(i,item) { var icon=lay.elem("i",{ class:"layui-icon laydate-input-icon" }); icon.innerHTML="& # xe637;";//这里要去掉innerHTML后面值里的空格 var pnode=item.parentNode; var objdiv = lay.elem('div', { 'class': 'laydate-with-icon' }); lay(item).addClass("laydateinput"); pnode.insertBefore(icon,item); pnode.insertBefore(objdiv,item); objdiv.appendChild(item); objdiv.appendChild(icon); }); }
完整代码:https://pan.baidu.com/s/1eRHhBrsmNPN8d2d06IXz2w
独立版layDate 5.0.9laydate.css
.laydate-with-icon{ position: relative;}.laydate-with-icon .laydateinput{ margin-right: 24px;}.laydate-with-icon .laydate-input-icon{ position:absolute;right:5px;top:50%;margin-top:-12px;width:16px;height:24px;color:#aaa;}
laydate.js(未压缩的)450行后
if (!isStatic) { lay.each(options.elem,function(i,item) { var icon=lay.elem("i",{ class:"layui-icon laydate-icon laydate-input-icon" }); icon.innerHTML="& # xe602;"; //这里请去掉innerHTML值里的空格,可以改成自己的图标,暂时用laydate的右箭头图标显示 var pnode=item.parentNode; var objdiv = lay.elem('div', { 'class': 'laydate-with-icon' ,"style":"width:"+item.offsetWidth+"px;" }); lay(item).addClass("laydateinput"); pnode.insertBefore(icon,item); pnode.insertBefore(objdiv,item); objdiv.appendChild(item); objdiv.appendChild(icon); }); }
看完了这篇文章,相信你对“如何为layDate输入框加上图标”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
新闻名称:如何为layDate输入框加上图标-创新互联
网站路径:http://pwwzsj.com/article/iogdc.html