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

New hover feature to show text when hovering

Browse Source
master
Chakib (spike) Benziane 12 years ago
parent 83b00ca6d0
commit ee232b3a7e
5 changed files with 124 additions and 73 deletions
Show Stats Download Patch File Download Diff File

30
css/bootstrap-magic-button.css vendored
Unescape Escape View File

@ -1,21 +1,21 @@
button[class^=magicBtn] {
display: none;
position: absolute;
border-style: none;
background: none;
background-repeat: no-repeat;
width: 47px;
height: 32px;
opacity: 0.7;
display: none;
position: absolute;
border-style: none;
background: none;
background-repeat: no-repeat;
width: 47px;
height: 32px;
opacity: 0.7;
}
button[class*="magicBtn-active"] {
position: absolute;
border-style: none;
background: none;
background-repeat: no-repeat;
width: 47px;
height: 32px;
opacity: 1;
position: absolute;
border-style: none;
background: none;
background-repeat: no-repeat;
width: 47px;
height: 32px;
opacity: 1;
}

31
example/css/bootstrap-magic-button.css vendored
Unescape Escape View File

@ -1,21 +1,22 @@
button[class^=magicBtn] {
display: none;
position: absolute;
border-style: none;
background: none;
background-repeat: no-repeat;
width: 47px;
height: 32px;
opacity: 0.7;
display: none;
position: absolute;
border-style: none;
background: none;
background-repeat: no-repeat;
width: 47px;
height: 32px;
opacity: 0.7;
}
button[class*="magicBtn-active"] {
position: absolute;
border-style: none;
background: none;
background-repeat: no-repeat;
width: 47px;
height: 32px;
opacity: 1;
font-weight: bold;
position: absolute;
border-style: none;
background: none;
background-repeat: no-repeat;
width: 47px;
height: 32px;
opacity: 1;
}

6
example/index.html
Unescape Escape View File

@ -56,7 +56,7 @@
<br />
<p> It's a plugin that make it possible for any button to float on it's parent div
</p>
<button class="magicBtn hero"><a href="#example"><i class="icon-chevron-down"></i></a></button>
<button value="test" 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>
</div>
@ -179,8 +179,8 @@
<br />
<div class="well span3">
<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-user"></i></button>
<button value="search" class="magicBtn icon"><i class="icon-search"></i></button>
<button value="user" class="magicBtn icon"><i class="icon-user"></i></button>
</div>
</div>

65
example/js/bootstrap-magic-button.js vendored
Unescape Escape View File

