-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
93 lines (85 loc) · 3.97 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
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>trollQuery demo</title>
<meta name="description" content="Black magic for Trolls">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section class="demo" id="demo-text" data-script="#demo-text_script">
<header class="demo-header">
<h1 class="demo-header_title"><code>text():</code></h1>
<p class="demo-header_description">Prepends text with "Poop".</p>
</header>
<figure class="example padded-box padded-box__example">
<h2 class="padded-box_header">Example:</h2>
<div class="js-target padded-box_body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</figure>
<form class="actions">
<label>
Try me: update the example text
<input class="js-input" type="text" value="blah blah blah">
</label>
<button type="button" class="js-trigger">Change the text</button>
</form>
</section>
<section class="demo" id="demo-slidetoggle" data-script="#demo-slidetoggle_script">
<header class="demo-header">
<h1 class="demo-header_title"><code>slideToggle():</code></h1>
<p class="demo-header_description">Plays a slide whistle noise.</p>
</header>
<figure class="example padded-box padded-box__example">
<h2 class="padded-box_header">Example:</h2>
<div class="js-target padded-box_body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</figure>
<form class="actions">
<label>
Try me:
<button type="button" class="js-trigger">Show/Hide</button>
</label>
</form>
</section>
<a href="https://github.com/trolljs/trollQuery"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="trollQuery.js"></script>
<script id="demo-text_script">
$('#demo-text').on( 'click', '.js-trigger', function(e) {
var $parent = $(e.delegateTarget);
$parent.find('.js-target').text( $parent.find('.js-input').val() );
});
</script>
<script id="demo-slidetoggle_script">
$('#demo-slidetoggle').on( 'click', '.js-trigger', function(e) {
var $parent = $(e.delegateTarget);
$parent.find('.js-target').slideToggle();
});
</script>
<script>
// Grab and display the <script> contents for each demo
$('[data-script]').each(function() {
var $this = $(this);
$this.find('.actions')[0].innerHTML =
$this.find('.actions')[0].innerHTML +
'<figure class="code padded-box"><h2 class="padded-box_header">Code:</h2>' +
'<pre class="padded-box_body"><code>' + $( $this.data('script') ).html().trim() + '</code></pre>' +
'</figure>';
});
</script>
</body>
</html>