如何為layDate輸入框加上圖標(biāo)-創(chuàng)新互聯(lián)

小編給大家分享一下如何為layDate輸入框加上圖標(biāo)，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)由有經(jīng)驗(yàn)的網(wǎng)站設(shè)計(jì)師、開發(fā)人員和項(xiàng)目經(jīng)理組成的專業(yè)建站團(tuán)隊(duì)，負(fù)責(zé)網(wǎng)站視覺設(shè)計(jì)、用戶體驗(yàn)優(yōu)化、交互設(shè)計(jì)和前端開發(fā)等方面的工作，以確保網(wǎng)站外觀精美、成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)易于使用并且具有良好的響應(yīng)性。

為layDate輸入框加上圖標(biāo)的方法：

基于layui 2.3.0-rc1

為laydate輸入框加上圖標(biāo)，讓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

獨(dú)立版layDate 5.0.9laydate.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;"; //這里請(qǐng)去掉innerHTML值里的空格，可以改成自己的圖標(biāo)，暫時(shí)用laydate的右箭頭圖標(biāo)顯示        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);      });    }

看完了這篇文章，相信你對(duì)“如何為layDate輸入框加上圖標(biāo)”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

新聞名稱：如何為layDate輸入框加上圖標(biāo)-創(chuàng)新互聯(lián)
當(dāng)前地址：http://muchs.cn/article12/iogdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、小程序開發(fā)、Google、App開發(fā)、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)