forked from joaool/MotherGithub
-
Notifications
You must be signed in to change notification settings - Fork 0
/
test_JQ.html
166 lines (166 loc) · 7.38 KB
/
test_JQ.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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html lang="en">
<head>
<title>JQuery v1.0</title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<!--
-->
</head>
<body>
<ul id="nav">
<li>
<a href="#">Top Level Nav Item1</a>
<ul>
<li><a href="#">Second Level Nav Item</a></li>
<li><a href="#">Second Level Nav Item</a></li>
<li><a href="#">Second Level Nav Item</a></li>
</ul>
</li>
<li>
<a href="http://www.microsoft.com">Top Level Nav Item2</a>
<ul>
<li><a href="#">Second Level Nav Item</a></li>
<li><a href="#">Second Level Nav Item</a></li>
<li><a href="#">Second Level Nav Item</a></li>
</ul>
</li>
<li>
<a href="#">Top Level Nav Item3</a>
<ul>
<li><a href="#">Second Level Nav Item</a></li>
<li><a href="#">Second Level Nav Item</a></li>
<li><a href="#">Second Level Nav Item</a></li>
</ul>
</li>
<li>
<a href="#">Top Level Nav Item4</a>
<ul>
<li><a href="#">Second Level Nav Item</a></li>
<li><a href="#">Second Level Nav Item</a></li>
<li><a href="#">Second Level Nav Item</a></li>
</ul>
</li>
<li>
<a href="#">Top Level Nav Item5</a>
<ul>
<li><a href="#">Second Level Nav Item</a></li>
<li><a href="#">Second Level Nav Item</a></li>
<li><a href="#">Second Level Nav Item</a></li>
</ul>
</li>
</ul>
<script>
// clicking on a list item loads some content using the
// list item's ID, and hides content in sibling list items - http://viget.com/inspire/simple-jquery-refactoring
//$(document).ready(function() {//VERSION 1
// $('#nav > li > a').click(function() {//only direct li of nav are selected and within this only direct a
// //click event setted only at top levels
// // alert($(this).text());//$(this) has the jQuery selected object
// if($(this).parent().hasClass('current')) {
// // alert("Has current");
// $(this).parents('#nav').find('.current').removeClass('current');
// $(this).parents('#nav').find('ul:visible').slideUp(500);//hides the selected element
// } else {
// // alert("Does not have current");
// $(this).parents('#nav').find('.current').removeClass('current');
// $(this).parents('#nav').find('ul:visible').slideUp(500);
// $(this).parent().addClass('current');
// $(this).siblings('ul').slideDown(500);//shows the brothers of selected element (if it is hidden)
// }
// return false;//this will prevent the default action of the link (following the href) http://api.jquery.com/event.preventDefault/
// //http://jsfiddle.net/5SC6J/
// });
// });
// $(document).ready(function() {//VERSION 2 - remove false and "Caching" jQuery Objects
// //A common practice when storing a jQuery object inside of a variable is to prefix the variable with a $ sign.
// //$('#nav > li > a').click(function(e) {
// $('#nav > li > a').bind('click', function(e) {//the same as previous but saves one function call
// e.preventDefault();//we can remove return false of version1 - see http://jsfiddle.net/5SC6J/
// var $this = $(this), //saves rebuilding of the current Jquery object
// $nav = $this.parents('#nav'),
// $parent = $this.parent();
// if($parent.hasClass('current')) {
// $nav.find('.current').removeClass('current');
// $nav.find('ul:visible').slideUp(500);//hides the selected element
// } else {
// $nav.find('.current').removeClass('current');
// $nav.find('ul:visible').slideUp(500);
// $parent.addClass('current');
// $this.siblings('ul').slideDown(500);//shows the brothers of selected element (if it is hidden)
// }
// });
// });
// function handleNav($el){//VERSION 3 - Making a function that receives a JQuery object
// var $nav = $el.parents('#nav'),
// $parent = $el.parent();
// if($parent.hasClass('current')) {
// $nav.find('.current').removeClass('current');
// $nav.find('ul:visible').slideUp(500);//hides the selected element
// } else {
// $nav.find('.current').removeClass('current');
// $nav.find('ul:visible').slideUp(500);
// $parent.addClass('current');
// $el.siblings('ul').slideDown(500);//shows the brothers of selected element (if it is hidden)
// }
// }
// $(document).ready(function() {
// //A common practice when storing a jQuery object inside of a variable is to prefix the variable with a $ sign.
// //$('#nav > li > a').click(function(e) {
// $('#nav > li > a').bind('click', function(e) {//the same as previous but saves one function call
// e.preventDefault();//we can remove return false of version1 - see http://jsfiddle.net/5SC6J/
// console.log("calling handleNav()");
// handleNav($(this));
// });
// });
//We don't want to clutter up the global namespace with our function, so we should create an object to store all of our functions.
// var JO = JO || {};//VERSION 4 - gathering global functions and appliying DRY (Dont Repeat Yourself)
// console.log(typeof JO);
// JO.handleNav = function($el){
// function hideSecondLevelItems($nav){
// $nav.find('.current').removeClass('current');
// $nav.find('ul:visible').slideUp(500);//hides the selected element
// }
// var $nav = $el.parents('#nav'),
// $parent = $el.parent();
// hideSecondLevelItems($nav);
// if(!$parent.hasClass('current')) {
// $parent.addClass('current');
// $el.siblings('ul').slideDown(500);//shows the brothers of selected element (if it is hidden)
// }
// }
//$(document).ready(function() {
// //A common practice when storing a jQuery object inside of a variable is to prefix the variable with a $ sign.
// //$('#nav > li > a').click(function(e) {
// $('#nav > li > a').bind('click', function(e) {//the same as previous but saves one function call
// e.preventDefault();//we can remove return false of version1 - see http://jsfiddle.net/5SC6J/
// console.log("calling handleNav()");
// JO.handleNav($(this));
// });
// });
var JO = JO || {};//VERSION 5 - avoid using the anonymous function in the $(document).ready
console.log(typeof JO);
JO.handleNav = function(e){
function hideSecondLevelItems($nav){
$nav.find('.current').removeClass('current');
$nav.find('ul:visible').slideUp(500);//hides the selected element
}
e.preventDefault();
var $el = $(this),
$nav = $el.parents('#nav'),
$parent = $el.parent();
hideSecondLevelItems($nav);
if(!$parent.hasClass('current')) {
$parent.addClass('current');
$el.siblings('ul').slideDown(500);//shows the brothers of selected element (if it is hidden)
}
}
$(document).ready(function() {
//A common practice when storing a jQuery object inside of a variable is to prefix the variable with a $ sign.
//$('#nav > li > a').click(function(e) {
// $('#nav > li > a').bind('click', function(e) {//the same as previous but saves one function call
$('#nav > li > a').bind('click', JO.handleNav);//bind always sends an event paramenter
});
console.log(document.title+"...... END..");
</script>
</body>
</html>