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


Posted in Javascript onJanuary 12, 2014

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=”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标签(与类一角)范围内的总表,以实现工具提示气泡里的标签嵌套。

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教程tumble” class=”tip”> 
<ul> 
<li><a href=”#”>Stumble</a></li> 
<li><a href=”#”>| Profile</a></li> 
</ul> 
</div> 
</li> 
</ul> 
</div> 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实现方法就讲完了。 
?>
Javascript 相关文章推荐
jQuery dialog 异步调用ashx,webservice数据的代码
Aug 03 Javascript
解析John Resig Simple JavaScript Inheritance代码
Dec 03 Javascript
类似天猫商品详情随浏览器移动的示例代码
Feb 27 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
jquery移动端TAB触屏切换实现效果
Dec 22 Javascript
Javascript 两种刷新方法以及区别和适用范围
Jan 17 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 Javascript
js基础之事件捕获与冒泡原理
Oct 09 Javascript
koa-passport实现本地验证的方法示例
Feb 20 Javascript
vue学习笔记之slot插槽用法实例分析
Feb 29 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
Jul 17 Javascript
JS如何使用剪贴板操作Clipboard API
May 17 Javascript
jQuery在iframe中无法弹出对话框的解决方法
Jan 12 #Javascript
js弹窗返回值详解(window.open方式)
Jan 11 #Javascript
JS中表单的使用小结
Jan 11 #Javascript
js opener的使用详解
Jan 11 #Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 #Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
Jan 11 #Javascript
js获取下拉列表框中的value和text的值示例代码
Jan 11 #Javascript
You might like
PHP 简单数组排序实现代码
2009/08/05 PHP
微信扫描二维码登录网站代码示例
2013/12/30 PHP
php中smarty区域循环的方法
2015/06/11 PHP
老生常谈PHP面向对象之注册表模式
2017/05/26 PHP
什么是PHP文件?如何打开PHP文件?
2017/06/27 PHP
use jscript List Installed Software
2007/06/11 Javascript
jQuery MD5加密实现代码
2010/03/15 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
Node 自动化部署的方法
2017/10/17 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
详解Python的Django框架中的通用视图
2015/05/04 Python
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
pandas 根据列的值选取所有行的示例
2018/11/07 Python
解决python测试opencv时imread导致的错误问题
2019/01/26 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
tensorflow入门:tfrecord 和tf.data.TFRecordDataset的使用
2020/01/20 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
英国和国际包裹递送:ParcelCompare
2019/08/26 全球购物
Java基础知识面试要点
2016/07/29 面试题
行政总监岗位职责
2013/12/05 职场文书
酒店副总岗位职责
2013/12/24 职场文书
葬礼司仪主持词
2014/03/31 职场文书
《故都的秋》教学反思
2014/04/15 职场文书
企业文化标语口号
2014/06/09 职场文书
学位证书委托书
2014/09/30 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书
SQL Server中T-SQL标识符介绍与无排序生成序号的方法
2022/05/25 SQL Server
在python中读取和写入CSV文件详情
2022/06/28 Python