Heim > Artikel > Web-Frontend > 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
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); }); }
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!