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

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

Freigeben: 2019-11-28 11:46:33
nach vorne
5849 Leute haben es durchsucht

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;
}
Nach dem Login kopieren

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);
      });
    }
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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);
      });
    }
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:layui.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage