Rumah >hujung hadapan web >Tutorial Layui >为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.9
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 (!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); }); }
更多layui框架相关文章请关注layui使用教程栏目。
Atas ialah kandungan terperinci 为layDate输入框加上图标的方法(附代码). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!