layui自己添加圖片按鈕并點(diǎn)擊跳轉(zhuǎn)頁(yè)面的例子
1.按鈕樣式
<table class="layui-hide" id="test" lay-filter="menu-filter" style="margin: 0 10px;"></table> <script type="text/html" id="toolbtn"> <a class="" lay-event="down"><img src="images/add.png" alt=""></a> </script>
2.定義按鈕
layui.use('table', function(){ var table = layui.table; table.render({ elem: '#test' ,url:'json/table.json' ,height:'877' ,cols: [[ {type:'checkbox',toolbar:'#toolbtn', minWidth: 10} ,{type:'nn',toolbar:'#toolbtn', minWidth: 10} ,{ field:'id',title: '訂單編號(hào)' , minWidth: 210} ]] }) })
3.點(diǎn)擊跳轉(zhuǎn)
table.on('tool(menu-filter)', function(obj){//申報(bào)按鈕 var data = obj.data; var dataId = data.dataId; var itemCode = data.code; if(obj.event =="down"){ var name = data.name; var url = "OrderListDetails.html" ; layer.open({ type: 2, // title: name+'--狀態(tài)詳情', title:"訂單管理列表詳情", shadeClose: true, shade: 0.8, offset:"200px", move:false, area: ['1300px', '570px'], content:[url]/content: $("#table1")本頁(yè)彈出id=table的窗口 }) } })
4.效果
以上這篇layui自己添加圖片按鈕并點(diǎn)擊跳轉(zhuǎn)頁(yè)面的例子就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
xml 與javascript結(jié)合的問(wèn)題解決方法
xml 與javascript結(jié)合的問(wèn)題解決方法...2007-03-03微信小程序開(kāi)發(fā)之選項(xiàng)卡(窗口底部TabBar)頁(yè)面切換
本文主要介紹了微信小程序開(kāi)發(fā)之選項(xiàng)卡(窗口底部TabBar)頁(yè)面切換的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04JS箭頭函數(shù)和常規(guī)函數(shù)之間的區(qū)別實(shí)例分析【 5 個(gè)區(qū)別】
這篇文章主要介紹了JS箭頭函數(shù)和常規(guī)函數(shù)之間的區(qū)別,結(jié)合實(shí)例形式分析了JS箭頭函數(shù)和常規(guī)函數(shù)之間的 5 個(gè)區(qū)別與相關(guān)使用注意事項(xiàng),需要的朋友可以參考下2020-05-05webpack打包后直接訪問(wèn)頁(yè)面圖片路徑錯(cuò)誤的解決方法
這篇文章主要給大家介紹了在webpack打包后直接訪問(wèn)頁(yè)面圖片路徑錯(cuò)誤的解決方法,文中介紹的非常詳細(xì),對(duì)遇到這個(gè)問(wèn)題的朋友們具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧。2017-06-06微信小程序?qū)崿F(xiàn)單個(gè)卡片左滑顯示按鈕并防止上下滑動(dòng)干擾功能
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)單個(gè)卡片左滑顯示按鈕并防止上下滑動(dòng)干擾功能,利用小程序事件處理的api,分別讀取觸摸開(kāi)始,觸摸移動(dòng)時(shí),觸摸結(jié)束的X/Y坐標(biāo),根據(jù)差值來(lái)改變整個(gè)卡片的位置,具體實(shí)例代碼跟隨小編一起看看吧2019-12-12用JS簡(jiǎn)單實(shí)現(xiàn)九宮格抽獎(jiǎng)的示例代碼
在網(wǎng)上經(jīng)??匆?jiàn)一些抽獎(jiǎng)頁(yè)面,也玩過(guò)不同類(lèi)型的抽獎(jiǎng)活動(dòng),但是一直沒(méi)有做過(guò)抽獎(jiǎng)的功能,所以今天來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的九宮格抽獎(jiǎng)功能,文中有詳細(xì)的代碼示例供大家參考,感興趣的朋友可以自己動(dòng)手嘗試一下2023-12-12微信小程序?qū)崿F(xiàn)提交input信息到后臺(tái)的方法示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)提交input信息到后臺(tái)的方法,結(jié)合實(shí)例形式分析了微信小程序提交input信息到后臺(tái)相關(guān)事件響應(yīng)與數(shù)據(jù)處理操作技巧,需要的朋友可以參考下2019-01-01