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 相关文章推荐
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
Sep 27 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
Nov 14 Javascript
Jquery颜色选择器ColorPicker实现代码
Nov 14 Javascript
JS正则表达式大全(整理详细且实用)
Nov 14 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
Mar 13 Javascript
Vue按需加载的具体实现
Dec 02 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
Jan 16 Javascript
详解使用jest对vue项目进行单元测试
Sep 07 Javascript
Node.js net模块功能及事件监听用法分析
Jan 05 Javascript
JS实现滚动条触底加载更多
Sep 19 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
Nov 05 Javascript
Node.js API详解之 V8模块用法实例分析
Jun 05 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删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
php定时执行任务设置详解
2015/02/06 PHP
详解WordPress中调用评论模板和循环输出评论的PHP函数
2016/01/05 PHP
thinkphp3.2嵌入百度编辑器ueditor的实例代码
2017/07/13 PHP
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
PHP数据库操作四:mongodb用法分析
2017/08/16 PHP
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
JS的location.href跳出框架打开新页面的方法
2014/09/04 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
2015/03/03 Javascript
javascript中checkbox使用方法实例演示
2015/11/19 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
JS使用正则表达式验证身份证号码
2017/06/23 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
在Vue项目中引入腾讯验证码服务的教程
2018/04/03 Javascript
vue项目中使用多选框的实例代码
2020/07/22 Javascript
JS canvas实现画板和签字板功能
2021/02/23 Javascript
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
python基于ID3思想的决策树
2018/01/03 Python
python迭代dict的key和value的方法
2018/07/06 Python
Python面向对象程序设计类的多态用法详解
2019/04/12 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
利用python绘制数据曲线图的实现
2020/04/09 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
python爬取youtube视频的示例代码
2021/03/03 Python
美国山地自行车、露营、户外装备和服装购物网站:Aventuron
2018/05/05 全球购物
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
应聘护士自荐信
2013/10/21 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
暑期政治学习心得体会
2014/09/02 职场文书
2015年度校学生会工作总结报告
2015/05/23 职场文书
MySQL通过binlog恢复数据
2021/05/27 MySQL
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python