Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > body text

Specific implementation code of jquery toolbar and web page floating toolbar_jquery

WBOY
Release： 2016-05-16 17:04:11
Original
1241 people have browsed it

jquery implementation method of toolbar and web page floating toolbar jQuery implementation method
/*
Basic StructureWe'll update the HTML code of the index.php tutorial and the CSS code of the news network style.css tutorial.

We created a fixed panel (with id Toolbar Group) and two floating aspects, which we will add in the second step with their icons and tooltip bubbles (left), a quick menu and the "hide button" List" (add to hidden toolbar).
We can also expect a "show button", which is useful when the panel is hidden and we want to reactivate it. For this reason, we add the div tag with id toolbarbut.

HTML and CSS code
Here, the basic structure of the web page.

html code

Copy code The code is as follows:













< /div>



css code
Copy code The code is as follows:

div#toolbar, div#toolbarbut {
position: fixed; /* set fixed position for the bar */
bottom: 0px;
right: 0px;
z-index: 9999; /* keep the bar on top */
height: 36px;
background: url(images/bcktool.png);
/* CSS3 */
-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; /* inset creates an inner-shadow */
-khtml-box-shadow: 0px 1px 10px #666;
-webkit-box-shadow: 0px 1px 10px # 666;
/* CSS3 end */
border-top: 1px solid #eee;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
}

div#toolbar {
width: 85%;
min-width: 700px; /* to limit the width when there is an excessive window resize */
margin: 0px auto ; /* centered toolbar */
left: 0px;
}

div#toolbar a:hover {
border: none; /* fix 'hover' (a:hover {border -bottom: 1px dotted #666;}) border in the News Aggregator */
}

div#toolbarbut { /* div for the 'hide status' */
width: 60px;
height: 15px;
margin-right: 3%;
display: none;
}

.leftside {
float: left;
}

.rightside {
float: right;
}

Show/hide button Now, we can add the code to "show button".
Copy code The code is as follows:

< !–hide button –>
show bar


The following properties are relative to CSS classes.
Copy code The code is as follows:

span.showbar a { /* show button */
padding: 5px;
font-size: 10px;
color: #989898;
}

We finished the right side later, but now we can add " "Hide Button" is in the rightside partition with ID, as shown in the figure.
Copy code The code is as follows:





css
Copy code The code is as follows:

span.downarr { /* hide button */
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 to the correct folder) and activate the header index.php tag.
Copy code The code is as follows:






We want to hide the "Hide button" on the panel. When clicking on the toolbar, there should be an invisible "Show button" so that we can restore the panel. We can use the following jQuery solution (code added after the tag).
Copy code The code is as follows:



Now we can hide and show the bar

to the left of the HTML and CSS code
update the index with the following XHTML code. We add a plain unordered list (with ID as social) to create the order of the icons, and a DIV tag (with class Dip) within the total list to implement tag nesting within the tooltip bubble.
Copy code The code is as follows:

html




css代码

*– 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; /* simple css hover effect */
}

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; /* important */
top: -75px;
width: 250px;
height: 78px;
background: url(images/tip.png) no-repeat;
float: left;
display: none;
}

/* custom distances for the icons */
#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代码

//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好了，我们的jquery 实现toolbar与网页浮动工具条jQuery实现方法就讲完了。
?>
Related labels：
jquery
source：php.cn
Previous article：Learn detailed explanation and working principle of this example in javaScript_Basic knowledge Next article：A simple example of JS date comparison size_javascript skills
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Submit form without button using Javascript/Jquery I'm trying to submit a form without a button by calling a JavaScript function and executin...
From 2024-04-06 14:54:03
0
2
421
How to retrieve values ​​of unselected rows in HTML data table using jquery I'm trying to get the value of all rows where the button was not clicked. For example, whe...
From 2024-04-05 09:26:49
0
1
1418
Need a jquery script to move selected options from a select box based on the end user's current selection I have an HTML page where the end user can rank our items via a select box element. See th...
From 2024-04-04 18:40:04
0
1
3528
I've created an element in pure CSS via bookmarks. It is created but not visible My code is as follows: g=document.createElement('div');g.setAttribute("id","...
From 2024-04-04 17:27:27
0
1
417
Unable to send form data on Safari/Firefox iOS This works on all platforms except Safari/Firefox on iOS: jQuery("#gform_1").one...
From 2024-04-04 12:53:48
0
1
303
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template