使用layui 的layedit定義自己的toolbar方法
更新時(shí)間：2019年09月18日 10:55:16 作者：天武我非
今天小編就為大家分享一篇使用layui 的layedit定義自己的toolbar方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
官方文檔：http://www.layui.com/demo/layedit.html
官網(wǎng)文檔目前是不支持layedit擴(kuò)展式的。
自己手動(dòng)實(shí)現(xiàn)擴(kuò)展，定義自己的樣式toolbar：
1.樣式代碼分析
分析頁(yè)面初始化后加載的樣式.
layeditIndex=layedit.build('noticeMatterDigest',{tool: ['left', 'center', 'right','|'],height: 120});
2.根據(jù)分析的樣式進(jìn)行js的追加
代碼需要寫(xiě)在layui.use(..)頁(yè)面初始化方法之內(nèi)。
$(".layui-form .layui-form-item.layui-form-text .layui-input-block " +
".layui-layedit .layui-unselect.layui-layedit-tool")
.append('<i class="layui-icon layui-icon-note" title="摘要模板1" οnclick="generateTextArea('+layeditIndex+')"></i>')
.append('<i class="layui-icon layui-icon-template-1" title="摘要模板2" οnclick="generateTextArea('+layeditIndex+')"></i>')
.append('<i class="layui-icon layui-icon-app" title="摘要模板3" οnclick="generateTextArea('+layeditIndex+')"></i>')
.append('<i class="layui-icon layui-icon-template" title="摘要模板4" οnclick="generateTextArea('+layeditIndex+')"></i>')
.append('<i class="layui-icon layui-icon-chat" title="摘要模板5" οnclick="generateTextArea('+layeditIndex+')"></i>');
3.調(diào)用方法向layedit內(nèi)追加值
官方文檔沒(méi)有設(shè)置值的方式，但是實(shí)際存在此方法可以調(diào)用
function generateTextArea(index) {
layedit.setContent(index,"<p>姓名:*** *男,*年</p>");
};
最終實(shí)現(xiàn)，擴(kuò)展成自己需要的toolbar的形式，同時(shí)與原toolbar兼容。
以上這篇使用layui 的layedit定義自己的toolbar方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript通過(guò)function定義對(duì)象并給對(duì)象添加toString()方法實(shí)例分析
這篇文章主要介紹了JavaScript通過(guò)function定義對(duì)象并給對(duì)象添加toString()方法,實(shí)例分析了javascript中function定義對(duì)象及添加方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
這篇文章主要給大家介紹了關(guān)于JavaScript如何正確的寫(xiě)代碼注釋的相關(guān)資料,注釋的作用是提高代碼的可讀性,幫助自己和別人閱讀和理解你所編寫(xiě)的JavaScript代碼,注釋的內(nèi)容不會(huì)在網(wǎng)頁(yè)中顯示,需要的朋友可以參考下2023-10-10
深入理解JavaScript中async/await的錯(cuò)誤處理方式
在現(xiàn)代JavaScript開(kāi)發(fā)中,異步編程是不可或缺的一部分,async和await是一種強(qiáng)大的異步編程工具,它們使得編寫(xiě)和維護(hù)異步代碼更加容易和清晰,然而,異步操作仍然可能會(huì)出現(xiàn)錯(cuò)誤,本文將深入探討async和await的錯(cuò)誤處理方式,提供詳細(xì)的代碼示例和解釋2023-09-09
理解JavaScript中window對(duì)象的一些用途
這篇文章主要介紹了理解JavaScript中的window對(duì)象,本文通過(guò)實(shí)例代碼詳細(xì)介紹Window對(duì)象的一些重要用途，需要的朋友可以參考下2022-07-07
js圖片實(shí)時(shí)加載提供網(wǎng)頁(yè)打開(kāi)速度
沒(méi)必要一開(kāi)始加載就要把全部圖片加載出來(lái)，這樣子打開(kāi)網(wǎng)面的速度得到了很好提高，下面有個(gè)不錯(cuò)的思路，大家可以看看2014-09-09
這篇文章主要為大家詳細(xì)介紹了js輪播圖無(wú)縫滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
解決JavaScript layui 下拉框不顯示的問(wèn)題
今天小編就為大家分享一篇解決JavaScript layui 下拉框不顯示的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要介紹了JavaScript this綁定過(guò)程,結(jié)合實(shí)例形式深入分析了JavaScript中this關(guān)鍵字的功能、原理、綁定方式及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-12-12
js的壓縮及jquery壓縮探討(提高頁(yè)面加載性能/保護(hù)勞動(dòng)成果)
搞定js的加密和壓縮，一方面可以提高頁(yè)面加載性能，另外一方面也希望辛苦研發(fā)出來(lái)的成果得到一定的保護(hù),感興趣的朋友可以了解下，或許對(duì)你有所幫助2013-01-01
JavaScript獲取表格（table）當(dāng)前行的值、刪除行、增加行
這篇文章主要介紹了JavaScript獲取表格（table）當(dāng)前行的值、刪除行、增加行,本文直接給出代碼示例,需要的朋友可以參考下2015-07-07