-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
109 lines (102 loc) · 7.11 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
<!DOCTYPE html>
<html>
<head>
<title>Bootmenu</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Bootmenu</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="javascript:void(0)">Home <span class="sr-only">(current)</span></a></li>
<li><a href="demo/">Demo</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h1><a id="Bootmenu_0"></a>Bootmenu</h1>
<p>Simple jQuery animated searchable select menu based on bootstrap framework.</p>
<h2><a id="Installation_5"></a>Installation</h2>
<p>Add [bootmenu.min.js] to your project.</p>
<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">'bootmenu.min.js'</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
</code></pre>
<h2><a id="Basic_usage_14"></a>Basic usage</h2>
<pre><code class="language-js">$(<span class="hljs-string">"div"</span>).bootmenu({ parameters });
</code></pre>
<h2><a id="Ideas_20"></a>Ideas</h2>
<ul>
<li>Bind two select menus on the callback to make a nested one.</li>
</ul>
<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"selectMenu"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"selectMenu2"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
</code></pre>
<pre><code class="language-js">$(<span class="hljs-string">"#selectMenu"</span>).bootmenu({
callback: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">value1</span>) </span>{
alert(value1);
$(<span class="hljs-string">"#selectMenu2"</span>).bootmenu({
listName: <span class="hljs-string">"MenuTwo"</span>,
callback: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">value2</span>) </span>{
alert(value2);
}
});
}
});
</code></pre>
<h2><a id="Configuration_42"></a>Configuration</h2>
<h4><a id="items_45"></a><code>items</code></h4>
<p>Array of items to be added to the list. (default: <code>Please add items to the dropdown!</code>)</p>
<pre><code class="language-js"><span class="hljs-keyword">var</span> food = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(<span class="hljs-string">'Pizza'</span>, <span class="hljs-string">'Meat'</span>, <span class="hljs-string">'Melon'</span>, <span class="hljs-string">'Chicken'</span>, <span class="hljs-string">"Lasagna"</span>, <span class="hljs-string">"Eggs"</span>);
$(<span class="hljs-string">"#selectMenu"</span>).bootmenu({ items : food });
</code></pre>
<h4><a id="defaultText_53"></a><code>defaultText</code></h4>
<p>The default placeholder text to display. (default: <code>Select here!</code>)</p>
<pre><code class="language-js">$(<span class="hljs-string">"#selectMenu"</span>).bootmenu({ defaultText : <span class="hljs-string">"Choose your preferences"</span> });
</code></pre>
<h4><a id="listname_60"></a><code>listname</code></h4>
<p>A unique identifier for each select menu, if you’re using more than one menu. (default: <code>listOne</code>)</p>
<pre><code class="language-js">$(<span class="hljs-string">"#selectMenu"</span>).bootmenu({ listname : <span class="hljs-string">"secondmenu"</span> });
</code></pre>
<h4><a id="background_and_hoverColor_67"></a><code>background</code> and <code>hoverColor</code></h4>
<p>The background color of menu and the hover color of the items. (default: <code>#3498DB</code> and <code>#2C3E50</code>)</p>
<pre><code class="language-js">$(<span class="hljs-string">"#selectMenu"</span>).bootmenu({ background : <span class="hljs-string">"#000"</span>, hoverColor: <span class="hljs-string">"#fff"</span> });
</code></pre>
<h4><a id="listAnimation_74"></a><code>listAnimation</code></h4>
<p>The animation effect when clicking the select menu. (default: <code>slideDown</code>)<br><br> Available animations: rotation, slideDown, fade, slideLeft, rotate, fly,</p>
<pre><code class="language-js">$(<span class="hljs-string">"#selectMenu"</span>).bootmenu({ listAnimation : <span class="hljs-string">"rotation"</span> });
</code></pre>
<h4><a id="animationDuration_82"></a><code>animationDuration</code></h4>
<p>Duration of the animation when clicking the menu. (default: <code>500ms</code>)</p>
<pre><code class="language-js">$(<span class="hljs-string">"#selectMenu"</span>).bootmenu({ listAnimation : <span class="hljs-string">"fly"</span>, animationDuration: <span class="hljs-number">1000</span> });
</code></pre>
<h2><a id="Callback_89"></a>Callback</h2>
<pre><code class="language-js">$(<span class="hljs-string">"#selectMenu"</span>).bootmenu({
callback: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">selectedValue</span>)
</span>{
<span class="hljs-comment">// do something</span>
}
});
</code></pre>
<h2><a id="Thanks_100"></a>Thanks</h2>
<p><strong>Bootmenu</strong> © 2016-2017.</p>
<blockquote>
<p>GitHub <a href="https://github.com/mariomed7at">@mariomed7at</a> · <br> Facebook <a href="https://www.facebook.com/mario.medhat1">Mario Medhat</a></p>
</blockquote>
</div>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootmenu.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>