-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathJqueryUI.html
More file actions
130 lines (123 loc) · 3.68 KB
/
Copy pathJqueryUI.html
File metadata and controls
130 lines (123 loc) · 3.68 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jquery UI</title>
<script type="text/javascript" src="jquery.min.js"></script>
<link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.min.css">
<link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.structure.min.css">
<link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.theme.min.css">
<script type="text/javascript" src="jquery-ui-1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="JqueryUI.js"></script>
<style>
.Element{
width: 300px;
height: 300px;
background-color: cornflowerblue;
border: 3px black solid;
float: left;
margin: 50px;
}
.List li{
width: 80%;
padding: 20px;
border: 3px solid darkgray;
list-style: none;
cursor: pointer;
border-radius: 3px;
}
ul .ui-selecting{
background-color: cornflowerblue;
}
ul .ui-selected{
background-color: green;
}
#moved{
width: 200px;
height: 200px;
background-color: purple;
float: left;
margin: 50px;
}
#content{
width: 400px;
height: 400px;
background-color: darkslateblue;
float: left;
margin: 50px;
}
.Element{
background-color: white;
float: none;
}
</style>
</head>
<body>
<h1>Aprendiendo Jquery UI</h1>
<h2>Droppable</h2>
<div id="moved" >
</div>
<div id="content" >
</div>
<hr style="margin-top: 550px;">
<h2>Selectable & sortable</h2>
<ul class="List">
<li>JavaScript</li>
<li>Java</li>
<li>Python</li>
<li>Go</li>
<li>Rust</li>
</ul>
<h2>draggable & resizable</h2>
<div class="Element">
<hr>
Hey , i am a Element of the web
</div>
<div class="Element">
Hey , i am a Element of the web
</div>
<div class="Element">
Hey , i am a Element of the web
</div>
<hr style="margin-top: 100px;">
<h2>efectos </h2>
<button id="effect">effect</button>
<div class="box-effects Element">
<h1>effect</h1>
</div>
<hr style="margin-top: 100px;">
<h2>Tooltip </h2>
<div>
<a href="#" id="my-info" title="access to my information">My Info</a><br>
<a href="#" id="my-info" title="identify myself">My identification</a><br>
<a href="#" id="my-info" title="see all my friends">My Friends</a><br>
</div>
<hr>
<h2>Cuadros de Dialogo </h2>
<button id="Exit">Exit</button>
<div id="popup" title="Are you Sure?" style="display: none;">
<p>if you continue in the course you will learn a lot about JavaScript</p>
</div>
<hr>
<h2>Calendar</h2>
<div>
<input type="text" id="calendar"/>
</div>
<hr>
<h2>Pestañas</h2>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Python</a></li>
<li><a href="#tabs-2">Java</a></li>
<li><a href="#tabs-3">JavaScript</a></li>
<li><a href="#tabs-4">Rust</a></li>
</ul>
<div id="tabs-1">Learn Python</div>
<div id="tabs-2">Learn Java</div>
<div id="tabs-3">Learn JavaScript</div>
<div id="tabs-4">Learn Rust</div>
</div>
<hr>
</body>
</html>