-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
132 lines (109 loc) · 4.49 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
<!DOCTYPE HTML>
<html>
<head>
<title>stuQuery</title>
<link rel="stylesheet" href="css/prettify.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/prettify.js"></script>
<script type="text/javascript" src="js/stuquery.js"></script>
<script>
// Add an event to be called when the document is loaded
S(document).ready(function(){
S('.version').html(S().stuquery)
prettyPrint();
function success(data,a){
S('#fileoutput').append('<p>Success for <em>'+a.url+'<\/em><\/p>');
S('#fileoutput').append("<textarea>"+data+"<\/textarea>");
}
function error(e,a){
S('#fileoutput').append('<p>Failed to load '+a.url+'<\/p>');
}
S().ajax("file.txt",{'complete': success, 'error': error });
S().ajax("nofile.txt",{'complete': success, 'error': error });
S().ajax("js/stuquery.js",{'el':S('.size'),'success':function(e,attr){
attr.el.html(((e.length||0)/1000).toFixed(1)+"kB");
}})
S().ajax("js/stuquery.min.js",{'el':S('.size-min'),'success':function(e,attr){
attr.el.html(((e.length||0)/1000).toFixed(1)+"kB");
}})
});
</script>
<style>
.version { margin-top: -0.25em; font-size: 0.5em; position: absolute; }
</style>
</head>
<body>
<a href="https://github.com/slowe/stuquery" id="forkme_banner">Fork Me on GitHub</a>
<div id="content">
<section id="downloads">
<a href="js/stuquery.js">stuquery.js (<span class="size">kB</span>)</a>
<a href="js/stuquery.min.js">stuquery.min.js (<span class="size-min">kB</span>)</a>
</section>
<h1 data="Some data">stuQuery<span class="version">v</span></h1>
<p>I often use jQuery but it was becoming too big for most of my use cases. I only needed a few basic features. So I've gone back to basics and made my own small library. The aim was to make the usage be as similar to jQuery as possible so that I can switch back-and-forth if I need to. To avoid conflicts, rather than <code>$</code> I've used <code>S</code>. There are some <a href="tests/index.html">unit tests</a> to check it works correctly across browsers</a>. There is <a href="download.html">an experimental package builder</a> to remove parts you don't need. There is also a plugin:</p>
<ul>
<li><a href="barchart.html">stuQuery barchart</a></li>
<li><a href="hexmap.html">stuQuery hex map</a></li>
</ul>
<h2>Basic example</h2>
<pre class="prettyprint lang-js">
<code>S(document).ready(function(){
// Things that happen once the document is loaded
});</code></pre>
<h2>Selectors</h2>
<p>Selection is pretty simplistic. Selection doesn't work on compound selectors e.g. <code>ul#menu</code> won't work but <code>ul</code> and <code>#menu</code> will work individually.</p>
<pre class="prettyprint lang-js">
<code>
S('.cssClass'); // Get all elements with the class cssClass
S('#menu'); // Get the element with the ID 'menu'
S('li'); // Get all the list items
S('#menu li'); // Get all the list items in the element with the ID 'menu'
S('li').parent(); // Get the parent DOM element
S('li').children('span'); // Get a child span element
S('li').find('span'); // Get a descendent span element
</code></pre>
<h2>DOM manipulation</h2>
<pre class="prettyprint lang-js">
<code>
// Return the HTML of the selected DOM element
S('#menu').html();
// Replace content of DOM element(s)
S('#menu').html('HTML');
// Append provided content to DOM element
S('#menu').append('HTML');
// Return the value(s) of the attribute
S('img').attr('alt');
// Set the value(s) of the attribute
S('img').attr('alt','Alt');
// Get a property of the attribute
S('img').prop('alt');
// Add the CSS class 'cls'
S('div').addClass('cls');
// Remove the CSS class 'cls'
S('div').removeClass('cls');
// Toggle the CSS class 'cls'
S('div').toggleClass('cls');
// Return true if the DOM element has the class 'cls'
S('div').hasClass('cls');
// Set the CSS properties
S('div').css({'font-size':'0.8em'});
// Removes selected item(s)
S('div').remove();
</code></pre>
<h2>File loading</h2>
<pre class="prettyprint lang-js">
<code>function success(data,a){
S('#output').append('<p>Success for <em>'+a.url+'<\/em><\/p>');
S('#output').append("<textarea>"+data+"<\/textarea>");
}
function error(e,a){
S('#output').append('<p>Failed to load '+a.url+'<\/p>');
}
S().ajax("file.txt",{'complete': success, 'error': error }); // This file exists
S().ajax("nofile.txt",{'complete': success, 'error': error }); // This file doesn't exist
</code></pre>
<div id="fileoutput" class="output">
</div>
</div>
</body>
</html>