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

4
example/index.html
Unescape Escape View File

@ -179,8 +179,8 @@
<br />
<div class="well span3">
<p>Just put the icons inside the button</p>
<button value="search" class="magicBtn icon"><i class="icon-search"></i></button>
<button value="user" class="magicBtn icon"><i class="icon-user"></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>
</div>
</div>

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

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

Write Preview
Loading…
Cancel
Save