From bd2ed08c5621535878f97475f86f19839779b596 Mon Sep 17 00:00:00 2001 From: Chakib Benziane Date: Thu, 29 Mar 2012 15:07:37 +0200 Subject: [PATCH] updated doc --- example.html | 43 ----- example/css/bootstrap-magic-button.css | 21 +++ example/example.css | 4 +- example/img/msg.png | Bin 0 -> 812 bytes example/img/pin-off.png | Bin 0 -> 887 bytes example/img/pin-on.png | Bin 0 -> 760 bytes example/index.html | 104 +++++++++++-- example/js/bootstrap-magic-button.js | 208 +++++++++++++++++++++++++ example/js/jquery.hoverIntent.js | 106 +++++++++++++ 9 files changed, 430 insertions(+), 56 deletions(-) delete mode 100644 example.html create mode 100644 example/css/bootstrap-magic-button.css create mode 100644 example/img/msg.png create mode 100644 example/img/pin-off.png create mode 100644 example/img/pin-on.png create mode 100644 example/js/bootstrap-magic-button.js create mode 100644 example/js/jquery.hoverIntent.js diff --git a/example.html b/example.html deleted file mode 100644 index f8445a3..0000000 --- a/example.html +++ /dev/null @@ -1,43 +0,0 @@ - - - - - - - - -
-

test adsgdsgds

