blob42
/
bootstrap-magic-button
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

updated doc, added scrollspy effect

Browse Source
master
Chakib (spike) Benziane 12 years ago
parent c014273dc3
commit 83b00ca6d0
2 changed files with 412 additions and 251 deletions
Show Stats Download Patch File Download Diff File

151
example/bootstrap/js/bootstrap-scrollspy.js vendored
Unescape Escape View File

@ -0,0 +1,151 @@
/* =============================================================
* bootstrap-scrollspy.js v2.0.3
* http://twitter.github.com/bootstrap/javascript.html#scrollspy
* =============================================================
* Copyright 2012 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ============================================================== */
!function ($) {
"use strict"; // jshint ;_;
/* SCROLLSPY CLASS DEFINITION
* ========================== */
function ScrollSpy( element, options) {
var process = $.proxy(this.process, this)
, $element = $(element).is('body') ? $(window) : $(element)
, href
this.options = $.extend({}, $.fn.scrollspy.defaults, options)
this.$scrollElement = $element.on('scroll.scroll.data-api', process)
this.selector = (this.options.target
|| ((href = $(element).attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
|| '') + ' .nav li > a'
this.$body = $('body')
this.refresh()
this.process()
}
ScrollSpy.prototype = {
constructor: ScrollSpy
, refresh: function () {
var self = this
, $targets
this.offsets = $([])
this.targets = $([])
$targets = this.$body
.find(this.selector)
.map(function () {
var $el = $(this)
, href = $el.data('target') || $el.attr('href')
, $href = /^#\w/.test(href) && $(href)
return ( $href
&& href.length
&& [[ $href.position().top, href ]] ) || null
})
.sort(function (a, b) { return a[0] - b[0] })
.each(function () {
self.offsets.push(this[0])
self.targets.push(this[1])
})
}
, process: function () {
var scrollTop = this.$scrollElement.scrollTop() + this.options.offset
, scrollHeight = this.$scrollElement[0].scrollHeight || this.$body[0].scrollHeight
, maxScroll = scrollHeight - this.$scrollElement.height()
, offsets = this.offsets
, targets = this.targets
, activeTarget = this.activeTarget
, i
if (scrollTop >= maxScroll) {
return activeTarget != (i = targets.last()[0])
&& this.activate ( i )
}
for (i = offsets.length; i--;) {
activeTarget != targets[i]
&& scrollTop >= offsets[i]
&& (!offsets[i + 1] || scrollTop <= offsets[i + 1])
&& this.activate( targets[i] )
}
}
, activate: function (target) {
var active
, selector
this.activeTarget = target
$(this.selector)
.parent('.active')
.removeClass('active')
selector = this.selector
+ '[data-target="' + target + '"],'
+ this.selector + '[href="' + target + '"]'
active = $(selector)
.parent('li')
.addClass('active')
if (active.parent('.dropdown-menu')) {
active = active.closest('li.dropdown').addClass('active')
}
active.trigger('activate')
}
}
/* SCROLLSPY PLUGIN DEFINITION
* =========================== */
$.fn.scrollspy = function ( option ) {
return this.each(function () {
var $this = $(this)
, data = $this.data('scrollspy')
, options = typeof option == 'object' && option
if (!data) $this.data('scrollspy', (data = new ScrollSpy(this, options)))
if (typeof option == 'string') data[option]()
})
}
$.fn.scrollspy.Constructor = ScrollSpy
$.fn.scrollspy.defaults = {
offset: 10
}
/* SCROLLSPY DATA-API
* ================== */
$(function () {
$('[data-spy="scroll"]').each(function () {
var $spy = $(this)
$spy.scrollspy($spy.data())
})
})
}(window.jQuery);

512
example/index.html
Unescape Escape View File

@ -9,9 +9,9 @@
<!-- Le styles --> <!-- Le styles -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet"> <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-magic-button.css" rel="stylesheet"> <link href="css/bootstrap-magic-button.css" rel="stylesheet">
<link href="prettify/prettify.css" type="text/css" rel="stylesheet" /> <link href="prettify/prettify.css" type="text/css" rel="stylesheet" />
<link href="example.css" type="text/css" rel="stylesheet" /> <link href="example.css" type="text/css" rel="stylesheet" />
<style> <style>
body { body {
@ -26,7 +26,7 @@
<![endif]--> <![endif]-->
</head> </head>
<body onload="prettyPrint()"> <body data-spy="scroll" onload="prettyPrint()">
<a href="https://github.com/sp4ke/bootstrap-magic-button"><img style="position: absolute; top: 40px; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a> <a href="https://github.com/sp4ke/bootstrap-magic-button"><img style="position: absolute; top: 40px; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-fixed-top">
@ -42,7 +42,7 @@
<ul class="nav"> <ul class="nav">
<li class="active"><a href="#setup">Setup</a></li> <li class="active"><a href="#setup">Setup</a></li>
<li><a href="#example">Examples</a></li> <li><a href="#example">Examples</a></li>
<li><a href="#methods">Methods</a></li> <li><a href="#methods">Methods</a></li>
</ul> </ul>
</div><!--/.nav-collapse --> </div><!--/.nav-collapse -->
@ -51,249 +51,259 @@
</div> </div>
<div class="container"> <div class="container">
<div class="hero-unit" style="text-align: center; margin-top: 20px"> <div class="hero-unit" style="text-align: center; margin-top: 20px">
<h2>Let your buttons fly </h2> <h2>Let your buttons fly </h2>
<br /> <br />
<p> It's a plugin that make it possible for any button to float on it's parent div <p> It's a plugin that make it possible for any button to float on it's parent div
</p> </p>
<button class="magicBtn hero"><a href="#example"><i class="icon-chevron-down"></i></a></button> <button class="magicBtn hero"><a href="#example"><i class="icon-chevron-down"></i></a></button>
<button class="magicBtn hero"><a href="http://twitter.com/share?url=http://sp4ke.github.com/bootstrap-magic-button/&text=Bootstrap magic buttons @ChakibBenz&count=horiztonal" target="_blank" rel="nofollow"><i class="icon-retweet"></i></a></button> <button class="magicBtn hero"><a href="http://twitter.com/share?url=http://sp4ke.github.com/bootstrap-magic-button/&text=Bootstrap magic buttons @ChakibBenz&count=horiztonal" target="_blank" rel="nofollow"><i class="icon-retweet"></i></a></button>
</div> </div>
<div class="row"> <div class="row">
<div class="span5"> <div class="span5">
<h2 id="setup">Setup</h2> <h2 id="setup">Setup</h2>
<ol> <ol>
<li>Include jQuery and jQueryui</li><br /> <li>Include jQuery and jQueryui</li><br />
<li>Include stylesheet and js files <br/><br/><pre class="prettyprint">&lt;link href=&quot;css/bootstrap-magic-button.css&quot; rel=&quot;stylesheet&quot;&gt;<br/>&lt;script src=&quot;jquery.hoverIntent.js&quot;&gt;&lt;/script&gt;<br/>&lt;script src=&quot;bootstrap-magic-button.js&quot;&gt;&lt;/script&gt;</pre></li> <li>Include stylesheet and js files <br/><br/><pre class="prettyprint">&lt;link href=&quot;css/bootstrap-magic-button.css&quot; rel=&quot;stylesheet&quot;&gt;<br/>&lt;script src=&quot;jquery.hoverIntent.js&quot;&gt;&lt;/script&gt;<br/>&lt;script src=&quot;bootstrap-magic-button.js&quot;&gt;&lt;/script&gt;</pre></li>
<li>Include <code>class="magicBtn"</code> and <code>data-image="path/to/image.png"</code> to your buttons </li><br/> <li>Include <code>class="magicBtn"</code> and <code>data-image="path/to/image.png"</code> to your buttons </li><br/>
<li>Start using : <pre class="prettyprint">$('.magicBtn').magicBtn('show');</pre></li> <li>Start using : <pre class="prettyprint">$('.magicBtn').magicBtn('show');</pre></li>
<div class="alert alert-info"> <div class="alert alert-info">
<p>It is preferable to add your own class to group of magic buttons, use that class to customize groups of magic buttons </p> <p>It is preferable to add your own class to group of magic buttons, use that class to customize groups of magic buttons </p>
<pre class="prettyprint">&lt;button class=&quot;magicBtn myClass&quot; ... /&gt; </pre> <pre class="prettyprint">&lt;button class=&quot;magicBtn myClass&quot; ... /&gt; </pre>
<pre class="prettyprint">$('.myClass').magicBtn('show');</pre> <pre class="prettyprint">$('.myClass').magicBtn('show');</pre>
</div> </div>
</ol> </ol>
<br/> <br/>
<br/> <br/>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="span5"> <div class="span5">
<h2 id="example">Examples:</h2> <h2 id="example">Examples:</h2>
<hr /> <hr />
<h3>Simple button</h3> <h3>Simple button</h3>
<br /> <br />
<div class="well span3"> <div class="well span3">
<p>This is the most basic magic button, the default behavior is to stick on the right side <p>This is the most basic magic button, the default behavior is to stick on the right side
of div which is containing magic buttons of div which is containing magic buttons
</p> </p>
<button class="magicBtn" data-image="img/msg.png"></button> <button class="magicBtn" data-image="img/msg.png"></button>
</div> </div>
</div> </div>
<div class="span7"> <div class="span7">
<h2>Code:</h2> <h2>Code:</h2>
<br /> <br />
<br /> <br />
<br /> <br />
<br /> <br />
<pre class="prettyprint linenums">&lt;div&nbsp;class=&quot;well&nbsp;span3&quot;&gt;<br/>&nbsp;&nbsp;&lt;p&gt;This&nbsp;is&nbsp;the&nbsp;most&nbsp;basic&nbsp;magic&nbsp;button,&nbsp;...&lt;/p&gt;<br/><br/>&nbsp;&nbsp;&lt;button&nbsp;class=&quot;magicBtn&quot;&nbsp;data-image=&quot;img/msg.png&quot;/&gt;<br/>&lt;/div&gt;</pre> <pre class="prettyprint linenums">&lt;div&nbsp;class=&quot;well&nbsp;span3&quot;&gt;<br/>&nbsp;&nbsp;&lt;p&gt;This&nbsp;is&nbsp;the&nbsp;most&nbsp;basic&nbsp;magic&nbsp;button,&nbsp;...&lt;/p&gt;<br/><br/>&nbsp;&nbsp;&lt;button&nbsp;class=&quot;magicBtn&quot;&nbsp;data-image=&quot;img/msg.png&quot;/&gt;<br/>&lt;/div&gt;</pre>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="span5"> <div class="span5">
<h3>Toggle effect</h3> <h3>Toggle effect</h3>
<br /> <br />
<div class="well span3"> <div class="well span3">
<p>Add a toggle effect using the <code>data-toggle="magicBtn"</code></p> <p>Add a toggle effect using the <code>data-toggle="magicBtn"</code></p>
<button class="magicBtn" data-image="img/msg.png" data-toggle="magicBtn"/> <button class="magicBtn" data-image="img/msg.png" data-toggle="magicBtn"></button>
</div> </div>
</div> </div>
<div class="span7"> <div class="span7">
<br /> <br />
<br /> <br />
<br /> <br />
<pre class="prettyprint linenums">&lt;button class=&quot;magicBtn&quot; data-image=&quot;img/msg.png&quot; data-toggle=&quot;magicBtn&quot;/&gt;<br/></pre> <pre class="prettyprint linenums">&lt;button class=&quot;magicBtn&quot; data-image=&quot;img/msg.png&quot; data-toggle=&quot;magicBtn&quot;/&gt;<br/></pre>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="span5"> <div class="span5">
<h3>Toggle image</h3> <h3>Toggle image</h3>
<br /> <br />
<div class="well span3"> <div class="well span3">
<p>Use<code>data-toggle-image</code> to customize toggle image</p> <p>Use<code>data-toggle-image</code> to customize toggle image</p>
<button class="magicBtn" data-image="img/pin-off.png" data-toggle="magicBtn" data-toggle-image="img/pin-on.png"></button> <button class="magicBtn" data-image="img/pin-off.png" data-toggle="magicBtn" data-toggle-image="img/pin-on.png"></button>
</div> </div>
</div> </div>
<div class="span7"> <div class="span7">
<br /> <br />
<br /> <br />
<br /> <br />
<pre class="prettyprint linenums">&lt;button class=&quot;magicBtn&quot; data-image=&quot;img/pin-off.png&quot; data-toggle=&quot;magicBtn&quot; data-toggle-image=&quot;img/pin-on.png&quot;/&gt;</pre> <pre class="prettyprint linenums">&lt;button class=&quot;magicBtn&quot; data-image=&quot;img/pin-off.png&quot; data-toggle=&quot;magicBtn&quot; data-toggle-image=&quot;img/pin-on.png&quot;/&gt;</pre>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="span5"> <div class="span5">
<h3>Hover effect</h3> <h3>Hover effect</h3>
<br /> <br />
<div class="well span3"> <div class="well span3">
<p>You can enable a hover effect over your buttons</p> <p>You can enable a hover effect over your buttons</p>
<p>jquery.hoverIntent is used in replacement of jQuery builtin hover</p> <p>jquery.hoverIntent is used in replacement of jQuery builtin hover</p>
<button class="magicBtn hover" data-image="img/pin-off.png" data-toggle="magicBtn" data-toggle-image="img/pin-on.png"></button> <button class="magicBtn hover" data-image="img/pin-off.png" data-toggle="magicBtn" data-toggle-image="img/pin-on.png"></button>
</div> </div>
</div> </div>
<div class="span7"> <div class="span7">
<br /> <br />
<br /> <br />
<br /> <br />
<pre class="prettyprint linenums">&lt;button class=&quot;magicBtn hover&quot; data-image=&quot;img/pin-off.png&quot; data-toggle=&quot;magicBtn&quot; data-toggle-image=&quot;img/pin-on.png&quot;/&gt;</pre> <pre class="prettyprint linenums">&lt;button class=&quot;magicBtn hover&quot; data-image=&quot;img/pin-off.png&quot; data-toggle=&quot;magicBtn&quot; data-toggle-image=&quot;img/pin-on.png&quot;/&gt;</pre>
<pre class="prettyprint linenums">$('.hover').magicBtn({hover: true});<br/>$('.hover').magicBtn('show');</pre> <pre class="prettyprint linenums">$('.hover').magicBtn({hover: true});<br/>$('.hover').magicBtn('show');</pre>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="span5"> <div class="span5">
<h3>How about bootstrap icons ? </h3> <h3>How about bootstrap icons ? </h3>
<br /> <br />
<br /> <br />
<div class="well span3"> <div class="well span3">
<p>Just put the icons inside the button</p> <p>Just put the icons inside the button</p>
<button class="magicBtn icon"><i class="icon-search"></i></button> <button class="magicBtn icon"><i class="icon-search"></i></button>
<button class="magicBtn icon"><i class="icon-user"></i></button> <button class="magicBtn icon"><i class="icon-user"></i></button>
</div> </div>
</div> </div>
<div class="span7"> <div class="span7">
<br /> <br />
<br /> <br />
<pre class="prettyprint linenums">&lt;button class=&quot;magicBtn icon&quot;&gt;&lt;i class=&quot;icon-search&quot;&gt;&lt;/i&gt;&lt;/button&gt;<br/>&lt;button class=&quot;magicBtn icon&quot;&gt;&lt;i class=&quot;icon-user&quot;&gt;&lt;/i&gt;&lt;/button&gt;<br/></pre> <pre class="prettyprint linenums">&lt;button class=&quot;magicBtn icon&quot;&gt;&lt;i class=&quot;icon-search&quot;&gt;&lt;/i&gt;&lt;/button&gt;<br/>&lt;button class=&quot;magicBtn icon&quot;&gt;&lt;i class=&quot;icon-user&quot;&gt;&lt;/i&gt;&lt;/button&gt;<br/></pre>
<pre class="prettyprint linenums">$('.icon').magicBtn({hover: true, alignment: 'top'});<br/>$('.icon').magicBtn('show');</pre> <pre class="prettyprint linenums">$('.icon').magicBtn({hover: true, alignment: 'top'});<br/>$('.icon').magicBtn('show');</pre>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<br /> <br />
<div class="span10"> <div class="span10">
<h3 id="methods">Methods</h3> <h3 id="methods">Methods</h3>
<h4>$().magicBtn('show')</h4> <h4>$().magicBtn('show')</h4>
<p>Shows the buttons found by selector</p> <p>Shows the buttons found by selector</p>
<br /> <br />
<br /> <br />
<h4>$().magicBtn('hide')</h4> <h4>$().magicBtn('hide')</h4>
<p>Hides the buttons found by selector</p> <p>Hides the buttons found by selector</p>
<br /> <br />
<br /> <br />
<h4>$().magicBtn('toggle')</h4> <h4>$().magicBtn('toggle')</h4>
<p>Activates toggle state</p> <p>Activates toggle state</p>
<div class="alert alert-info"> <div class="alert alert-info">
<p>You can enable auto toggling of a button by using <code>data-toggle</code> attribute</p> <p>You can enable auto toggling of a button by using <code>data-toggle</code> attribute</p>
</div> </div>
<br /> <br />
<br /> <br />
<h3>Options</h3> <h4>$().magicBtn('fadeIn')</h4>
<br /> <p>Shows button with a fade in effect</p>
<table class="table table-bordered table-striped"> <br />
<thead> <br />
<tr> <h4>$().magicBtn('fadeOut')</h4>
<th style="width: 100px;">Name</th> <p>Hides button with a fade in effect</p>
<th style="width: 100px;">type</th> <br />
<th style="width: 50px;">default</th> <br />
<th>description</th> <h3>Options</h3>
</tr> <br />
</thead> <table class="table table-bordered table-striped">
<tr> <thead>
<td>alignment</td> <tr>
<td>string</td> <th style="width: 100px;">Name</th>
<td>center</td> <th style="width: 100px;">type</th>
<td>start showing buttons from center, 1 in middle, even on ones top and odd ones on bottom </td> <th style="width: 50px;">default</th>
</tr> <th>description</th>
<tr> </tr>
<td>betweenSpace</td> </thead>
<td>integer</td> <tr>
<td>2</td> <td>alignment</td>
<td>space between buttons</td> <td>string</td>
</tr> <td>center</td>
<tr> <td>start showing buttons from center, 1 in middle, even on ones top and odd ones on bottom </td>
<td>hover</td> </tr>
<td>boolean</td> <tr>
<td>false</td> <td>betweenSpace</td>
<td>Enables hover effect</td> <td>integer</td>
</tr> <td>2</td>
<tbody> <td>space between buttons</td>
</tbody> </tr>
</table> <tr>
</div> <td>hover</td>
</div> <td>boolean</td>
<td>false</td>
<td>Enables hover effect</td>
</tr>
<tbody>
<footer class="footer"> </tbody>
<p>Built by <a href="https://twitter.com/#!/chakibBenz">@chakibBenz</a></p> </table>
<p>Code licensed under the Apache License v2.0</p> </div>
</footer> <!-- footer --> </div>
</div> <!-- /container -->
<footer class="footer">
<!-- Le javascript <p>Built by <a href="https://twitter.com/#!/chakibBenz">@chakibBenz</a></p>
================================================== --> <p>Code licensed under the Apache License v2.0</p>
<!-- Placed at the end of the document so the pages load faster --> </footer> <!-- footer -->
<script type="text/javascript" src="prettify/prettify.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script> </div> <!-- /container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script>
google.load("jqueryui", "1.8.17"); <!-- Le javascript
</script> ================================================== -->
<script src="js/jquery.hoverIntent.js"></script> <!-- Placed at the end of the document so the pages load faster -->
<script src="js/bootstrap-magic-button.js"></script> <script type="text/javascript" src="prettify/prettify.js"></script>
<script> <script type="text/javascript" src="https://www.google.com/jsapi"></script>
$(function () { <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
$('.hover').magicBtn({hover: true}); <script src="bootstrap/js/bootstrap.min.js"></script>
$('.hover').magicBtn('show'); <script src="bootstrap/js/bootstrap-scrollspy.js"></script>
<script>
$('.icon').magicBtn({hover: true, alignment: 'top'}); google.load("jqueryui", "1.8.17");
$('.icon').magicBtn('show'); </script>
<script src="js/jquery.hoverIntent.js"></script>
$('.well .magicBtn').magicBtn('show'); <script src="js/bootstrap-magic-button.js"></script>
<script>
$(function () {
$('.hero').magicBtn({hover: true, alignment: 'top'}); $('.hover').magicBtn({hover: true});
$('.hero-unit').hoverIntent({ $('.hover').magicBtn('show');
over: function () {
$('.hero').magicBtn('show'); $('.icon').magicBtn({hover: true, alignment: 'top'});
}, $('.icon').magicBtn('show');
timeout: 200,
out: function () { $('.well .magicBtn').magicBtn('show');
$('.hero').magicBtn('hide');
}}
) $('.hero').magicBtn({hover: true, alignment: 'top'});
}); $('.hero-unit').hoverIntent({
</script> over: function () {
$('.hero').magicBtn('show');
},
</body> timeout: 200,
</html> out: function () {
$('.hero').magicBtn('hide');
}}
)
$('.navbar').scrollspy()
});
</script>
</body>
</html>

Write Preview
Loading…
Cancel
Save