@ -52,18 +52,19 @@ function ($) {
// current button image and toggle image if there is
this.$imgUrl = 'url("' + this.$element.data('image') + '")'
var toggleimg
if (toggleimg = this.$element.data('toggle-image')) this.$toggleImgUrl = 'url("' + toggleimg + '")'
else this.$toggleImgUrl = this.$imgUrl
// store toggle initial status if there is
var togglestatus
if (togglestatus = this.$element.data('initial-toggle-status')){
togglestatus == 'toggled' ? this.toggle() : this.$isToggled = false
}
else this.$isToggled = false
if (this.options.hover) this.addHover()
}
if (toggleimg = this.$element.data('toggle-image'))
this.$toggleImgUrl = 'url("' + toggleimg + '")'
else
this.$toggleImgUrl = this.$imgUrl
// store toggle initial status if there is
var togglestatus
if (togglestatus = this.$element.data('initial-toggle-status')){
togglestatus == 'toggled' ? this.toggle() : this.$isToggled = false
}
else this.$isToggled = false
if (this.options.hover) this.addHover()
}
MagicBtn.prototype = {
@ -170,18 +171,41 @@ function ($) {
}
,
_hoverInCallback: function () {
var obj = $(this).data('magicBtn')
var o = obj.options
if (!obj.$isToggled) {
if (o.hoverText){
$(this).find('i').hide()
$('<span class="value">' + $(this).attr('value') + '</span>').
hide().appendTo($(this)).fadeIn()
}
$(this).toggleClass('magicBtn-active')
}
}
,
_hoverOutCallback: function () {
var obj = $(this).data('magicBtn')
var o = obj.options
var $el = $(this)
if ((!obj.$isToggled) && (!$el.is(':hover')) && ($el.hasClass('magicBtn-active'))){
if (o.hoverText){
$(this).find('.value').fadeOut('slow').remove()
$(this).find('i').show(100)
}
$(this).toggleClass('magicBtn-active', 100)
}
}
,
addHover: function () {
var $el = this.$element
var obj = this
var config = {
over: function () {
if (!obj.$isToggled) $(this).toggleClass('magicBtn-active')
},
over: this._hoverInCallback,
timeout: 10,
interval: 10,
out: function () {
if ((!obj.$isToggled) && (!$el.is(':hover')) && ($el.hasClass('magicBtn-active'))) $(this).toggleClass('magicBtn-active', 100)
}
out: this._hoverOutCallback
}
$el.hoverIntent(config)
@ -214,7 +238,8 @@ function ($) {
direction: 'right',
betweenSpace: 2,
alignment: 'center',
hover: false
hover: false,
hoverText: false
}
$.fn.magicBtn.Constructor = MagicBtn

65
js/bootstrap-magic-button.js vendored
Unescape Escape View File

@ -52,18 +52,19 @@ function ($) {
// current button image and toggle image if there is
this.$imgUrl = 'url("' + this.$element.data('image') + '")'
var toggleimg
if (toggleimg = this.$element.data('toggle-image')) this.$toggleImgUrl = 'url("' + toggleimg + '")'
else this.$toggleImgUrl = this.$imgUrl
// store toggle initial status if there is
var togglestatus
if (togglestatus = this.$element.data('initial-toggle-status')){
togglestatus == 'toggled' ? this.toggle() : this.$isToggled = false
}
else this.$isToggled = false
if (this.options.hover) this.addHover()
}
if (toggleimg = this.$element.data('toggle-image'))
this.$toggleImgUrl = 'url("' + toggleimg + '")'
else
this.$toggleImgUrl = this.$imgUrl
// store toggle initial status if there is
var togglestatus
if (togglestatus = this.$element.data('initial-toggle-status')){
togglestatus == 'toggled' ? this.toggle() : this.$isToggled = false
}
else this.$isToggled = false
if (this.options.hover) this.addHover()
}
MagicBtn.prototype = {
@ -170,18 +171,41 @@ function ($) {
}
,
_hoverInCallback: function () {
var obj = $(this).data('magicBtn')
var o = obj.options
if (!obj.$isToggled) {
if (o.hoverText){
$(this).find('i').hide()
$('<span class="value">' + $(this).attr('value') + '</span>').
hide().appendTo($(this)).fadeIn()
}
$(this).toggleClass('magicBtn-active')
}
}
,
_hoverOutCallback: function () {
var obj = $(this).data('magicBtn')
var o = obj.options
var $el = $(this)
if ((!obj.$isToggled) && (!$el.is(':hover')) && ($el.hasClass('magicBtn-active'))){
if (o.hoverText){
$(this).find('.value').fadeOut('slow').remove()
$(this).find('i').show(100)
}
$(this).toggleClass('magicBtn-active', 100)
}
}
,
addHover: function () {
var $el = this.$element
var obj = this
var config = {
over: function () {
if (!obj.$isToggled) $(this).toggleClass('magicBtn-active')
},
over: this._hoverInCallback,
timeout: 10,
interval: 10,
out: function () {
if ((!obj.$isToggled) && (!$el.is(':hover')) && ($el.hasClass('magicBtn-active'))) $(this).toggleClass('magicBtn-active', 100)
}
out: this._hoverOutCallback
}
$el.hoverIntent(config)
@ -214,7 +238,8 @@ function ($) {
direction: 'right',
betweenSpace: 2,
alignment: 'center',
hover: false
hover: false,
hoverText: false
}
$.fn.magicBtn.Constructor = MagicBtn

Write Preview
Loading…
Cancel
Save