-
- -
- - - - - - - - - - - - \ No newline at end of file diff --git a/example/css/bootstrap-magic-button.css b/example/css/bootstrap-magic-button.css new file mode 100644 index 0000000..84edbf3 --- /dev/null +++ b/example/css/bootstrap-magic-button.css @@ -0,0 +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; +} + +button[class*="magicBtn-active"] { + position: absolute; + border-style: none; + background: none; + background-repeat: no-repeat; + width: 47px; + height: 32px; + opacity: 1; +} + diff --git a/example/example.css b/example/example.css index a7abbcc..f55f6a4 100644 --- a/example/example.css +++ b/example/example.css @@ -2,8 +2,8 @@ button[class^="magicBtn hero"] { margin-top: 80px; } -footer .footer { - style="margin-top: 45; +.footer { + margin-top: 45px; padding:35px 0 36px; border-top: 1px solid #E5E5E5; } \ No newline at end of file diff --git a/example/img/msg.png b/example/img/msg.png new file mode 100644 index 0000000000000000000000000000000000000000..947eeb862a7c94fae8a0172b2e1d9e7ed4bc4729 GIT binary patch literal 812 zcmV+{1JnG8P)Px#1ZP1_K>z@;j|==^1poj532;bRa{vGf5dZ)S5dnW>Uy%R+0>Mc{K~zXfwN_0_ zYEcwjS4%C(Z-D13>HGoanguf&je-c7uB@!U z;c)1h&1O^e@eyg+Mn1EkEh{&~p9>3UwOZKR+(f_MMyu7!MB*;yM@%;P?BH z$z%k%Mx%jxy)MYr9(?k=vcuSI(pgRy2!t*WdE|DZ{M(Rq1!8HCFC7soH@tZ-$dR-$I;ZdNZHOkH_PGfeA*Fi-2DNogKY;B<*%P zc6N5Ad#qI<%gu54RiocLRkIpXZ>M<<|GUpBaO!c=i4OreIDXIP)Px#1ZP1_K>z@;j|==^1poj532;bRa{vGf5dZ)S5dnW>Uy%R+0}M$-K~zXftyVio zD^V1j)%ZmPKOnIaETV$88WfupVk`L&vC|?pK}!v(ZEQvDMTi!*RvNWa5R)p6Hi4iJ z{3mJ>*UW*Nx7j4V#P=4KZ0_zobLPyPv#X7dkL$=Ex~`+GtqpZ`b#nciL(??bX5P>L z9UUF$>+8e9!U9G|N1;U`5kbjjvltv4L}O!P&A#e?5{U#hH#adi zHwW$P?5qGhFff3IhK8Dfx#!~I0tW{NSXx>F-#$2auB6v6) zhR5SUPfw5ZXtl;HDfLeq**f_tCoJuDy8sdV=;%nwU2R8@eF2%6ES=JJ~+_Q9ZGMPkIR~NLat1Df-MO4G9F=|}@ z%@>Jz52xAQ-X5l>r=g9Fjp;NLGgO~0{{zGvgQVKq+p)a7jG37kd;`<{>i}rs;2Zz| N002ovPDHLkV1jr~pZWj* literal 0 HcmV?d00001 diff --git a/example/img/pin-on.png b/example/img/pin-on.png new file mode 100644 index 0000000000000000000000000000000000000000..12fd79aa9316c43df10dd7bb63f5bc834efa85e1 GIT binary patch literal 760 zcmVPx#1ZP1_K>z@;j|==^1poj532;bRa{vGi!~g&e!~vBn4jTXf0*y&TK~zXftyRrR zs!##8+?-(IYsK#Ag0gYG&b2S+})g zi;7*i7Y`iH$2n*3wbx$z?9YhBVqf0_2L}hR*=*qVKE~(gr}ztnLP)36h{xkFTCJ9V zot&J&YPIeIXTwLk-A1`wMl>3QadUGcV8LJzZnqoD<#Mlp%os`J^LdyI!vH4-LI0LU zJ^zl}ZKI*VpLvdg%B2xVX4L zGMPlRT7}c;T&0u17Nw}-Pp4CHNNaBOJCO^W;Y_=u;cCz-?HP}p##=*pTP)W>462p}iznFZZbJ#}3%Qy@lu zc6PRU4$9o`_e-kCfYa;s%0nd!>c)5K^Z8IJm88s7cdc*+xdFz5U2lkcudlC?O6@Y4 zOa{lt#}X7BGb0R`!8RHVBoYZcKR<6&tZ{pLD;cYI&!nt|Jf%aYRCR)+~42J4@^_C&z4UOsomAp6;4l2 qVesdv4|tzIN`S?b&1R9y - + @@ -42,6 +42,8 @@ @@ -88,7 +90,7 @@

This is the most basic magic button, the default behavior is to stick on the right side of div which is containing magic buttons

- @@ -98,7 +100,7 @@


- 
<div class="well span3">
  <p>This is the most basic magic button, ...</p>

  <button class="magicBtn" data-image="../img/msg.png"/>
</div>
+ 
<div class="well span3">
  <p>This is the most basic magic button, ...</p>

  <button class="magicBtn" data-image="img/msg.png"/>
</div>
@@ -112,7 +114,7 @@

Add a toggle effect using the data-toggle="magicBtn"

-
@@ -120,7 +122,7 @@


- 
<button class="magicBtn" data-image="../img/msg.png" data-toggle="magicBtn"/>
+ 
<button class="magicBtn" data-image="img/msg.png" data-toggle="magicBtn"/>
@@ -132,7 +134,7 @@

Usedata-toggle-image to customize toggle image

-
@@ -140,7 +142,7 @@


- 
<button class="magicBtn" data-image="../img/pin-off.png" data-toggle="magicBtn" data-toggle-image="../img/pin-on.png"/>
+ 
<button class="magicBtn" data-image="img/pin-off.png" data-toggle="magicBtn" data-toggle-image="img/pin-on.png"/>
@@ -154,7 +156,7 @@

You can enable a hover effect over your buttons

jquery.hoverIntent is used in replacement of jQuery builtin hover

-
@@ -162,12 +164,89 @@


- 
<button class="magicBtn hover" data-image="../img/pin-off.png" data-toggle="magicBtn" data-toggle-image="../img/pin-on.png"/>
+ 
<button class="magicBtn hover" data-image="img/pin-off.png" data-toggle="magicBtn" data-toggle-image="img/pin-on.png"/>
$('.hover').magicBtn({hover: true});
$('.hover').magicBtn('show');
+
+
+ +

How about bootstrap icons ?

+ +
+
+
+

Just put the icons inside the button

+ + +
+ +
+
+
+
+ 
<button class="magicBtn icon"><i class="icon-search"></i></button>
<button class="magicBtn icon"><i class="icon-user"></i></button>
+ 
$('.icon').magicBtn({hover: true, alignement: 'top'});
$('.icon').magicBtn('show');
+
+
+ +
+
+
+

Methods

+

$().magicBtn('show')

+

Shows the buttons found by selector

+
+
+

$().magicBtn('hide')

+

Hides the buttons found by selector

+
+
+

$().magicBtn('toggle')

+

Activates toggle state

+
+

You can enable auto toggling of a button by using data-toggle attribute

+
+
+
+

Options

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nametypedefaultdescription
alignementstringcenterstart showing buttons from center, 1 in middle, even on ones top and odd ones on bottom
betweenSpaceinteger2space between buttons
hoverbooleanfalseEnables hover effect
+
+
+ +