Jquery toolbar and floating toolbar specific implementation code
- 2020-03-30 01:20:05
- OfStack
Jquery toolbar and floating toolbar jquery implementation methods
/ *
Basic StructureWe'll update the HTML code for the index. PHP tutorial and the CSS code for the syndication of news style. CSS tutorial.
We created a fixed panel (ID for the toolbar group) with two floating aspects, and we will in the second step with their ICONS and prompt bubbles (left), a quick menu and "hide button list" (added to the hide toolbar).
We can also expect a "show button" that is useful when the panel is hidden and we want to reactivate it. For this reason, we add the id toolbarbut div tag.
HTML and CSS code
Here, the basic structure of the web page.
The HTML code
CSS code
Show/hide button now, we can add the "show button" code.
The following properties are relative to the CSS class.
We finished later on the right, but now we can add the "hide button" in the ID for the rightside partition, as shown.
CSS
Show/hide effects with jQuery first we need to download jQuery (copy the correct folder) and activate the header index.php tag.
We want to hide the "hide button" on the panel, when clicking the toolbar, there should be an invisible "show button" to enable us to recover the panel. We can use the following jQuery solution (< Body> Code added after the tag).
Now we can hide and show the bar
Left side of HTML and CSS code
Update the index with the following XHTML code. We add a normal unordered list (ID for society) to create the order of ICONS, and a general table within the DIV tag (and the corner of the class) to implement the nesting of tags in the tooltip bubble.
/ *
Basic StructureWe'll update the HTML code for the index. PHP tutorial and the CSS code for the syndication of news style. CSS tutorial.
We created a fixed panel (ID for the toolbar group) with two floating aspects, and we will in the second step with their ICONS and prompt bubbles (left), a quick menu and "hide button list" (added to the hide toolbar).
We can also expect a "show button" that is useful when the panel is hidden and we want to reactivate it. For this reason, we add the id toolbarbut div tag.
HTML and CSS code
Here, the basic structure of the web page.
The HTML code
<div id= " toolbarbut " >
<! � hide button � >
</div>
<div id= " toolbar " > <! � toolbar container � >
<div class= " leftside " >
<! � all icons in floating left side � >
</div>
<div class= " rightside " > <! � all things in floating right side � >
<! � hide button � >
<! � quick menu list � >
</div>
</div>
CSS code
div#toolbar, div#toolbarbut {
position: fixed;
bottom: 0px;
right: 0px;
z-index: 9999;
height: 36px;
background: url(images/bcktool.png);
-moz-border-radius-topleft: 8px;
-khtml-border-radius-topleft: 8px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topright: 8px;
-khtml-border-radius-topright: 8px;
-webkit-border-top-right-radius: 8px;
-moz-box-shadow: 0px 1px 10px #666, inset 1px 1px 0px #a4a4a4;
-khtml-box-shadow: 0px 1px 10px #666;
-webkit-box-shadow: 0px 1px 10px #666;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
}
div#toolbar {
width: 85%;
min-width: 700px;
margin: 0px auto;
left: 0px;
}
div#toolbar a:hover {
border: none;
}
div#toolbarbut {
width: 60px;
height: 15px;
margin-right: 3%;
display: none;
}
.leftside {
float: left;
}
.rightside {
float: right;
}
Show/hide button now, we can add the "show button" code.
<div id= " toolbarbut " > <! � hide button � >
<span class= " showbar " ><a href= " # " >show bar</a></span>
</div>
The following properties are relative to the CSS class.
span.showbar a {
padding: 5px;
font-size: 10px;
color: #989898;
}
We finished later on the right, but now we can add the "hide button" in the ID for the rightside partition, as shown.
<div class= " rightside " >
<span class= " downarr " > <! � hide button � >
<a href= " # " ></a>
</span>
<! � other stuff in floating right side � >
</div>
CSS
span.downarr {
float: right;
border-left: 1px solid #a4a4a4;
}
span.downarr a {
display: block;
width: 36px;
height: 26px;
padding: 25px 0 0 10px;
background: url(images/downarrow.png) no-repeat 5px 7px;
}
Show/hide effects with jQuery first we need to download jQuery (copy the correct folder) and activate the header index.php tag.
<head>
<! � ... � >
<script type= " text/javascript The tutorial" src= " js/jquery-1.3.2.min.js " ></script>
</head>
We want to hide the "hide button" on the panel, when clicking the toolbar, there should be an invisible "show button" to enable us to recover the panel. We can use the following jQuery solution (< Body> Code added after the tag).
<script type= " text/javascript " >
$(document).ready(function(){
//hide toolbar and make visible the ' show' button
$( " span.downarr a " ).click(function() {
$( " #toolbar " ).slideToggle( " fast " );
$( " #toolbarbut " ).fadeIn( " slow " );
});
//show toolbar and hide the ' show' button
$( " span.showbar a " ).click(function() {
$( " #toolbar " ).slideToggle( " fast " );
$( " #toolbarbut " ).fadeOut();
});
});
</script>
Now we can hide and show the bar
Left side of HTML and CSS code
Update the index with the following XHTML code. We add a normal unordered list (ID for society) to create the order of ICONS, and a general table within the DIV tag (and the corner of the class) to implement the nesting of tags in the tooltip bubble.
html
<div class= " leftside " > <! � all things in floating left side � >
<ul id= " social " >
<li><a class= " rss " href= " # " ></a><! � icon � >
<div id= " tiprss " class= " tip " ><! � tooltip � >
<ul>
<li><a href= " # " >580 Readers</a></li>
<li><a href= " # " ><small>[Subscribe]</small></a></li>
</ul>
</div>
</li>
<li><a class= " facebook " href= " # " ></a>
<div id= " tipfacebook " class= " tip " >
<ul>
<li><a href= " # " >Share Page</a></li>
<li><a href= " # " >| Profile</a></li>
</ul>
</div>
</li>
<li><a class= " twitter " href= " # " ></a>
<div id= " tiptwitter " class= " tip " >
<ul>
<li><a href= " # " >ReTweet</a></li>
<li><a href= " # " >| Profile</a></li>
</ul>
</div>
</li>
<li><a class= " delicious " href= " # " ></a>
<div id= " tipdelicious " class= " tip " >
<ul>
<li><a href= " # " >Bookmark</a></li>
<li><a href= " # " >| Profile</a></li>
</ul>
</div>
</li>
<li><a class= " digg " href= " # " ></a>
<div id= " tipdigg " class= " tip " >
<ul>
<li><a href= " # " >Digg</a></li>
<li><a href= " # " >| Profile</a></li>
</ul>
</div>
</li>
<li><a class= " stumble " href= " # " ></a>
<div id= " tips The tutorial tumble " class= " tip " >
<ul>
<li><a href= " # " >Stumble</a></li>
<li><a href= " # " >| Profile</a></li>
</ul>
</div>
</li>
</ul>
</div>
css code
* � Left Side � */
ul#social li {
display: inline;
}
a.rss {
display: inline-block;
width: 104px;
height: 35px;
margin-left: 5px;
background: url(images/rss.png) no-repeat;
}
a.facebook, a.twitter, a.digg, a.delicious, a.stumble {
display: inline-block;
width: 40px;
height: 35px;
margin-top: 1px;
}
a.rss:hover, a.facebook:hover, a.twitter:hover, a.digg:hover, a.delicious:hover, a.stumble:hover {
background-position: 1px 1px;
}
a.facebook {
background: url(images/facebook.png) no-repeat;
}
a.twitter {
background: url(images/twitter.png) no-repeat;
}
a.delicious {
background: url(images/delicious.png) no-repeat;
}
a.digg {
background: url(images/digg.png) no-repeat;
}
a.stumble {
background: url(images/stumble.png) no-repeat;
}
.tip {
position: absolute;
top: -75px;
width: 250px;
height: 78px;
background: url(images/tip.png) no-repeat;
float: left;
display: none;
}
#tipfacebook {
left: 75px;
}
#tiptwitter {
left: 120px;
}
#tipdelicious {
left: 165px;
}
#tipdigg {
left: 210px;
}
#tipstumble {
left: 255px;
}
.tip ul {
padding: 22px 0 0 25px;
}
.tip ul li {
display: inline;
padding-left: 3px;
}
.tip ul li a {
font-size: 18px;
color: #989898;
}
.tip ul li a:hover {
color: #666;
}
.tip ul li small {
font-size: 10px;
}
jquery code
//show tooltip when the mouse is moved over a list element
$( " ul#social li " ).hover(function() {
$(this).find( " div " ).fadeIn( " fast " ).show(); //add ' show() " for IE
$(this).mouseleave(function () { //hide tooltip when the mouse moves off of the element
$(this).find( " div " ).hide();
});
});
OK All right, ours jquery implementation toolbar Float toolbar with web page jQuery That's the end of the implementation.
?>