摘要:移動(dòng)端彈出列表選擇框移動(dòng)端從下往上推動(dòng)畫效果端彈出列表選擇框,適應(yīng)所有主流移動(dòng)端機(jī)型,支持引入,引入如有用得不爽可以隨時(shí)提意見,謝謝。
pushbutton 移動(dòng)端彈出列表選擇框
移動(dòng)端從下往上推動(dòng)畫效果端彈出列表選擇框,適應(yīng)所有主流移動(dòng)端機(jī)型,支持Node引入,require引入;如有用得不爽可以隨時(shí)提意見,謝謝。
demo地址: https://gtdalp.github.io/widg...
github地址:https://github.com/gtdalp/pus...
npm安裝
npm install pushbuttonjs
使用方法如下:
1、html結(jié)構(gòu)
3、調(diào)用
new Pushbutton("#pushbutton", {
</>復(fù)制代碼
data: [
{text:"拍照", cls: "photo", attr: {"data-key": "photo"} },
{text:"錄像", attr: [
{key1: "video2"},
{key2: "video2"}
]},
{text:"語(yǔ)音錄入"}
], // 點(diǎn)擊回調(diào) 返回true 則不隱藏彈出框 onClick: function( e ) { console.log(e); // 返回主要有用數(shù)據(jù) // e.target 當(dāng)前dom節(jié)點(diǎn) // e.data 當(dāng)前點(diǎn)擊的data // e.index 當(dāng)前點(diǎn)擊的選擇是第幾個(gè) return true;
}, // maxHeight: 100, // 默認(rèn)顯示的高度 isShow: true // 默認(rèn)是否顯示 }); var dom = document.getElementById("pushbuttonClick"); var refresh = document.getElementById("refresh"); dom.onclick = function () { pub.show();
} refresh.onclick = function () { pub.refresh({
</>復(fù)制代碼
data: [{text: "1321321321"}]
});
}
效果圖 demo1.png
4、API
4.1 options.data 數(shù)據(jù)
options.data = [
</>復(fù)制代碼
{text:"拍照", cls: "photo", attr: {"data-key": "photo"} },
{text:"錄像", attr: [
{key1: "video2"},
{key2: "video2"}
]},
{text:"語(yǔ)音錄入"}
]
4.2 options.onClick 點(diǎn)擊回調(diào) 返回true 則不隱藏彈出框
options.onClick = function( e ) { console.log(e); // 返回主要有用數(shù)據(jù) // e.target 當(dāng)前dom節(jié)點(diǎn) // e.data 當(dāng)前點(diǎn)擊的data // e.index 當(dāng)前點(diǎn)擊的選擇是第幾個(gè) return true;
}
4.3 maxHeight 默認(rèn)顯示的高度
options.maxHeight = 100 // 默認(rèn)顯示的高度
4.4 isShow 默認(rèn)是否顯示
options.isShow = false // 默認(rèn)是否顯示 默認(rèn)不顯示
4.5 show 顯示
Pushbutton.show() // 顯示
4.6 hide 隱藏
Pushbutton.hide() // 隱藏
4.7 refresh 刷新
Pushbutton.refresh({
</>復(fù)制代碼
.. // options 可以傳options }) // 刷新
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/80764.html
摘要:該組件有兩個(gè)版本,用于顯示整數(shù)與單精度浮點(diǎn)數(shù),則是雙精度浮點(diǎn)數(shù),有兩個(gè)特殊參數(shù),參數(shù)是在前方加入特殊符號(hào),而則是在后方加入特殊符號(hào)。QT 是一個(gè)跨平臺(tái)C++圖形界面開發(fā)庫(kù),利用QT可以快速開發(fā)跨平臺(tái)窗體應(yīng)用程序,在QT中我們可以通過拖拽的方式將不同組件放到指定的位置,實(shí)現(xiàn)圖形化開發(fā)極大的方便了開發(fā)效率。目前,QT開發(fā)中常用的基礎(chǔ)組件有以下幾種:PushButton 按鈕組件LineEdit ...
摘要:工具可以直接使用方式安裝和的環(huán)境配置使用集成開發(fā)工具的小白,在安裝庫(kù)以后,還要對(duì)和進(jìn)行環(huán)境配置,將其集成到中。如果小白的或安裝在其他路徑下,則從對(duì)應(yīng)的目錄找到,或者在資源管理器中搜索文件找到安裝路徑。 ...
摘要:本文主要用于自我整理總結(jié),方便后續(xù)參考,如果恰好幫助到你,也是件值得高興的事先展示下這次實(shí)現(xiàn)的具體功能具體程序如下導(dǎo)入設(shè)計(jì)界面設(shè)計(jì)的彈窗窗體的大小寬,高我是彈窗窗體的標(biāo)題顯示窗口標(biāo)題欄這樣寫出來(lái)要什么,就可以將右上 ...
閱讀 998·2023-04-25 14:20
閱讀 1876·2021-11-24 10:20
閱讀 3772·2021-11-11 16:55
閱讀 2918·2021-10-14 09:42
閱讀 3472·2019-08-30 15:56
閱讀 1159·2019-08-30 15:55
閱讀 1070·2019-08-30 15:44
閱讀 780·2019-08-29 11:28
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要