-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
151 lines (126 loc) · 6.03 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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>jQuery Filtr Plugin</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="assets/css/styles.css">
<!-- Google Font -->
<link href='//fonts.googleapis.com/css0270.css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<!-- Modernizr -->
<script src="assets/js/modernizr.js" type="text/javascript"></script>
</head>
<body>
<!-- My picture on the right -->
<div class="mypicture"></div>
<header>
<!-- My small picture -->
<img class="mesmall" src="assets/img/IMG_20150514_104948.jpg" alt="">
<h1 class="myname">Hudson Nicoletti — jQuery Filtr Plugin</h1>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<!-- Menu button for mobile devices -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li><a class="active" href="about">About</a></li>
<li><a href="code">Code Examples</a></li>
<li><a href="live">Live Demo</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
<div class="wrap">
<!-- About -->
<div class="content about active">
<h2>Hello, world !</h2>
<h1><b>Thanks for stopping by ! This is a simple jQuery plugin i've made for filtering content easily.</b></h1>
<a href="https://github.com/HudsonNicoletti/jQuery-Filtr-Plugin/"><button class="btn btn-1 btn-1c margin-top">View in GitHub</button></a>
<a href="jQuery.filtr.min.js" download><button class="btn btn-1 btn-1c margin-top">Download Now !</button></a>
</div>
<!-- Code -->
<div class="content code">
<h2 class="title"><span class="glyphicon glyphicon-book" aria-hidden="true"></span>Code Examples</h2>
<p class="subtitle">Totaly flexible</p>
<ul>
<li><span class="bigger"><span class="glyphicon glyphicon-tags" aria-hidden="true"></span> Search Input:</span></li>
<li>
<span class="smaller">
<pre> <input type="text" id="yourSearchElement" /></pre>
</span>
</li>
<li><span class="bigger"><span class="glyphicon glyphicon-tags" aria-hidden="true"></span> jQuery:</span></li>
<li>
<span class="smaller">
<pre>
$('#yourSearchElement').filtr({
target : ".filter-me", // Object to be filterd
targetChild : "span", // Child of Object to be filterd ( not required )
caseSensitive : false, // Filter strictly ( true || false , default is false )
invert : false, // Shows non maches ( true || false , default is false )
});</pre>
</span>
</li>
<li><span class="bigger"><span class="glyphicon glyphicon-tags" aria-hidden="true"></span> Items:</span></li>
<li>
<span class="smaller">
<pre>
<div class="filter-me">
<p>Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.</p>
<span> 00:00 </span>
</div>
<div class="filter-me">
<p>Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.</p>
<span> 01:00 </span>
</div></pre>
</span>
</li>
</ul>
</div>
<!-- Live -->
<div class="content live">
<h2>Live Demo !</h2>
<div class="field">
<input type="text" id="search" placeholder="Type in me !">
</div>
<ul class="filter-me">
<li><span class="smaller"><span class="glyphicon glyphicon-globe" aria-hidden="true"></span>Address</span></li>
<li><span class="bigger">121 King Street, Lorem iso</span></li>
<li><span class="bigger">Victoria 3000 Australia</span></li>
</ul>
<ul class="filter-me">
<li><span class="smaller"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>Contact</span></li>
<li><span class="bigger">How can I help you?</span></li>
</ul>
</div>
</div>
<!-- Java Script -->
<script src="assets/js/jquery-1.11.2.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/app.js"></script>
<script src="assets/js/custom.js"></script>
<script src="jQuery.filtr.js"></script>
<script>
$(function(){
$('#search').filtr({
target : ".filter-me", // Object to be filterd
caseSensitive : false, // Filter strictly ( true || false , default is false )
invert : false, // Shows non maches ( true || false , default is false )
});
});
</script>
</body>
</html>