148 lines
3.8 KiB
HTML
Executable File
148 lines
3.8 KiB
HTML
Executable File
<!doctype html>
|
|
<html lang="zh">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>test</title>
|
|
<style>
|
|
#follow-elem {
|
|
width: 120px;
|
|
height: 120px;
|
|
position: absolute;
|
|
left: 50%;
|
|
margin-left: -60px;
|
|
top: 38%;
|
|
margin-top: -40px;
|
|
background: #e3f5ff;
|
|
border: 1px solid #abd3ea;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
#follow-elem input {
|
|
width: 14px;
|
|
height: 14px;
|
|
position: absolute;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#follow-elem .nw {
|
|
left: 14px;
|
|
top: 0;
|
|
}
|
|
|
|
#follow-elem .n {
|
|
left: 50%;
|
|
margin-left: -7px;
|
|
top: 0;
|
|
}
|
|
|
|
#follow-elem .ne {
|
|
right: 14px;
|
|
top: 0;
|
|
}
|
|
|
|
#follow-elem .en {
|
|
right: 0;
|
|
top: 14px;
|
|
}
|
|
|
|
#follow-elem .e {
|
|
right: 0;
|
|
top: 50%;
|
|
margin-top: -7px;
|
|
}
|
|
|
|
#follow-elem .es {
|
|
right: 0;
|
|
bottom: 14px;
|
|
}
|
|
|
|
#follow-elem .se {
|
|
right: 14px;
|
|
bottom: 0;
|
|
}
|
|
|
|
#follow-elem .s {
|
|
left: 50%;
|
|
margin-left: -7px;
|
|
bottom: 0;
|
|
}
|
|
|
|
#follow-elem .sw {
|
|
left: 14px;
|
|
bottom: 0;
|
|
}
|
|
|
|
#follow-elem .ws {
|
|
left: 0;
|
|
bottom: 14px;
|
|
}
|
|
|
|
#follow-elem .w {
|
|
left: 0;
|
|
top: 50%;
|
|
margin-top: -7px;
|
|
}
|
|
|
|
#follow-elem .wn {
|
|
left: 0;
|
|
top: 14px;
|
|
}
|
|
|
|
code {
|
|
color: #888;
|
|
}
|
|
|
|
code strong {
|
|
color: #000;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<pre><code>var follow = document.getElementById('follow-elem');
|
|
var d = dialog({
|
|
align: '<strong id="test-align-value">bottom left</strong>',
|
|
content: 'hello world'
|
|
});
|
|
d.show(follow);</code></pre>
|
|
|
|
<div id="follow-elem">
|
|
<input type="radio" name="align" value="top left" class="nw" title="top left">
|
|
<input type="radio" name="align" value="top" class="n" title="top">
|
|
<input type="radio" name="align" value="top right" class="ne" title="top right">
|
|
<input type="radio" name="align" value="right top" class="en" title="right top">
|
|
<input type="radio" name="align" value="right" class="e" title="right">
|
|
<input type="radio" name="align" value="right bottom" class="es" title="right bottom">
|
|
<input type="radio" name="align" value="bottom right" class="se" title="bottom right">
|
|
<input type="radio" name="align" value="bottom" class="s" title="bottom">
|
|
<input type="radio" name="align" value="bottom left" class="sw" title="bottom left" checked>
|
|
<input type="radio" name="align" value="left bottom" class="ws" title="left bottom">
|
|
<input type="radio" name="align" value="left" class="w" title="left">
|
|
<input type="radio" name="align" value="left top" class="wn" title="left top">
|
|
</div>
|
|
|
|
|
|
<script src="../lib/jquery-1.10.2.js"></script>
|
|
<script src="../dist/dialog.js"></script>
|
|
|
|
<script>
|
|
var follow = $('#follow-elem')[0];
|
|
var d = dialog({
|
|
align: 'bottom left',
|
|
content: 'hello world'
|
|
});
|
|
d.show(follow);
|
|
|
|
$('#follow-elem').on('click', '[type=radio]', function() {
|
|
if (d.open) {
|
|
var align = $(this).val();
|
|
d.align = align;
|
|
d.show(follow);
|
|
$('#test-align-value').html(align);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |