forked from DevGrow/SliderNav
-
Notifications
You must be signed in to change notification settings - Fork 6
/
README.html
126 lines (98 loc) · 5.77 KB
/
README.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<h1 id="alphanav">AlphaNav</h1>
<h2 id="overview">Overview</h2>
<p><strong>AlphaNav</strong> is a simple jQuery plugin that adds a vertical alphabet slider to an alphabetized list. It’s functionality is similar to the iOS Contacts app, and is intended to be used with longer lists, like contacts, countries, etc.</p>
<h3 id="basicusage">Basic Usage</h3>
<p>Make sure that you are loading jQuery, Velocity, and alphaNav.js (or alphaNav.min.js), at some point before calling alphaNav. You should also include the default CSS, or copy the structural CSS into an existing CSS file. A simple example of this:</p>
<pre><code><script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="dist/alphaNav.min.js"></script>
<link rel="stylesheet" href="dist/alphaNav.min.css" />
</code></pre>
<p>All you have to do is call alphaNav on the jQuery object holding the content to scroll, like so:</p>
<pre><code>// Convert #list-content to a scrolling list using the default settings (see below)
$("#list-content").alphaNav();
</code></pre>
<p>Actually, it’s not <em>that</em> easy. You’re also going to have to add a class to the list headers (or, if you don’t have list headers, the first element of every new letter). The default header class prefix is <code>.alphanav-header-</code>, but you can change that if you need to. An example of the header class you have to add to your HTML for the letter A would be <code>.alphanav-header-A</code></p>
<p>If you want to undo everything that alphaNav did, simply call:</p>
<pre><code>$.fn.alphaNav.destroy();
</code></pre>
<p>If you want to override any of the default settings, you can either pass them into the alphaNav method:</p>
<pre><code>$('#list-content').alphaNav({
arrows: false,
debug: true,
growEffect: true,
transitionDuration: 250,
overlay: true
});
</code></pre>
<p>…OR globally over-ride the defaults; this would be the preferred method if you are using alphaNav in more than one location on your site:</p>
<pre><code>$.fn.alphaNav.config.debug = true;
$.fn.alphaNav.config.overlay = false;
// Any calls to alphaNav *after* these two lines will have debug = true and overlay = false.
</code></pre>
<h2 id="settingsdefaults">Settings & Defaults</h2>
<pre><code>$.fn.alphaNav.config = {
arrows: false,
autoHeight: true,
container: null,
debug: false,
growEffect: false,
headerClassPrefix: 'alphanav-header-',
height: false,
letters: [
"A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M",
"N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"
],
listSide: 'right',
onScrollComplete: function () {},
overlay: true,
animationDuration: 500,
trimList: false,
trimReplacement: '&#8226;',
wrapperAttributes: {
id: 'alphanav-wrapper'
}
};
</code></pre>
<ul>
<li><code>arrows</code>: Include the up/down arrows to scroll the window up/down by the current page height</li>
<li><code>autoHeight</code>: Adjust alphabet list height automatically. Disable if you’d like to set list height + margins manually</li>
<li><code>container</code>: The selector to insert everything into. If blank, a wrapper div will be created with the ID from <code>wrapperAttributes</code></li>
<li><code>debug</code>: Include the debug overlay + console debugging</li>
<li><code>growEffect</code>: Grow the text as you drag your finger/mouse over it</li>
<li><code>headerClassPrefix</code>: Prefix for letter headers, followed by the letter, i.e. .alphanav-header-A</li>
<li><code>height</code>: The height of the AlphaNav wrapper + slider (default: height of window)</li>
<li><code>letters</code>: The letters to build the slider with</li>
<li><code>listSide</code>: Which side should the list stick to?</li>
<li><code>onScrollComplete</code>: A callback function that will fire after scrolling is complete</li>
<li><code>overlay</code>: When scrolling, show the current letter in an overlay</li>
<li><code>animationDuration</code>: Duration of all animations (in ms); passing 0 will disable scrolling animation</li>
<li><code>trimList</code>: Trim the list of scrolling letters by dropping any that don’t have matching headers, and replace with <code>trimReplacement</code></li>
<li><code>trimReplacement</code>: What to replace empty letters with; pass null to skip li element entirely</li>
<li><code>wrapperAttributes</code>: Any additional HTML attributes to add to the wrapper div</li>
</ul>
<h4 id="real-worldexamples">Real-world Examples</h4>
<ul>
<li><a href="https://helloearth.mobi/rates/index">HelloEarth - Rates</a> (Mobile-only web app)</li>
<li>If you integrate this plugin into your webapp and would like to be included in this list, let me know and I will add a link to your project.</li>
</ul>
<h2 id="todo"># TODO</h2>
<ol>
<li>Sticky letter headers</li>
<li>Fix overlay animation (no need to fadeOut if still needed)</li>
<li>Remove jQuery dependency</li>
<li>Any recommendations/suggestions?</li>
</ol>
<h4 id="metadata">Metadata</h4>
<p><strong>Plugin Name:</strong> AlphaNav</p>
<p><strong>Version:</strong> 2.0.0</p>
<p><strong>Author:</strong> triq6</p>
<p><strong>Dependencies:</strong> jQuery, Velocity</p>
<p><strong>Forked from:</strong> <a href="https://github.com/DevGrow/SliderNav">SliderNav</a> (Original author: <a href="http://mdolon.com/">Monjurul Dolon</a>)</p>
</body>
</html>