dialogx
Version:
no reliance on third-party apple iphonx like popups
370 lines (358 loc) • 15.9 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>dialogx-Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="./dist/index.css">
<script src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.min.js"></script>
<!-- <script src="./dist/dialogx.window.js"></script> -->
<script>
console.log(window)
</script>
<style>
body {
padding: 0;
margin: 0;
background-color: lightblue;
}
.test-bg {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-image: url('https://gjcf.github.io/dialogx/bg.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
opacity: 0.8;
}
.test-bar {
position: fixed;
z-index: 10;
right: 0;
left: 0;
top: 0;
height: 22px;
padding-right: 10px;
padding-left: 10px;
border-bottom: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: space-between;
text-align: center;
white-space: nowrap;
font-size: 12px;
font-weight: bold;
color: #fff;
}
.test-content-padded {
position: fixed;
left: 0;
right: 0;
top: 22px;
bottom: 0;
padding-top: 25px;
}
.test-btn {
display: block;
width: 120px;
margin: 10px auto;
}
button,.test-btn {
font-size: 14px;
font-weight: 400;
line-height: 1.42;
position: relative;
display: inline-block;
margin-bottom: 0;
padding: 6px 12px;
cursor: pointer;
-webkit-transition: all;
transition: all;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-duration: .2s;
transition-duration: .2s;
text-align: center;
vertical-align: top;
white-space: nowrap;
border-radius: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
background-clip: padding-box;
color: #fff;
border: 1px solid #007aff;
background-color: #007aff;
}
.test-btn-blue {
color: #fff;
border: 1px solid #007aff;
background-color: #007aff;
}
.test-btn-blue:enabled:active,.test-btn-blue.mui-active:enabled {
color: #fff;
border: 1px solid #0062cc;
background-color: #0062cc;
}
</style>
</head>
<body>
<div class="test-bg"></div>
<header class="test-bar">
<span>09:53</span>
<span>你好, 世界</span>
<span>信号很好</span>
</header>
<div class="test-content">
<div class="test-content-padded" style="margin: 5px;text-align: center;">
<button id='alertBtn' type="button" class="test-btn">警告[字符串]</button>
<button id='alertBtn2' type="button" class="test-btn">警告[异步关闭]</button>
<button id='confirmBtn' type="button" class="test-btn">确认[字符串]</button>
<button id='confirmBtn2' type="button" class="test-btn">确认[异步关闭]</button>
<button id='promptBtn' type="button" class="test-btn">输入[字符串]</button>
<button id='promptBtn2' type="button" class="test-btn">输入[异步关闭]</button>
<button id='toastBtn' type="button" class="test-btn">Img[字符串]</button>
<button id='toastBtn2' type="button" class="test-btn">Img[异步关闭]</button>
<!-- <button id='actions' type="button" class="test-btn test-btn-blue test-btn-outlined">action[字符串]</button> -->
<button id='actions2' type="button" class="test-btn">action[异步关闭]</button>
<button id='pin' type="button" class="test-btn">Pin[字符串]</button>
<button id='success' type="button" class="test-btn">成功提示</button>
<button id='error' type="button" class="test-btn">失败提示</button>
<button id='warn' type="button" class="test-btn">警告提示</button>
<button id='load' type="button" class="test-btn">加载提示</button>
<div id="info"></div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
window.onresize = function(){
if(document.body.offsetWidth > 375){
document.querySelector('.test-bg').style.display = 'none';
}else{
document.querySelector('.test-bg').style.display = 'block';
}
console.log(document.body.offsetWidth)
}
if('require' in window){
require(['../dist/dialogx'], function(core) {
var dialogx = core.default;
var src = "https://manhattan.didistatic.com/static/manhattan/mand-mobile/2.0/docs/mand-doc-home-qrcode.png"
$("#alertBtn").click(function() {
dialogx.Alert("支持字符串").then(res=>{console.log(res)})
})
$("#alertBtn2").click(function() {
dialogx.Alert({ msg:'支持异步关闭, 2秒后关闭', wait:(next) => { setTimeout(() => { next() }, 2000) } })
})
$("#confirmBtn").click(function() {
dialogx.Confirm("支持字符串")
})
$("#confirmBtn2").click(function() {
dialogx.Confirm({ msg:'支持异步关闭, 2秒后关闭', wait:(next) => { setTimeout(() => { next() }, 2000) } })
})
$("#promptBtn").click(function() {
dialogx.Prompt({
rules: [
{ required: true, tip: '提示：内容不能为空', trigger: 'change' },
]
}).then(res => { console.log(res) })
})
$("#promptBtn2").click(function() {
dialogx.Prompt({
msg:'支持异步关闭, 2秒后关闭',
rules: [
{ required: true, tip: '提示：请输入谷歌验证码', trigger: 'change' },
{ validator : checkUp, trigger: ['change', 'blur'] }
],
wait:(next, value) => {
setTimeout(() => {
next();
console.log("输入的是:" + value)
}, 2000)
},
noCb:(next) =>{
next();
console.log(2)
}
})
})
function checkUp(value, callback){
if(/[a-zA-Z]/gi.test(value)){
return callback({error:'提示：内容不能带字母'});
}
callback();
}
$("#toastBtn").click(function() {
dialogx.Img(src).then(res => { console.log(res) })
})
$("#toastBtn2").click(function() {
dialogx.Img({ msg:'支持异步关闭, 2秒后关闭', src:src, wait:(next, value) => { setTimeout(() => { next() }, 2000) } })
})
$("#actions").click(function() {
dialogx.Action(src).then(res => { console.log(res) })
})
$("#actions2").click(function() {
dialogx.Action({
msg:'系统有新的更新通知',
hand:[
{ key:0, value:"立即更新" },
{ key:1, value:"稍后1小时通知" },
{ key:2, value:"稍后2小时通知" },
{ key:3, value:"明天在通知" },
{ key:4, value:"不了, 谢谢" },
],
wait:(next, value) => {
setTimeout(() => {
next();
console.log("选择了key是" + value)
}, 2000)
}
})
})
$("#pin").click(function() {
dialogx.Pin({
pinLen: 4,
wait:(next, value) => {
console.log(value)
next()
}
}).then(res => {
console.log(res)
})
})
$('#key').click(function() {
console.log(40)
})
$('#success').click(function(){
dialogx.success({
msg: '罗三炮渣男',
time: 3000,
})
})
$('#error').click(function(){
dialogx.error('罗三炮渣男', 3000)
})
$('#warn').click(function(){
dialogx.warn('大老们对刘海屏适配有方案吗')
})
$('#load').click(function(){
dialogx.loading('加载中...',1000)
// setTimeout(()=>{
// dialogx.loading(false)
// },3500)
})
})
}else{
var src = "https://manhattan.didistatic.com/static/manhattan/mand-mobile/2.0/docs/mand-doc-home-qrcode.png"
$("#alertBtn").click(function() {
dialogx.Alert("支持字符串").then(res=>{console.log(res)})
})
$("#alertBtn2").click(function() {
dialogx.Alert({ msg:'支持异步关闭, 2秒后关闭', wait:(next) => { setTimeout(() => { next() }, 2000) } })
})
$("#confirmBtn").click(function() {
dialogx.Confirm("支持字符串")
})
$("#confirmBtn2").click(function() {
dialogx.Confirm({ msg:'支持异步关闭, 2秒后关闭', wait:(next) => { setTimeout(() => {
next()
dialogx.Alert("支持字符串")
}, 2000) } })
})
$("#promptBtn").click(function() {
dialogx.Prompt({
rules: [
{ required: true, tip: '提示：内容不能为空', trigger: 'change' },
]
}).then(res => { console.log(res) })
})
$("#promptBtn2").click(function() {
dialogx.Prompt({
msg:'支持异步关闭, 2秒后关闭',
rules: [
{ required: true, tip: '提示：内容不能为空', trigger: 'change' },
{ validator : checkUp, trigger: 'change' }
],
wait:(next, value) => {
setTimeout(() => {
next();
console.log("输入的是:" + value)
}, 2000000)
},
noCb:(next) =>{
next();
console.log(2)
}
})
})
function checkUp(value, callback){
if(/[a-zA-Z]/gi.test(value)){
return callback({error:'提示：内容不能带字母'});
}
callback();
}
$("#toastBtn").click(function() {
dialogx.Img(src).then(res => { console.log(res) })
})
$("#toastBtn2").click(function() {
dialogx.Img({ msg:'支持异步关闭, 2秒后关闭', src:src, wait:(next, value) => { setTimeout(() => { next() }, 2000) } })
})
$("#actions").click(function() {
dialogx.Action(src).then(res => { console.log(res) })
})
$("#actions2").click(function() {
dialogx.Action({
msg:'系统有新的更新通知',
hand:[
{ key:0, value:"立即更新" },
{ key:1, value:"稍后1小时通知" },
{ key:2, value:"稍后2小时通知" },
{ key:3, value:"明天在通知" },
{ key:4, value:"不了, 谢谢" },
],
wait:(next, value) => {
setTimeout(() => {
next();
console.log("选择了key是" + value)
}, 2000)
}
})
})
$("#pin").click(function() {
dialogx.Pin({
pinLen: 4,
wait:(next, value) => {
console.log(value)
next()
}
}).then(res => {
console.log(res)
})
})
$('#key').click(function() {
console.log(40)
})
$('#success').click(function(){
dialogx.success({
msg: '罗三炮渣男',
time: 3000,
hasMark: true
})
})
$('#error').click(function(){
dialogx.error('罗三炮渣男', 3000, true)
})
$('#warn').click(function(){
dialogx.warn('大老们对刘海屏适配有方案吗')
})
}
</script>
</body>
</html>