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

fix hover text in toggle mode

Browse Source
master
Chakib (spike) Benziane 12 years ago
parent fc9d3aad2b
commit a5b7148098
4 changed files with 57 additions and 30 deletions
Show Stats Download Patch File Download Diff File

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

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

4
example/index.html
Unescape Escape View File

@ -179,8 +179,8 @@
<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 value="search" class="magicBtn icon"><i class="icon-search"></i></button> <button value=" pin" class="magicBtn icon" data-toggle-text=" unpin" data-toggle="magicBtn"><i class="icon-search"></i></button>
<button value="user" class="magicBtn icon"><i class="icon-user"></i></button> <button value=" user" class="magicBtn icon"><i class="icon-user"></i></button>
</div> </div>
</div> </div>

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

@ -50,7 +50,11 @@ function ($) {
this.$width = this.$element.outerWidth() this.$width = this.$element.outerWidth()
// current button image and toggle image if there is // current button image and toggle image if there is
this.$imgUrl = 'url("' + this.$element.data('image') + '")' var imgUrl = this.$element.data('image')
if (typeof(imgUrl) !== 'undefined')
this.$imgUrl = 'url("' + this.$element.data('image') + '")'
else
this.$imgUrl = false
var toggleimg var toggleimg
if (toggleimg = this.$element.data('toggle-image')) if (toggleimg = this.$element.data('toggle-image'))
this.$toggleImgUrl = 'url("' + toggleimg + '")' this.$toggleImgUrl = 'url("' + toggleimg + '")'
@ -159,13 +163,21 @@ function ($) {
toggle: function () { toggle: function () {
var $el = this.$element var $el = this.$element
if (!this.$isToggled) { if (!this.$isToggled) {
$el.css('background-image', this.$toggleImgUrl) if (this.$imgUrl)
$el.css('background-image', this.$toggleImgUrl)
this.$isToggled = true this.$isToggled = true
$el.addClass('magicBtn-active') $el.addClass('magicBtn-active')
$el.css('padding-left', function(index,value){
return (parseInt(value) + 4) + 'px';
});
} else { } else {
$el.css('background-image', this.$imgUrl) if (this.$imgUrl)
$el.css('background-image', this.$imgUrl)
this.$isToggled = false this.$isToggled = false
$el.removeClass('magicBtn-active') $el.removeClass('magicBtn-active')
$el.css('padding-left', function(index,value){
return (parseInt(value) - 4) + 'px';
});
} }
} }
@ -174,14 +186,18 @@ function ($) {
_hoverInCallback: function () { _hoverInCallback: function () {
var obj = $(this).data('magicBtn') var obj = $(this).data('magicBtn')
var o = obj.options var o = obj.options
var hoverText = $(this).attr('value')
var tmpHoverText;
if (obj.$isToggled){
tmpHoverText = $(this).data('toggle-text')
if (typeof(tmpHoverText) !== 'undefined')
hoverText = tmpHoverText
}
if (!obj.$isToggled) { 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') $(this).toggleClass('magicBtn-active')
} }
$('<span class="value">' + hoverText + '</span>').
hide().appendTo($(this)).fadeIn()
} }
, ,
@ -190,12 +206,9 @@ function ($) {
var o = obj.options var o = obj.options
var $el = $(this) var $el = $(this)
if ((!obj.$isToggled) && (!$el.is(':hover')) && ($el.hasClass('magicBtn-active'))){ 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) $(this).toggleClass('magicBtn-active', 100)
} }
$(this).find('.value').fadeOut('slow').remove()
} }
, ,
@ -229,7 +242,7 @@ function ($) {
if (option == 'fadeIn') data.fadeIn() if (option == 'fadeIn') data.fadeIn()
if (option == 'fadeOut') data.fadeOut() if (option == 'fadeOut') data.fadeOut()
if (option == 'hide') data.hide() if (option == 'hide') data.hide()
else if (option) data.setState(option) //else if (option) data.setState(option)
}) })
} }

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

@ -50,7 +50,11 @@ function ($) {
this.$width = this.$element.outerWidth() this.$width = this.$element.outerWidth()
// current button image and toggle image if there is // current button image and toggle image if there is
this.$imgUrl = 'url("' + this.$element.data('image') + '")' var imgUrl = this.$element.data('image')
if (typeof(imgUrl) !== 'undefined')
this.$imgUrl = 'url("' + this.$element.data('image') + '")'
else
this.$imgUrl = false
var toggleimg var toggleimg
if (toggleimg = this.$element.data('toggle-image')) if (toggleimg = this.$element.data('toggle-image'))
this.$toggleImgUrl = 'url("' + toggleimg + '")' this.$toggleImgUrl = 'url("' + toggleimg + '")'
@ -159,13 +163,21 @@ function ($) {
toggle: function () { toggle: function () {
var $el = this.$element var $el = this.$element
if (!this.$isToggled) { if (!this.$isToggled) {
$el.css('background-image', this.$toggleImgUrl) if (this.$imgUrl)
$el.css('background-image', this.$toggleImgUrl)
this.$isToggled = true this.$isToggled = true
$el.addClass('magicBtn-active') $el.addClass('magicBtn-active')
$el.css('padding-left', function(index,value){
return (parseInt(value) + 4) + 'px';
});
} else { } else {
$el.css('background-image', this.$imgUrl) if (this.$imgUrl)
$el.css('background-image', this.$imgUrl)
this.$isToggled = false this.$isToggled = false
$el.removeClass('magicBtn-active') $el.removeClass('magicBtn-active')
$el.css('padding-left', function(index,value){
return (parseInt(value) - 4) + 'px';
});
} }
} }
@ -174,14 +186,18 @@ function ($) {
_hoverInCallback: function () { _hoverInCallback: function () {
var obj = $(this).data('magicBtn') var obj = $(this).data('magicBtn')
var o = obj.options var o = obj.options
var hoverText = $(this).attr('value')
var tmpHoverText;
if (obj.$isToggled){
tmpHoverText = $(this).data('toggle-text')
if (typeof(tmpHoverText) !== 'undefined')
hoverText = tmpHoverText
}
if (!obj.$isToggled) { 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') $(this).toggleClass('magicBtn-active')
} }
$('<span class="value">' + hoverText + '</span>').
hide().appendTo($(this)).fadeIn()
} }
, ,
@ -190,12 +206,9 @@ function ($) {
var o = obj.options var o = obj.options
var $el = $(this) var $el = $(this)
if ((!obj.$isToggled) && (!$el.is(':hover')) && ($el.hasClass('magicBtn-active'))){ 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) $(this).toggleClass('magicBtn-active', 100)
} }
$(this).find('.value').fadeOut('slow').remove()
} }
, ,
@ -229,7 +242,7 @@ function ($) {
if (option == 'fadeIn') data.fadeIn() if (option == 'fadeIn') data.fadeIn()
if (option == 'fadeOut') data.fadeOut() if (option == 'fadeOut') data.fadeOut()
if (option == 'hide') data.hide() if (option == 'hide') data.hide()
else if (option) data.setState(option) //else if (option) data.setState(option)
}) })
} }

Write Preview
Loading…
Cancel
Save