jquery toolbar与网页浮动工具条具体实现代码

jquery 实现toolbar与网页浮动工具条jQuery实现方法
/*
基本StructureWe'll更新index.php教程的HTML代码和对新闻联播style.css教程中的CSS代码。

我们建立了一个固定的面板(ID为工具栏组)两个浮动方面,我们将在第二个步骤与他们的图标和提示气泡(左),一个快速菜单和“隐藏按钮列表”(添加到隐藏工具栏)。
我们还可以期待一个“显示按钮”,它是有用的,当面板隐藏,我们要重新激活它。基于这个原因,我们添加id为toolbarbut div标签。

HTML和CSS代码
在这里,网页的基本结构。

html 代码

复制代码 代码如下:


<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代码

复制代码 代码如下:


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 a 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;
}


显示/隐藏按钮现在,我们可以添加“显示按钮”的代码。

复制代码 代码如下:


<div id=”toolbarbut”> <!– hide button –>
<span class=”showbar”><a href=”#”>show bar</a></span>
</div>


下面的属性相对CSS类。

复制代码 代码如下:


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


我们完成了后来的右侧,但现在我们可以添加“隐藏按钮”在ID为rightside分区,如图所示。

复制代码 代码如下:


<div class=”rightside”>
<span class=”downarr”> <!– hide button –>
<a href=”#”></a>
</span>

<!– other stuff in floating right side –>

</div>


css

复制代码 代码如下:


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;
}


显示/隐藏效果与jQuery首先我们需要下载的jQuery(复制正确的文件夹中),并激活头index.php的标记。

复制代码 代码如下:


<head>
<!– … –>
<script type=”text/javascript教程” src=https://www.jb51.net/”js/jquery-1.3.2.min.js”></script>
</head>


我们要隐藏面板上“隐藏按钮”,点击工具栏时,应当有不可见的“显示按钮”,使我们能够恢复的面板。我们可以使用下面的jQuery的解决方案(<body>标记后添加的代码)。

复制代码 代码如下:


<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>


现在我们可以隐藏和显示的bar

HTML和CSS代码的左侧
更新索引用下面的XHTML代码。我们添加一个普通无序列表(ID为社会)来创建的图标顺序,一个DIV标签(与类一角)范围内的总表,以实现工具提示气泡里的标签嵌套。

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdwydx.html