-
Notifications
You must be signed in to change notification settings - Fork 506
/
index.html
135 lines (129 loc) · 5.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE HTML>
<html>
<head>
<title>Example Title</title>
<style>
.draggable {
display: block;
background-color: #0000ff;
width: 100px;
height: 30px;
}
.droppable {
display: block;
background-color: #ccc;
width: 200px;
height: 50px;
}
</style>
<script type="text/javascript" src="/static/jquery.min.js"></script>
<script type="text/javascript" src="/static/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".draggable").draggable();
$(".droppable").droppable({
drop: function() {
$('.dragged').html('yes');
}
});
$("body").dblclick(function(){
$("body").css("background-color", "#ff0000");
});
$(".should-be-visible-after-double-click").hide();
$(".db-button").dblclick(function(){
$(".should-be-visible-after-double-click").show();
});
$(".add-async-element").click(function() {
setTimeout(function() {
$('body').append('<h4 id="async-header" value="async-header-value" class="async-element">async elment</h4>');
$('body').append('<input type="text" name="async-input" class="async-input" />');
}, 1200 );
setTimeout(function() {
$('body').append('<h5 id="async-header2" class="async-element2">async elment2</h5>');
$('body').append('<input type="text" name="async-input2" class="async-input2" />');
}, 2400 );
});
$('.right-clicable').bind('contextmenu', function(){
$(this).html('right clicked');
});
$(".remove-async-element").click(function() {
setTimeout(function() {
$('.async-element').remove();
$('.async-input').remove();
}, 1200 );
setTimeout(function() {
$('.async-element2').remove();
$('.async-input2').remove();
}, 2400 );
});
$(".add-element-mouseover").mouseover(function () {
$('body').append('<label for="what-is-your-name" class="over-label">What is your name?</label>');
$('body').append('<input type="text" id="what-is-your-name" class="over-input" name="whatsname" />');
});
$(".add-element-mouseover").mouseout(function () {
$('.over-label').remove();
$('.over-input').remove();
});
});
</script>
</head>
<body>
<h1 id="firstheader">Example Header</h1>
<h1 id="firstheader">Example Last Header</h1>
<form action="name" method="GET">
<label for="query">Query</label>
<input type="text" name="query" value="default value" />
<input type="text" name="query" value="default last value" />
<label for="send">Send</label>
<input type="submit" name="send" />
<input type="radio" name="gender" value="M" id="gender-m" /> Male
<input type="radio" name="gender" value="F" id="gender-f" /> Female
<input type="checkbox" name="some-check" value="choice" />
<input type="checkbox" name="checked-checkbox" value="choosed" checked="checked" />
<select name="uf">
<option value="mt">Mato Grosso</option>
<option value="rj">Rio de Janeiro</option>
</select>
<label for="description">Description</label>
<textarea rows="3" cols="50" name="description"></textarea>
</form>
<form action="/upload" method="POST" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" name="upload" />
</form>
<a href="http://example.com/">Link for Example.com</a>
<a href="http://example.com/last">Link for Example.com</a>
<a href="http://example.com/">Link for last Example.com</a>
<div id="visible">visible</div>
<div id="invisible" style="display:none">invisible</div>
<div id="simple_text">my test text</div>
<div id="text_with_html">another <b>b</b>it of text</div>
<a href="http://localhost:5000/foo">FOO</a>
<a href="http://localhost:5000/foo">A wordier (and last) link to FOO</a>
<a class="add-async-element" href="#">add async element</a>
<a class="remove-async-element" href="#">remove async element</a>
<a class="add-element-mouseover" href="#">addelement (mouseover)</a>
<iframe id="iframemodal" src="/iframe"></iframe>
<div id="inside">
<h2>inside</h2>
<form>
<input id="visible" name="upload" type="text" value="crazy diamond" />
</form>
</div>
<a href="#" class="db-button">double click button</a>
<div class="should-be-visible-after-double-click">should-be-visible-after-double-click</div>
<div class="right-clicable">no right click</div>
<div class="draggable">draggable</div>
<div class="droppable">droppable</div>
<div class="dragged">no</div>
<div class="has-class-first has-class-middle has-class-end"></div>
<div id="html-property" class="outer html > classes">inner <div class="inner-html">inner text</div> html test</div>
<a id="open-popup" href="javascript:poptastic('/popup')">Open pop-up window</a>
<script>
function poptastic(url) {
var pop = window.open(url, 'name', 'width=300, height=300');
if (window.focus) { pop.focus() }
}
</script>
</body>
</html>