eapp
Version:
184 lines (165 loc) • 7.14 kB
HTML
<html style="height: 100%;">
<head lang="en">
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>alertPopShow</title>
<link rel="stylesheet" href="dialogTip.css?v=20160520">
<script type="text/javascript" src="../jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="promptBox.js"></script>
</head>
<body>
<script type="text/javascript">
$(function () {
$('#demo1').on('click', function () {
// 第一个参数必须是内容，后面三个参数可以排列组合
webToast("内容内容", "middle", 1000, function () {
console.log("toast消失了---------->")
});
// webToast("内容内容");
//
// webToast("内容内容", "bottom");
// webToast("内容内容", 3000);
//
// webToast("内容内容", "bottom", 1000);
// webToast("内容内容", 3000, "middle");
//
// webToast("内容内容", "middle", 1000, function () {
// console.log("toast消失了---------->")
// });
// webToast("内容内容", 1000, "middle", function () {
// console.log("toast消失了---------->")
// });
});
$('#demo2').on('click', function () {
popTipShow.alert('弹窗标题', '自定义弹窗内容，居左对齐显示，告知需要确认的信息等', ['知道了'],
function (e) {
//callback 处理按钮事件
var button = $(e.target).attr('class');
if (button == 'ok') {
//按下确定按钮执行的操作
//todo ....
this.hide();
}
}
);
});
$('#demo3').on('click', function () {
popTipShow.confirm('弹窗标题', '自定义弹窗内容，居左对齐显示，告知需要确认的信息等', ['确 定', '取 消'],
function (e) {
//callback 处理按钮事件
var button = $(e.target).attr('class');
if (button == 'ok') {
//按下确定按钮执行的操作
//todo ....
this.hide();
setTimeout(function () {
webToast("操作成功", "top", 2000);
}, 300);
}
if (button == 'cancel') {
//按下取消按钮执行的操作
//todo ....
this.hide();
setTimeout(function () {
webToast("您选择“取消”了", "bottom", 2000);
}, 300);
}
}
);
});
$('#demo4').on('click', function () {
var html = "<label>姓名：<input class='confirm_input' placeholder='请输入'></label>";
popTipShow.confirm('弹窗标题', html, ['确 定', '取 消'],
function (e) {
//callback 处理按钮事件
var button = $(e.target).attr('class');
if (button == 'ok') {
if (null == $(".confirm_input").val() || "" == $(".confirm_input").val()) {
webToast("姓名不能为空！", "bottom", 3000);
return;
}
this.hide();
setTimeout(function () {
webToast($(".confirm_input").val(), "bottom", 3000);
}, 300);
//按下确定按钮执行的操作
//todo ....
}
if (button == 'cancel') {
//按下取消按钮执行的操作
//todo ....
this.hide();
setTimeout(function () {
webToast("您选择“取消”了", "top", 2000);
}, 300);
}
}
);
});
$('#demo5').on('click', function () {
loading.tip.show();
setTimeout(function () {
loading.tip.hide();
}, 2000);
});
$('#demo6').on('click', function () {
var progress = 0;
loading.progress.show();
var myVar = setInterval(function () {
console.log("setInterval------------->");
progress += 10;
loading.progress.update(progress);
if(progress >= 100){
console.log("setInterval-----终止-------->");
clearInterval(myVar);
loading.progress.hide();
}
}, 1000)
});
});
</script>
<!--<div class="popload" id="loading">-->
<!--<div class="popload-main">-->
<!--<span class="popload-main-ico"></span>-->
<!--<p class="popload-main-txt">加载中...</p>-->
<!--</div>-->
<!--</div>-->
<!--<div class="c-float-popWrap msgMode hide">-->
<!--<div class="weui_mask_transparent"></div>-->
<!--<div class="c-float-modePop">-->
<!--<div class="warnMsg"></div>-->
<!--<div class="content"></div>-->
<!--<div class="doBtn">-->
<!--<button class="cancel">\u53d6\u6d88</button>-->
<!--<button class="ok">\u786e\u5b9a</button>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="c-float-popWrap alertMode myProgress show">-->
<!--<div class="weui_mask_transparent"></div>-->
<!--<div class="c-float-modePop">-->
<!--<div class="warnMsg">下载更新</div>-->
<!--<span class="popload-main-ico"></span>-->
<!--<p class="progressbar_wrap">-->
<!--<span class="progressbar" id="demo-inline-progressbar">-->
<!--<span style="transform: translate3d(-100%, 0px, 0px);"></span>-->
<!--</span>-->
<!--</p>-->
<!--<span class="content">已下载0%</span>-->
<!--<div class="doBtn">-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
</body>
<div class="demo" id="demo1">toast</div>
<div class="demo" id="demo2">alert</div>
<div class="demo" id="demo3">confirm</div>
<div class="demo" id="demo4">confirm+input</div>
<div class="demo" id="demo5">loading show</div>
<div class="demo" id="demo6">loading progress</div>
</html>