ionic 自定義彈框效果
更新時(shí)間：2017年06月27日 14:06:18 作者：kettoa
這篇文章主要介紹了ionic 自定義彈框效果，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
在工作過程中往往需要自定義的彈框。因此，將內(nèi)容整理如下，以方便學(xué)習(xí)。若有不當(dāng)之處，敬請(qǐng)斧正！
思路
- 利用ionic自帶的彈框$ionicPopup。
- 隱藏頭部和尾部，只保留body部分
- 在利用templateUrl或者template，引入需要的模板
代碼
$ionicPopup.show({
cssClass:'team-popup',
template: "<div class='list popup-form'>" +
"<div class = 'form-title'>{{tempItem.name}}</div>" +
"<div class='form-content'>" +
"<div class='input-name'>input1:</div>" +
"<div class='input-area'><input type='number' placeholder='10.00' ng-model='tempItem.input1'></div>" +
"</div>" +
"<div class='form-content'>" +
"<div class='input-name'>input2:</div>" +
"<div class='input-area'><input type='number' ng-model='tempItem.input2'></div>" +
"</div>" +
"<div class='form-button'>" +
"<button class='button wyl-left-button' ng-click='fnClosePopup()' >cancel</button>" +
"<button class='button wyl-right-button' ng-click='fnExchangeGoods()' >submit</button>" +
"</div>" +
"</div>",
scope: $scope
});
/**彈出窗popup 無titlecss*/
.team-popup .popup-head{
display: none;
}
.team-popup .popup{
padding: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:5px;
}
.team-popup .popup-body{
padding: 0;
/*overflow-y:scroll;*/
}
/*自定義表單*/
.popup-form{
font-size:15px
}
.form-title{
margin: 10px;
text-align:center
}
.form-content{
width: 90%;
height: 36px;
background-color: white;
padding-left: 10px;
margin:10px auto;
position: relative;
border-radius: 5px;
}
.form-content input{
line-height: 36px;
padding-left:10px
}
.input-name{
float: left;
line-height: 36px;
}
.input-area{
width: 50%;
float: left;
height: 36px;
}
.form-button{
width: 90%;
height: 36px;
margin:10px auto;
position: relative;
}
.form-button button{
width: 50%;
border-radius: 5px;
min-height: 10px;
height: 100%;
line-height: 100%;
}
效果
以上所述是小編給大家介紹的ionic 自定義彈框效果，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
BOM系列第二篇之定時(shí)器requestAnimationFrame
這篇文章主要介紹了BOM系列第二篇之定時(shí)器requestAnimationFrame 的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
前面我們學(xué)習(xí)了jQuery的方式開發(fā)插件，講訴的都是些基礎(chǔ)的理論知識(shí)，今天開始，我們就來實(shí)戰(zhàn)一下，學(xué)習(xí)開發(fā)自己的插件庫。2015-01-01
JS中的THIS和WINDOW.EVENT.SRCELEMENT詳解
對(duì)于js初學(xué)著必須理解this和srcElement的應(yīng)用，這也是面試中經(jīng)?？嫉降摹Ｏ旅嫖覀兙屯ㄟ^幾個(gè)示例來詳細(xì)了解下2015-05-05
這篇文章主要介紹了JS事件添加和移出的兼容寫法,結(jié)合實(shí)例形式分析了javascript針對(duì)不同瀏覽器實(shí)現(xiàn)實(shí)現(xiàn)添加與移除事件的相關(guān)技巧與使用方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
跟我學(xué)習(xí)javascript的最新標(biāo)準(zhǔn)ES6
跟我學(xué)習(xí)javascript的最新標(biāo)準(zhǔn)ECMAScript 6，ES6（ECMAScript 6）是即將到來的新版本JavaScript語言的標(biāo)準(zhǔn)，代號(hào)harmony，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了淺談JavaScript 代碼簡(jiǎn)潔之道，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
JavaScript中數(shù)組slice和splice的對(duì)比小結(jié)
相信對(duì)很多學(xué)習(xí)JavaScript語言的人來說，都會(huì)經(jīng)常搞不清slice和splice這兩個(gè)方法。它們雖然名稱相似，但是功能卻完全不同。所以這篇文章就給大家詳細(xì)整理了關(guān)于JavaScript中數(shù)組slice和splice的對(duì)比，有需要的可以參考學(xué)習(xí)。2016-09-09
本文就和大家談一談javascript中的繼承，什么是繼承，繼承的作用，以及js繼承的實(shí)現(xiàn)代碼，感興趣的小伙伴們可以參考一下2016-02-02
本文介紹了JavaScript中的八種數(shù)據(jù)類型：Undefined、Null、Boolean、Number、String、Symbol、BigInt和Object,基礎(chǔ)數(shù)據(jù)類型存儲(chǔ)在棧內(nèi)存中,而引用數(shù)據(jù)類型存儲(chǔ)在堆內(nèi)存中,每種數(shù)據(jù)類型都有其特定的用途和特性2025-01-01
js實(shí)現(xiàn)適配移動(dòng)端的拖動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)適配移動(dòng)端的拖動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01