221 lines
9.6 KiB
HTML
221 lines
9.6 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
|
||
<link href="/jscss/style.css" rel="stylesheet" type="text/css" />
|
||
<script type="text/javascript" charset="utf-8" src="/jscss/theme.js"></script>
|
||
<style>
|
||
.container>div {
|
||
padding: 1em;
|
||
background: var(--bg1);
|
||
margin-bottom: 1em;
|
||
border: 1px solid var(--bg5);
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="container">
|
||
|
||
<blockquote>对话框</blockquote>
|
||
<div>
|
||
<button class='btn' onclick="ciyfn.alert('操作完成')">弹出对话框</button>
|
||
<button class='btn' onclick="ciyfn.alert('尺寸自适应，尺寸自适应，尺寸自适应，尺寸自适应，尺寸自适应，尺寸自适应<br/>尺寸自适应<br/>尺寸自适应<br/>尺寸自适应<br/>')">尺寸自适应对话框</button>
|
||
<button class='btn' onclick="ciyfn.alert('能自动换行的超长文本能自动换行的超长文本能自动换行的超长文本能自动换行的超长文本能自动换行的超长文本能自动换行的超长文本能自动换行的超长文本能自动换行的超长文本能自动换行的超长文本能自动换行的超长文本能自动换行的超长文本能自动换行的超长文本能自动换行的超长文本能自动换行的超长文本能自动换行的超长文本能自动换行的超长文本能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本')">超长文本对话框</button>
|
||
</div>
|
||
|
||
<blockquote>自定尺寸对话框</blockquote>
|
||
<div>
|
||
<button class='btn' onclick="alert0()">自定义尺寸</button>
|
||
<button class='btn' onclick="alert0b()">尽量宽</button>
|
||
<button class='btn' onclick="alert0c()">尽量高</button>
|
||
<button class='btn' onclick="alert0d()">移动端</button>
|
||
<button class='btn' onclick="alert0e()">全屏</button>
|
||
</div>
|
||
<script type="text/javascript">
|
||
'use strict';
|
||
function alert0() {
|
||
ciyfn.alert({
|
||
width: '30em',
|
||
height: '20em',
|
||
content: '自定义尺寸对话框'
|
||
});
|
||
}
|
||
function alert0b() {
|
||
ciyfn.alert({
|
||
width: 'pc',
|
||
content: '尽量宽对话框'
|
||
});
|
||
}
|
||
function alert0c() {
|
||
ciyfn.alert({
|
||
height: 'pc',
|
||
content: '尽量高对话框'
|
||
});
|
||
}
|
||
function alert0d() {
|
||
ciyfn.alert({
|
||
width: 'mb',
|
||
content: '移动端对话框'
|
||
});
|
||
}
|
||
function alert0e() {
|
||
ciyfn.alert({
|
||
width: 'max',
|
||
height: 'max',
|
||
content: '全屏对话框'
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<blockquote>多按钮对话框</blockquote>
|
||
<div>
|
||
<button class='btn' onclick="alert1()">多按钮对话框</button>
|
||
<button class='btn' onclick="alert1b()">写法二</button>
|
||
</div>
|
||
<script type="text/javascript">
|
||
'use strict';
|
||
function alert1() {
|
||
ciyfn.alert('确定删除？', function (opn) {
|
||
ciyfn.alert('点击：' + opn.btn);
|
||
}, { btns: ['确定', '!红按钮', '*灰按钮'] }
|
||
);
|
||
}
|
||
function alert1b() {
|
||
ciyfn.alert({
|
||
content: '确定删除？',
|
||
btns: ['确定', '!红按钮', '*灰按钮'],
|
||
cb: function (opn) {
|
||
ciyfn.alert('点击：' + opn.btn);
|
||
}
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<blockquote>带输入对话框</blockquote>
|
||
<div>
|
||
<button class='btn' onclick="alert3()">自定义输入框</button>
|
||
</div>
|
||
<script type="text/javascript">
|
||
'use strict';
|
||
function alert3() {
|
||
ciyfn.alert({
|
||
content: '<div class="ciy-form"><label>文本框</label><div><input type="text" name="title"/></div></div><div class="ciy-form"><label>下拉列表框</label><div><select name="sel"><option value="afds">aaaa</option></select></div></div><div class="ciy-form"><label>多行文本框</label><div><textarea name="text"></textarea></div></div>',
|
||
cb: function (opn) {
|
||
console.log(opn);
|
||
ciyfn.alert('已输入<br/>input:' + opn.inputs.title + "<br/>select:" + opn.inputs.sel + "<br/>textarea:" + opn.inputs.text);
|
||
}
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<blockquote>iframe对话框</blockquote>
|
||
<div>
|
||
<button class='btn' onclick="alert4()">嵌入同域对话框</button>
|
||
<button class='btn' onclick="alert4b()">最大化网页对话框</button>
|
||
<button class='btn' onclick="alert4c()">嵌入跨域对话框</button>
|
||
</div>
|
||
<script type="text/javascript">
|
||
'use strict';
|
||
function alert4() {
|
||
ciyfn.alert({
|
||
width: 'pc',
|
||
frame: 'index.html'
|
||
});
|
||
}
|
||
function alert4b() {
|
||
ciyfn.alert({
|
||
width: 'max',
|
||
height: 'max',
|
||
frame: 'index.html'
|
||
});
|
||
}
|
||
function alert4c() {
|
||
ciyfn.alert({
|
||
width: 'pc',
|
||
frame: 'http://tob.ciy.cn/work/'
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<blockquote>iframe对话框回调</blockquote>
|
||
<div>
|
||
<button class='btn' onclick="alert5()">演示回调</button>
|
||
</div>
|
||
<script type="text/javascript">
|
||
'use strict';
|
||
function alert5() {
|
||
ciyfn.alert({
|
||
title: '演示回调',
|
||
frame: 'demo_alertcb.html',
|
||
cb: function (opn) {
|
||
console.log(opn);
|
||
opn.close();
|
||
ciyfn.alert('回调成功:' + opn.btn + '，请查看console');
|
||
}
|
||
});
|
||
}
|
||
</script>
|
||
<blockquote>自定义对话框</blockquote>
|
||
<div>
|
||
<button class='btn' onclick="alert10()">自定义标题</button>
|
||
<button class='btn' onclick="alert11()">无标题栏对话框</button>
|
||
<button class='btn' onclick="alert12()">无按钮对话框</button>
|
||
</div>
|
||
<script type="text/javascript">
|
||
'use strict';
|
||
function alert10() {
|
||
ciyfn.alert('看上面↑', null, { title: '自定义标题' });
|
||
}
|
||
function alert11() {
|
||
ciyfn.alert('没有标题栏', null, { title: null });
|
||
}
|
||
function alert12() {
|
||
ciyfn.alert('没有按钮', null, { btns: null });
|
||
}
|
||
</script>
|
||
|
||
<blockquote>左右对齐对话框</blockquote>
|
||
<div>
|
||
<button class='btn' onclick="alert20()">左对齐弹出</button>
|
||
<button class='btn' onclick="alert21()">右对齐弹出</button>
|
||
</div>
|
||
<script type="text/javascript">
|
||
'use strict';
|
||
function alert20() {
|
||
ciyfn.alert('左对齐', null, { align: 'left' });
|
||
}
|
||
function alert21() {
|
||
ciyfn.alert('右对齐', null, { align: 'right' });
|
||
}
|
||
</script>
|
||
|
||
<blockquote>其他对话框</blockquote>
|
||
<div>
|
||
<button class='btn' onclick="alert50()">最大化对话框</button>
|
||
<button class='btn' onclick="alert51()">点空白不关闭</button>
|
||
</div>
|
||
<script type="text/javascript">
|
||
'use strict';
|
||
function alert50() {
|
||
ciyfn.alert('最大化对话框', null, { width: 'max',height:'max' });
|
||
}
|
||
function alert51() {
|
||
ciyfn.alert('点空白不关闭', null, { maskclose: false });
|
||
}
|
||
</script>
|
||
<br /><br />
|
||
</div>
|
||
|
||
<script type="text/javascript" src="/jscss/ciy.js"></script>
|
||
<script type="text/javascript" src="/jscss/ciycmp.js"></script>
|
||
<script type="text/javascript" src="../../common.js"></script>
|
||
<script type="text/javascript">
|
||
'use strict';
|
||
</script>
|
||
</body>
|
||
|
||
</html> |