Heim  >  Artikel  >  Web-Frontend  >  So fügen Sie dem Eingabefeld „layDate“ ein Symbol hinzu (mit Code)

So fügen Sie dem Eingabefeld „layDate“ ein Symbol hinzu (mit Code)

尚
nach vorne
2019-11-28 11:46:335806Durchsuche

So fügen Sie dem Eingabefeld „layDate“ ein Symbol hinzu (mit Code)

So fügen Sie ein Symbol zum LayDate-Eingabefeld hinzu:

Basierend auf Laui 2.3.0-rc1

Fügen Sie ein Symbol zur Laydate-Eingabe hinzu Feld, damit das Laydate-Eingabefeld auffälliger ist

Schauen Sie sich zuerst das Bild an

So fügen Sie dem Eingabefeld „layDate“ ein Symbol hinzu (mit Code)

Geänderter Ort

Ändern Sie das CSS-Laydate des Moduls. cs und fügen Sie hinzu:

.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 module (uncompressed version)
Add

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);
      });
    }

after if(!options.elem[0]) return; in Zeile 450. Vollständiger Code: https://pan.baidu .com/s/1eRHhBrsmNPN8d2d06IXz2w

StandalonelayDate 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 (unkomprimiert) 450 Zeilen später

  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);
      });
    }

So fügen Sie dem Eingabefeld „layDate“ ein Symbol hinzu (mit Code)

Weitere Artikel zum Laui-Framework finden Sie in der Spalte Tutorial zur Verwendung von Lauii.

Das obige ist der detaillierte Inhalt vonSo fügen Sie dem Eingabefeld „layDate“ ein Symbol hinzu (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:layui.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen