Maison > interface Web > Tutoriel Layui > Comment ajouter une icône à la zone de saisie layDate (avec code)

Comment ajouter une icône à la zone de saisie layDate (avec code)

Libérer: 2019-11-28 11:46:33
avant
5851 Les gens l'ont consulté

Comment ajouter une icône à la zone de saisie layDate (avec code)

Comment ajouter une icône à la zone de saisie layDate :

Basé sur layui 2.3.0-rc1

Ajouter une icône à la saisie laydate pour que la zone de saisie laydate soit plus visible

Regardez d'abord l'image

Comment ajouter une icône à la zone de saisie layDate (avec code)

Lieu modifié

Modifiez le module css laydate. cs et ajoutez :

.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;
}
Copier après la connexion

module laydate.js (version non compressée)
Ajoutez

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);
      });
    }
Copier après la connexion

après if(!options.elem[0]) return à la ligne 450. Code complet : https://pan.baidu .com/s/1eRHhBrsmNPN8d2d06IXz2w

Standalone 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;
}
Copier après la connexion

laydate.js (non compressé) 450 lignes plus tard

  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);
      });
    }
Copier après la connexion

Comment ajouter une icône à la zone de saisie layDate (avec code)

Pour plus d'articles liés au framework layui, veuillez faire attention à la colonne Tutoriel d'utilisation de layui.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:layui.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal