導讀：dialogBox 封裝了十一種款式的對話框，每一種款式都提供一個介面來呼叫，開發者可按照各個介面的樣式來自定義對話框上的文字、圖片、圖文等
把 dialogBox 模塊的 11 個樣式分別實作個簡單的效果，其中將 alert 方法做了兩個樣式，如果你覺得我寫的樣式夠丑，請不要噴我，因為我是程式猿[呵呵了]，如果你接受了就直接用到你的專案，否則自己再根據官方的檔案和結合自己的產品需求，來定義更多高大上的樣式，
接下來我拿幾個我常用的方法給大家簡單介紹下，其它的大家可以看看模塊的視頻效果以后，自己上手做做，
- alert()
這個方法算是系統的 alert 與 confirm 的結合，這之上還可以添加 icon，
- sendMessage()
顧名思義，此方法在 alert 的基礎之上追加了一個對話框，會呼叫中可以取到輸入的值，
- scene()
此方法是一個特定場景下的 UI 彈出層，它包含可設定場景圖片、標題以及選項，
- evaluation()
與 alert 類似，只不過將按鈕的排版做了修改，
- raffle()
該方法算是 scene 與 alert 的結合，效果可見此模塊視頻演示，
- receipt()
在很多場景中我們就會有，比如一些簡單到復雜的表單資料展示，通常這樣的布局比較麻煩而繁瑣，這個方法就是由此而生呀，簡單配置下，就能夠達到目的，
- tips()
其實我覺得這個方法除了和名字說的提示功能以外，還有 N 多的使用場景，所以大家別被方法的名稱給固定了使用的范圍，
- actionMenu()
這個方法的 UI 與 shareAction 模塊類似，差別就是這個方法并沒有實際的功能，不過通常情況下系統的很多功能并不是我們的產品想要的，我們需要自定義 UI 和功能，所以這里這個方法就起了大作用，
以上所有方法，我也都只是簡單的用了下，大家在使用此模塊的時候仔細看看檔案，畢竟是 UI 模塊，又要做到自定義，所以欄位什么的太多了，一不注意你就疏忽了什么，在使用模塊時，任何一個按鈕點擊時都有回傳對應的索引，然后我們就可以根據索引去做自己的邏輯，
專案結構：
config.xml
<?xml version="1.0" encoding="UTF-8"?>
<widget id="A6917801437242" version="0.0.1">
<name>對話框的實作</name>
<description></description>
<author email="1978195254" href="https://blog.csdn.net/weixin_41937552">58DCDC</author>
<content src="index.html"/>
<preference name="pageBounce" value="false"/>
<preference name="appBackground" value="rgba(0,0,0,0.0)"/>
<preference name="windowBackground" value="rgba(0,0,0,0.0)"/>
<preference name="frameBackgroundColor" value="rgba(0,0,0,0.0)"/>
<preference name="hScrollBarEnabled" value="true"/>
<preference name="vScrollBarEnabled" value="true"/>
<preference name="autoLaunch" value="true"/>
<preference name="fullScreen" value="false"/>
<preference name="autoUpdate" value="true"/>
<preference name="smartUpdate" value="false"/>
<preference name="debug" value="true"/>
<preference name="statusBarAppearance" value="true"/>
<permission name="readPhoneState"/>
<permission name="camera"/>
<permission name="record"/>
<permission name="location"/>
<permission name="fileSystem"/>
<permission name="internet"/>
<permission name="bootCompleted"/>
<permission name="hardware"/>
<access origin="*"/>
</widget>
index.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="tephone=no,email=no,date=no,address=no">
<style type="text/css">
html{ background-color: white; }
header{ padding: 25px 0; }
span {
padding: 5px 15px;
margin: 10px;
display: inline-block;
background-color: #e8e8e8;
}
.hover{ opacity: .4; }
</style>
</head>
<body>
<header>
<h1>dialogBox</h1>
<mark>
使用前請詳細閱讀 檔案 使用規則
</mark>
</header>
<span tapmode="hover" onclick="dialogBox_alert1()"> dialogBox_alert1 </span>
<span tapmode="hover" onclick="dialogBox_alert2()"> dialogBox_alert2 </span>
<span tapmode="hover" onclick="dialogBox_sendMessage()"> dialogBox_sendMessage </span>
<span tapmode="hover" onclick="dialogBox_scene()"> dialogBox_scene </span>
<span tapmode="hover" onclick="dialogBox_evaluation()"> dialogBox_evaluation </span>
<span tapmode="hover" onclick="dialogBox_raffle()"> dialogBox_raffle </span>
<span tapmode="hover" onclick="dialogBox_taskPlan()"> dialogBox_taskPlan </span>
<span tapmode="hover" onclick="dialogBox_receipt()"> dialogBox_receipt </span>
<span tapmode="hover" onclick="dialogBox_tips()"> dialogBox_tips </span>
<span tapmode="hover" onclick="dialogBox_discount()"> dialogBox_discount </span>
<span tapmode="hover" onclick="dialogBox_share()"> dialogBox_share </span>
<span tapmode="hover" onclick="dialogBox_actionMenu()"> dialogBox_actionMenu </span>
</body>
</html>
<script type="text/javascript">
var dialogBox;
apiready = function(){
dialogBox = api.require('dialogBox');
}
function dialogBox_alert1() {
dialogBox.alert({
texts : {
title : ' 確認',
content : '您是游客狀態，是否登錄？',
leftBtnTitle : '取消',
rightBtnTitle : '登錄'
},
styles : {
bg : '#fff',
corner : 6,
w : 260,
title : {
marginT : 20,
icon : 'widget://image/gou.png',
iconSize : 32,
titleSize : 18,
titleColor : '#000'
},
content : {
color : '#000',
size : 16
},
left : {
marginB : 15,
marginL : 40,
w : 40,
h : 35,
corner : 2,
color : "#000",
bg : '#fff',
size : 16
},
right : {
marginB : 15,
marginL : 88,
w : 40,
h : 35,
corner : 2,
color : "#000",
bg : '#fff',
size : 16
}
},
tapClose : true
}, function(ret) {
if (ret.eventType == 'left') {
dialogBox.close({
dialogName: 'alert'
});
}
});
}
function dialogBox_alert2() {
dialogBox.alert({
texts: {
content: '您關閉了小助手的訊息提醒，店主妹妹因聯系不到您哭暈在廁所！',
leftBtnTitle: '默默拒絕',
rightBtnTitle: '去開提醒'
},
styles: {
bg: '#fff',
corner: 6,
w: 280,
content: {
color: '#000',
size: 18
},
left: {
marginB: 15,
marginL: 30,
w: 100,
h: 40,
corner: 20,
color: "#fff",
bg: '#CDCDCD',
size: 16
},
right: {
marginB: 15,
marginL: 20,
w: 100,
h: 40,
corner: 20,
color: "#fff",
bg: '#C087C0',
size: 16
}
},
tapClose: true
}, function(ret) {
if (ret.eventType == 'left') {
dialogBox.close({
dialogName: 'alert'
});
}
});
}
function dialogBox_sendMessage() {
dialogBox.sendMessage({
texts: {
title: ' 您的昵稱：',
hintText: '小明（點擊此處修改昵稱）',
content: '親，送你一個80元大禮包，請查收！退訂請回復TD',
leftBtnTitle: '取消',
rightBtnTitle: '發送'
},
styles: {
bg: '#fff',
corner: 6,
w: 260,
title: {
h: 40,
show: {
marginL: 6,
titleSize: 14,
titleColor: '#000'
},
input: {
marginL: 6,
textSize: 14,
textColor: '#000'
}
},
content: {
color: '#000',
size: 14
},
left: {
marginB: 7,
marginL: 40,
w: 60,
h: 35,
corner: 2,
bg: '#fff',
color: "#000",
size: 16
},
right: {
marginB: 7,
marginL: 55,
w: 60,
h: 35,
corner: 2,
bg: '#fff',
color: "#000",
size: 16
}
},
tapClose: true
}, function(ret) {
if (ret.eventType == 'left') {
dialogBox.close({
dialogName: 'sendMessage'
});
}
});
}
function dialogBox_scene() {
dialogBox.scene({
rect: {
w: 260,
h: 410
},
texts: {
title: '猖狂的小偷',
content: '火車售票處前的隊伍蜿蜒縱橫，旁邊一小伙一邊張望，一邊將手伸向前面買票人的口袋，啊，是小偷!'
},
styles: {
bg: '#fff',
corner: 6,
title: {
bg: '#333',
h: 44,
size: 16,
color: '#7E92DE'
},
sceneImg: {
h: 133,
path: 'widget://image/row.jpg'
},
content: {
color: '#7E92DE',
size: 14
},
cell: {
bg: '#fff',
h: 40,
text: {
color: '#7E92DE',
size: 16
}
}
},
optionDatas: [{
text: '1、拿出手機偷拍'
}, {
text: '2、見義勇為抓小偷'
}, {
text: '3、大聲提醒買票的人'
}],
tapClose: true
}, function(ret, err) {
if (ret) {
alert(JSON.stringify(ret));
} else {
alert(JSON.stringify(err));
}
});
}
function dialogBox_evaluation() {
dialogBox.evaluation({
styles: {
bg: '#fff',
corner: 6,
w: 260,
title: {
marginT: 20,
size: 16,
color: '#000',
bold: true
},
content: {
marginT: 20,
color: '#111',
size: 14
},
buttons: [{
marginB: 0,
marginL: 0,
w: 260,
h: 35,
bg: '#fff',
color: '#007FFF',
size: 16
}, {
marginB: 10,
marginL: 0,
w: 260,
h: 35,
bg: '#fff',
color: '#007FFF',
size: 16
}]
},
texts: {
title: '達令的老板娘撒嬌嘍',
content: '客官，您留步，給我個好評好嗎？嗯嗯！不然鹿董回來一生氣，他，他打我~5555',
buttons: [{
text: '看到家暴，殘忍的飄過~'
}, {
text: '這么可憐，就給個五星好評吧'
}]
},
tapClose: true
}, function(ret, err) {
if (ret) {
alert(JSON.stringify(ret));
} else {
alert(JSON.stringify(err));
}
});
}
function dialogBox_raffle() {
dialogBox.raffle({
texts: {
title: '恭喜你',
mainText: '抽中一個獎杯',
subText: '這就中了，還有什么你做不到',
leftTitle: '收入囊中',
rightTitle: '告訴好友'
},
styles: {
bg: '#fff',
corner: 6,
w: 260,
title: {
size: 18,
color: '#000'
},
icon: {
marginT: 20,
w: 80,
h: 80,
iconPath: 'widget://image/bei.jpg'
},
main: {
marginT: 20,
color: '#636363',
size: 16
},
sub: {
marginT: 8,
color: '#999999',
size: 14
},
left: {
marginB: 10,
marginL: 8,
w: 90,
h: 35,
corner: 2,
bg: '#fff',
color: '#007FFF',
size: 14
},
right: {
marginB: 10,
marginL: 62,
w: 90,
h: 35,
corner: 2,
bg: '#fff',
color: '#007FFF',
size: 14
}
},
tapClose: true
}, function(ret, err) {
if (ret) {
alert(JSON.stringify(ret));
} else {
alert(JSON.stringify(err));
}
});
}
function dialogBox_taskPlan() {
dialogBox.taskPlan({
rect: {
w: 280
},
texts: {
mainTitle: '昨天玩的不夠努力哦',
subTitle: '今天沒有獲得任務次數獎勵呢',
content: [{
text: '今日賺貓鈔任務總次數：3次'
}, {
text: '3次（基礎）+ 0次（獎勵）'
}],
btnTitle: '開始做任務'
},
styles: {
bg: '#fff',
corner: 6,
main: {
marginT: 20,
color: '#636363',
size: 18,
bold: true,
},
sub: {
marginT: 8,
color: '#999999',
size: 16,
},
content: [{
bg: '#FFD249',
marginT: 10,
marginL: 16,
w: 250,
h: 30,
align: 'center',
color: '#BC6504',
size: 17
}, {
bg: '#FFEABF',
marginT: 0,
marginL: 16,
w: 250,
h: 40,
align: 'center',
color: '#EDB56A',
size: 16
}],
ok: {
marginB: 10,
marginL: 16,
w: 250,
h: 44,
bg: '#ED1C43',
color: '#FFF',
size: 16
}
},
tapClose: true
}, function(ret) {
if (ret.eventType == 'ok') {
dialogBox.close({
dialogName: 'taskPlan'
});
}
});
}
function dialogBox_receipt() {
dialogBox.receipt({
rect: {
w: 300,
h: 380
},
items: [{
key: '起步價',
value: '0.00'
}, {
key: '4.23公里',
value: '6.37'
}, {
key: '15.58分鐘',
value: '3.9'
}, {
key: '小計',
value: '￥10.27'
}, {
key: '優惠',
value: '(3.49)'
}, {
key: '已收費',
value: ''
}, {
key: '3484549@qq.com',
value: '￥6.78'
}],
texts: {
title: '人民優步 + 收據',
cancel: 'CLOSE'
},
styles: {
bg: '#FFF',
corner: 6,
title: {
textColor: '#000',
textSize: 18,
marginT: 10
},
topBorder: {
borderColor: '#000',
borderWidth: 2,
marginT: 20
},
listHeight: 270,
item: {
textColor: '#000',
textSize: 14,
marginL: 10,
marginT: 15,
marginB: 5,
bgColor: '#FFF'
},
bottomBorder: {
borderColor: '#000',
borderWidth: 2,
},
cancel: {
textSize: 18,
textColor: '#000',
marginT: 7,
highlight: '#fff'
}
},
tapClose: true
}, function(ret, err) {
if (ret.eventType == 'cancel') {
dialogBox.close({
dialogName: 'receipt'
});
}
});
}
function dialogBox_tips() {
dialogBox.tips({
rect: {
w: 300
},
texts: {
title: '3天免單上班的秘訣...',
content: '優步全新乘客邀請計劃限時上線！每成功邀請一個新小伙伴首次使用優步，雙方賬戶均享3次免費行程（每次最高減免10元，中國大陸適用）'
},
buttons: [{
normal: 'widget://image/weibo.png',
text: '微博'
}, {
normal: 'widget://image/mes.png',
text: '短信'
}, {
normal: 'widget://image/em.png',
text: '郵箱'
}],
styles: {
bg: '#FFF',
corner: 6,
topImage: {
path: 'widget://image/car.png',
w: 300,
h: 150
},
title: {
color: '#000',
size: 18,
marginT: 35
},
content: {
color: '#000',
size: 15,
marginT: 15
},
border: {
color: '#eee',
width: 2,
marginT: 10
},
buttons: [{
iconSize: 32,
textColor: '#000',
textSize: 12,
marginT: 15
}, {
iconSize: 32,
textColor: '#000',
textSize: 12,
marginT: 15
}, {
iconSize: 32,
textColor: '#000',
textSize: 12,
marginT: 15
}]
},
tapClose: true
}, function(ret) {
alert(JSON.stringify(ret));
});
}
function dialogBox_discount() {
dialogBox.discount({
rect: {
w: 280,
h: 335
},
styles: {
bg: '#fff',
corner: 6,
image: {
path: 'widget://image/dis.jpg',
marginB: 120
},
cancel: {
icon: 'widget://image/del.png',
marginB: 40,
w: 30,
h: 30
}
},
tapClose: true
}, function(ret) {
if (ret.eventType == 'cancel') {
dialogBox.close({
dialogName: 'discount'
});
}
});
}
function dialogBox_share() {
dialogBox.share({
rect: {
w: 300,
h: 300
},
items: [{
text: '微信朋友圈',
icon: 'widget://image/friend.png'
}, {
text: '微信好友',
icon: 'widget://image/weifriend.png'
}, {
text: '微博',
icon: 'widget://image/weibo64.png'
}, {
text: 'QQ好友',
icon: 'widget://image/QQ.png'
}, {
text: 'QQ空間',
icon: 'widget://image/Qzone.png'
}, {
text: '復制鏈接',
icon: 'widget://image/copy.png'
}],
styles: {
bg: '#FFF',
corner: 6,
column: 3,
horizontalSpace: 32,
verticalSpace: 32,
itemText: {
color: '#000',
size: 15,
marginT: 20
},
itemIcon: {
size: 54
}
},
tapClose: true
}, function(ret) {
alert(JSON.stringify(ret));
});
}
function dialogBox_actionMenu() {
dialogBox.actionMenu({
rect: {
h: 200
},
texts: {
cancel: '取消'
},
items: [{
text: '微信朋友圈',
icon: 'widget://image/friend.png'
}, {
text: '微信好友',
icon: 'widget://image/weifriend.png'
}, {
text: '微博',
icon: 'widget://image/weibo64.png'
}, {
text: 'QQ好友',
icon: 'widget://image/QQ.png'
}, {
text: 'QQ空間',
icon: 'widget://image/Qzone.png'
}, {
text: '復制鏈接',
icon: 'widget://image/copy.png'
}],
styles: {
bg: '#FFF',
corner: 6,
column: 4,
itemText: {
color: '#000',
size: 14,
marginT: 10
},
itemIcon: {
size: 54
},
cancel: {
bg: '#fff',
color: '#333',
h: 55,
size: 14
}
},
tapClose: true
}, function(ret) {
alert(JSON.stringify(ret));
});
}
</script>完整代碼下載地址：https://download.csdn.net/download/weixin_41937552/13993289
孫叫獸
CSDN認證博客專家
HTTPS
Node.js
JavaScript
CSDN認證博客專家
HTTPS
Node.js
JavaScript
多年的開發經驗，開發過APP,小程式，網站及系統，以前從事java相關系統研發，目前從事保險，證券，金融相關的前端全堆疊開發作業，微信公眾號：電商程式員.QQ交流群：426360778
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/243333.html
標籤：其他