为layDate输入框加上图标的方法（附代码）

来源：动视网责编：小采时间：2020-11-03 19:02:59

为layDate输入框加上图标的方法（附代码）

为layDate输入框加上图标的方法（附代码）:为layDate输入框加上图标的方法：基于layui 2.3.0-rc1为laydate输入框加上图标，让laydate输入框更显眼先看图片修改的地方修改模块css laydate.css里添加：.laydate-with-icon{ position: relative; } .laydate-with-ic

推荐度：

点击下载本文 文档为doc格式

导读为layDate输入框加上图标的方法（附代码）:为layDate输入框加上图标的方法：基于layui 2.3.0-rc1为laydate输入框加上图标，让laydate输入框更显眼先看图片修改的地方修改模块css laydate.css里添加：.laydate-with-icon{ position: relative; } .laydate-with-ic

为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使用教程栏目。

为layDate输入框加上图标的方法（附代码）

推荐度：

点击下载本文 文档为doc格式

标签：图标代码 icon图标

热门焦点

为layDate输入框加上图标的方法（附代码）

为layDate输入框加上图标的方法（附代码）

为layDate输入框加上图标的方法（附代码）

最新推荐

猜你喜欢

热门推荐